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

type Option = { tag: string; title: string; body: string; image: { src: string; alt: string } };

const OPTIONS: Option[] = [
  {
    tag: "new",
    title: "Stunning new colors",
    body: "Crystal Clear reveals the intricate inner workings of the headset, while Nuclear Orange delivers a shockingly vibrant finish. Like Beyond 1, Beyond 2 is also available in Carbon Black.",
    image: { src: media.colors, alt: "Beyond 2 in Crystal Clear and Nuclear Orange finishes" },
  },
  {
    tag: "new",
    title: "Universal-fit Halo Mount",
    body: "With a floating design inspired by tactical night vision goggles, the Halo Mount rests gently on your forehead with adjustable eye relief and tilt. No iPhone Face Scan needed for the universal-fit Lightseal.",
    image: { src: media.haloMount, alt: "Beyond 2 universal-fit Halo Mount" },
  },
];

/**
 * Adjustment / fit — the customization story on a white plate (the original's
 * light contrast moment). Centered "/ CUSTOMIZE YOUR EXPERIENCE" intro, the IPD
 * footage, a two-tone fit statement, the new color + mount options, and the full
 * headset showcase to close.
 */
export function Adjustment() {
  return (
    <SectionShell tone="paper">
      <SectionKicker kicker="CUSTOMIZE YOUR EXPERIENCE">Adjustable IPD</SectionKicker>

      {/* IPD footage */}
      <Reveal className="mx-auto mt-12 max-w-5xl overflow-hidden rounded-lg bg-off-white md:mt-16">
        <div className="aspect-[16/9] w-full">
          <Video webm={media.adjustWebm} mp4={media.adjustMp4} />
        </div>
      </Reveal>

      {/* two-tone fit statement */}
      <Reveal className="mx-auto mt-24 max-w-4xl text-center md:mt-32">
        <h3 className="text-balance font-display text-[clamp(2rem,5vw,3.75rem)] font-medium leading-[1.04] tracking-[-0.025em]">
          <span className="text-brand">Tailor your fit</span> with Beyond 2
        </h3>
        <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-paper/65">
          VR is deeply personal. With Beyond 2, customization goes further with new
          options for straps, cushions, and colors. Fine-tune your headset for
          unmatched comfort across long-duration sessions.
        </p>
      </Reveal>

      {/* options */}
      <div className="mt-16 grid gap-6 md:grid-cols-2 md:gap-8">
        {OPTIONS.map((o, i) => (
          <Reveal key={o.title} delayMs={i * 100}>
            <div className="relative aspect-[16/10] overflow-hidden rounded-lg bg-off-white">
              <Image
                src={o.image.src}
                alt={o.image.alt}
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover"
              />
              <span className="absolute left-4 top-4 rounded-pill bg-brand px-3 py-1 font-mono text-caption uppercase tracking-[0.08em] text-brand-fg">
                {o.tag}
              </span>
            </div>
            <h4 className="mt-5 font-display text-2xl font-medium tracking-tight">{o.title}</h4>
            <p className="mt-3 max-w-prose text-base leading-relaxed text-paper/60">{o.body}</p>
          </Reveal>
        ))}
      </div>

      {/* compatibility statement */}
      <Reveal as="h3" className="mx-auto mt-24 max-w-4xl text-balance font-display text-[clamp(1.875rem,4.5vw,3.25rem)] font-medium leading-[1.08] tracking-[-0.02em] md:mt-32">
        Beyond 2 is compatible with your customizations from Beyond.{" "}
        <span className="text-paper/45">Straps, cushions, or your own mods, it works.</span>
      </Reveal>

      {/* full headset showcase */}
      <Reveal className="mt-12 overflow-hidden rounded-lg md:mt-16" delayMs={80}>
        <div className="relative aspect-[16/9] w-full bg-off-white">
          <Image
            src={media.headsetStrap}
            alt="The complete Beyond 2 headset with strap"
            fill
            sizes="100vw"
            className="object-contain p-6 md:p-12"
          />
        </div>
      </Reveal>
    </SectionShell>
  );
}