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

/**
 * Display & optics — the optics opener on the black stage. A centered statement,
 * then the lens-under-magnifier still running large, then the lede. The product
 * shot carries the fold; no chrome competes with it.
 */
export function DisplayOptics() {
  return (
    <SectionShell id="optics" tone="stage">
      <Reveal as="h2" className="mx-auto max-w-4xl text-balance text-center font-display text-[clamp(2.25rem,5.5vw,4rem)] font-medium leading-[1.04] tracking-[-0.025em]">
        Advanced optics. <span className="text-ink/45">Unbelievable immersion.</span>
      </Reveal>

      <Reveal className="mt-12 overflow-hidden rounded-lg md:mt-16" delayMs={80}>
        <div className="relative aspect-[16/9] w-full">
          <Image
            src={media.opticsMagnifier}
            alt="A Beyond 2 lens inspected under a magnifier beside the optical components"
            fill
            sizes="100vw"
            className="object-cover"
          />
        </div>
      </Reveal>

      <Reveal className="mx-auto mt-10 max-w-2xl md:mt-14" delayMs={120}>
        <p className="text-balance text-center text-xl leading-relaxed text-ink/70">
          After years of rigorous research and development, spanning six generations,
          Beyond 2 features our most advanced optics technology yet.
        </p>
      </Reveal>
    </SectionShell>
  );
}