import { LogoMarqueeHero } from "@/components/ui/hero-logo-marquee";

export default function Hero() {
  return (
    <LogoMarqueeHero
      logos={[
        "Acme",
        "Globex",
        "Soylent",
        "Initech",
        "Hooli",
        "Umbrella",
        "Stark",
        "Wayne",
        "Cyberdyne",
        "Wonka",
        "Tyrell",
        "Aperture",
      ]}
      secondaryLogos={[
        "Aperture",
        "Tyrell",
        "Wonka",
        "Cyberdyne",
        "Wayne",
        "Stark",
        "Umbrella",
        "Hooli",
        "Initech",
        "Soylent",
        "Globex",
        "Acme",
      ]}
      speed={32}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur">
        <span className="h-1.5 w-1.5 rounded-full bg-white/80" aria-hidden />
        Trusted across teams
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        The platform shipping teams ship with.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        From scrappy seed startups to public companies — UniqueUI components
        ship in production every day.
      </p>
    </LogoMarqueeHero>
  );
}