import Link from "next/link";
import { ArrowRight, Swords } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDER_ORDER } from "@/lib/client/providers";
import { Container } from "./section";
import { Reveal } from "./reveal";
import { HeroVisual } from "./hero-visual";
import { PROVIDER_LABEL } from "./mock-data";

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      {/* Backdrop: dot grid fading out + a single restrained accent glow */}
      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-70 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black_30%,transparent_100%)] dark:opacity-50" />
      <div aria-hidden className="pointer-events-none absolute left-1/2 top-[-12rem] h-[28rem] w-[46rem] -translate-x-1/2 rounded-full bg-accent/15 blur-[110px] dark:bg-accent/10" />

      <Container className="relative pb-14 pt-12 sm:pb-24 sm:pt-24">
        <div className="mx-auto max-w-3xl text-center">
          <Reveal>
            <p className="inline-flex items-center gap-2 rounded-full border border-border bg-bg-elevated/80 px-3 py-1 text-xs text-fg-muted shadow-xs">
              <span className="size-1.5 rounded-full bg-success" aria-hidden />
              Free. Bring your own API keys. Nine providers, one workspace.
            </p>
          </Reveal>
          <Reveal delay={0.05}>
            <h1 className="mt-6 text-balance text-5xl font-semibold tracking-[-0.03em]">
              One interface.
              <br />
              <span className="text-gradient">Every model.</span>
            </h1>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="mx-auto mt-5 max-w-xl text-pretty text-base leading-7 text-fg-muted sm:text-lg sm:leading-8">Bring your own keys. Compare models. Control every parameter. Track every token.</p>
          </Reveal>
          <Reveal delay={0.15} className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Start using PolyLLM
                <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">
              <Link href="/app/arena">
                <Swords />
                Try Arena
              </Link>
            </Button>
          </Reveal>
          <Reveal delay={0.2}>
            <ul className="mt-7 flex flex-wrap items-center justify-center gap-x-4 gap-y-2" aria-label="Supported providers">
              {PROVIDER_ORDER.map((p) => (
                <li key={p} className="inline-flex items-center gap-1.5 text-[12.5px] text-fg-muted">
                  <ProviderIcon provider={p} size={14} />
                  {PROVIDER_LABEL[p]}
                </li>
              ))}
            </ul>
          </Reveal>
        </div>

        {/* The real product, animated */}
        <Reveal delay={0.25} y={24} className="mx-auto mt-12 w-full max-w-5xl sm:mt-16">
          <HeroVisual />
        </Reveal>
      </Container>
    </section>
  );
}