const LOGOS = ["Northwind", "Acme", "Lumen", "Vela", "Monzo", "Cortex", "Sundial", "Patch", "Orbit", "Kettle"];

function LogoMarquee({ reverse }: { reverse?: boolean }) {
  return (
    <div className="relative flex overflow-hidden">
      <div
        className="flex shrink-0 items-center gap-12 pr-12"
        style={{ animation: `trust-scroll 28s linear infinite ${reverse ? "reverse" : ""}` }}
      >
        {LOGOS.map((l) => (
          <span key={l} className="text-[22px] font-semibold tracking-tight text-black/35 hover:text-black/70 transition-colors">
            {l}
          </span>
        ))}
      </div>
      <div
        aria-hidden
        className="flex shrink-0 items-center gap-12 pr-12"
        style={{ animation: `trust-scroll 28s linear infinite ${reverse ? "reverse" : ""}` }}
      >
        {LOGOS.map((l) => (
          <span key={l} className="text-[22px] font-semibold tracking-tight text-black/35">{l}</span>
        ))}
      </div>
    </div>
  );
}

export function MarqueeGlowHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#fbfbf9] text-[#0c0c10] antialiased flex flex-col justify-center gap-12 px-0 py-16">
      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[14px] font-semibold tracking-tight">Velynkit</span>
        <a href="#" className="rounded-full bg-[#0c0c10] px-4 py-1.5 text-[12.5px] font-medium text-white">Start free</a>
      </div>

      {/* headline */}
      <div className="relative z-10 mx-auto max-w-2xl px-6 text-center">
        <div className="mx-auto mb-6 flex w-fit items-center gap-3 rounded-full border border-black/10 bg-white px-3 py-1.5">
          <div className="flex -space-x-2">
            {["#6366f1", "#ec4899", "#f59e0b", "#10b981", "#06b6d4"].map((c) => (
              <span key={c} className="h-6 w-6 rounded-full border-2 border-white" style={{ background: c }} />
            ))}
          </div>
          <span className="text-[12.5px] text-black/55">
            <span className="text-amber-500">★★★★★</span> 4.9 · 3,200 reviews
          </span>
        </div>
        <h1 className="text-[clamp(36px,5vw,68px)] font-semibold leading-[1.02] tracking-[-0.035em]">
          Loved by the teams
          <br />
          you already know.
        </h1>
        <p className="mx-auto mt-5 max-w-md text-[15.5px] leading-relaxed text-black/55">
          From two-person studios to public companies — 12,000+ teams build
          their product surface on Velynkit.
        </p>
        <a href="#" className="mt-7 inline-flex items-center gap-2 rounded-full bg-[#0c0c10] px-6 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">
          Join them →
        </a>
      </div>

      {/* dual logo marquees with edge fade */}
      <div className="relative">
        <div className="space-y-6">
          <LogoMarquee />
          <LogoMarquee reverse />
        </div>
        <div aria-hidden className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-linear-to-r from-[#fbfbf9] to-transparent" />
        <div aria-hidden className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-linear-to-l from-[#fbfbf9] to-transparent" />
      </div>

      <style>{`
        @keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
      `}</style>
    </div>
  );
}
Trust Cloud Hero

Loved by the teamsyou already know.

Loved by the teams
you already know.
