import { Container } from "@/components/ui/Container";
import { MonoTick } from "@/components/ui/MonoTick";
import { Button } from "@/components/ui/Button";
import { Reveal } from "@/components/ui/Reveal";

type Model = {
  numeral: string;
  price: string;
  blurb: string;
};

const MODELS: Model[] = [
  { numeral: "2", price: "From $1,019", blurb: "Next-gen optics, adjustable IPD, and a 116° field of view, at 107 grams." },
  { numeral: "2e", price: "From $1,219", blurb: "Everything in Beyond 2, plus integrated eyetracking and foveated rendering." },
];

/**
 * Closing order band — the original's "Ready to go Beyond?" choice. Two model
 * columns share the violet-dash wordmark, each with its price and order action.
 * Black stage; the violet signal lives in the dash and the CTA.
 */
export function CtaBand({ orderHref }: { orderHref: string }) {
  return (
    <section className="relative overflow-hidden border-t border-white/10 bg-paper py-24 text-ink md:py-32">
      <Container className="relative">
        <Reveal as="h2" className="mx-auto max-w-3xl text-balance text-center font-display text-[clamp(2.25rem,5.5vw,4rem)] font-medium leading-[1.04] tracking-[-0.03em]">
          Ready to go Beyond? Choose between Beyond 2 or Beyond 2e.
        </Reveal>

        <div className="mx-auto mt-16 grid max-w-4xl gap-px overflow-hidden rounded-lg border border-white/12 bg-white/12 md:mt-20 md:grid-cols-2">
          {MODELS.map((m, i) => (
            <Reveal key={m.numeral} delayMs={i * 100} className="flex flex-col bg-paper p-8 md:p-10">
              <div className="flex items-center gap-4 font-display text-4xl font-medium tracking-[-0.02em] md:text-5xl">
                <span>Beyond</span>
                <span aria-hidden className="h-[0.08em] w-8 rounded-full bg-brand" />
                <span>{m.numeral}</span>
              </div>
              <MonoTick className="mt-4 text-ink">{m.price}</MonoTick>
              <p className="mt-6 max-w-xs text-base leading-relaxed text-ink/60">{m.blurb}</p>
              <Button
                href={orderHref}
                variant={i === 0 ? "brand" : "outline"}
                size="lg"
                className="mt-8 self-start"
              >
                Order Beyond {m.numeral}
              </Button>
            </Reveal>
          ))}
        </div>

        <Reveal className="mt-10 text-center">
          <MonoTick className="text-ink">↳ SHIPS Q3 2026 · FREE SHIPPING</MonoTick>
        </Reveal>
      </Container>
    </section>
  );
}