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

/**
 * Intro statement — the original's violet band, evolved. A drenched-violet plate
 * (the brand's one committed-color moment) carrying the declarative lede, with a
 * faint hairline grid standing in for the old circuit motif: structural, not busy.
 */
export function IntroStatement() {
  return (
    <section className="relative overflow-hidden bg-brand py-24 text-brand-fg md:py-32">
      <div
        aria-hidden
        className="grid-rules pointer-events-none absolute inset-0 [--grid-alpha:0.08] [--grid-gap:104px]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-paper/30 to-transparent"
      />
      <Container className="relative">
        <div className="mb-10 flex items-center gap-4">
          <MonoTick className="text-brand-fg">↳ THE HEADSET</MonoTick>
          <span aria-hidden className="h-px flex-1 bg-brand-fg/20" />
        </div>
        <Reveal>
          <p className="max-w-5xl text-balance font-display text-[clamp(1.875rem,4vw,3.5rem)] font-medium leading-[1.12] tracking-[-0.015em]">
            Beyond&nbsp;2 delivers unbelievable immersion with next-gen optics,
            stunning edge-to-edge clarity, and a wider field of view. Packed with new
            capabilities like adjustable IPD and advanced eyetracking. Now even lighter,
            at just <span className="whitespace-nowrap font-mono">107 grams</span>.
          </p>
        </Reveal>
      </Container>
    </section>
  );
}