import Image from "next/image";
import { SectionShell } from "@/components/ui/SectionShell";
import { Eyebrow } from "@/components/ui/Eyebrow";
import { Reveal } from "@/components/ui/Reveal";
import { media } from "@/lib/assets";

const FEATURES: { title: string; body: React.ReactNode }[] = [
  {
    title: "Expression in social VR",
    body: "Enhance your avatars in applications like VRChat with eyetracking to communicate body-language cues like attention and gaze.",
  },
  {
    title: "Dynamic Foveated Rendering",
    body: (
      <>
        <span className="text-brand">Now available in early access</span>, this
        technique uses eyetracking to focus GPU power exactly where you look,
        lowering PC workload and improving performance.
      </>
    ),
  },
];

/**
 * Eyetracking — the Beyond 2e story on the black stage. Centered "/ EYETRACKING"
 * kicker over the violet-dash wordmark (echoing the hero), the sensor macro full
 * width, then the big claim paired with two sub-capabilities.
 */
export function Eyetracking() {
  return (
    <SectionShell id="eyetracking" tone="stage">
      <Reveal className="flex flex-col items-center text-center">
        <Eyebrow className="mb-6">EYETRACKING</Eyebrow>
        <h2 className="flex flex-wrap items-center justify-center gap-x-5 gap-y-1 font-display text-[clamp(2.5rem,7vw,5.5rem)] font-medium leading-none tracking-[-0.03em]">
          <span>Beyond</span>
          <span aria-hidden className="hidden h-[0.1em] w-[clamp(2rem,4vw,4rem)] shrink-0 rounded-full bg-brand sm:inline-block" />
          <span>2e</span>
        </h2>
      </Reveal>

      <Reveal className="mt-12 overflow-hidden rounded-lg md:mt-16" delayMs={80}>
        <div className="relative aspect-[16/9] w-full bg-[#0a0a0b]">
          <Image
            src={media.eyetracking}
            alt="Beyond 2e internals showing the integrated eyetracking sensors"
            fill
            sizes="100vw"
            className="object-cover"
          />
        </div>
      </Reveal>

      <div className="mt-14 grid gap-12 md:mt-20 md:grid-cols-12 md:gap-16">
        <Reveal className="md:col-span-7">
          <p className="font-display text-[clamp(1.75rem,3.4vw,2.75rem)] font-medium leading-[1.12] tracking-[-0.015em]">
            Beyond 2e features <span className="text-brand">integrated eyetracking</span>{" "}
            with camera sensors the size of a grain of sand. Our advanced AI and
            computer-vision research delivers a state-of-the-art pupil tracking system.
          </p>
        </Reveal>
        <div className="md:col-span-5 md:pt-2">
          {FEATURES.map((f, i) => (
            <Reveal
              key={f.title}
              delayMs={i * 100}
              className="border-t border-white/12 py-6 first:border-t-0 first:pt-0 md:py-7"
            >
              <h3 className="font-display text-xl font-medium tracking-tight">{f.title}</h3>
              <p className="mt-2 text-base leading-relaxed text-ink/60">{f.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </SectionShell>
  );
}