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

const SPECS: { label: string; value: string }[] = [
  { label: "Resolution", value: "5120 × 2560" },
  { label: "Contrast ratio", value: "500,000:1" },
  { label: "Refresh rate", value: "up to 90 Hz" },
  { label: "Peak pixels per degree", value: "32 PPD" },
];

/**
 * Displays — field of view and the micro-OLED panels. The immersive forest demo
 * runs full-width with the 116° readout set as a tabular instrument, then the
 * dual-display story pairs its spec list with the panel macro. Big numbers do the
 * talking, exactly the original's register.
 */
export function Displays() {
  return (
    <SectionShell tone="stage">
      {/* FOV demo */}
      <Reveal className="overflow-hidden rounded-lg">
        <div className="aspect-[16/9] w-full bg-[#0a0a0b]">
          <Video webm={media.fovWebm} mp4={media.fovMp4} />
        </div>
      </Reveal>

      <div className="mt-10 grid gap-10 md:mt-14 md:grid-cols-12 md:items-start">
        <Reveal className="md:col-span-7">
          <p className="max-w-xl text-xl leading-relaxed text-ink/70">
            Beyond 2 delivers an incredibly wide field of view, surprisingly wider
            than VR headsets such as the Meta Quest 3 and Valve Index. This reduces
            the tunnel vision effect, letting you see more of your virtual world at
            once with greater immersion.
          </p>
          <p className="mt-6 max-w-xl text-sm leading-relaxed text-ink/40">
            The above comparison is for illustrative purposes and may differ from
            real-world performance. Beyond 2 measured at 116° diagonal, 108°
            horizontal, 96° vertical. Measured with WIMFOV at minimum eye relief and
            default accessories.
          </p>
        </Reveal>
        <Reveal className="md:col-span-5 md:text-right" delayMs={100}>
          <div className="font-mono text-caption uppercase tracking-[0.12em] text-ink/55">
            <span className="text-brand">/</span> FOV
          </div>
          <div className="mt-2 font-display text-[clamp(4rem,9vw,7rem)] font-medium leading-none tracking-[-0.03em] tabular-nums">
            116°
          </div>
        </Reveal>
      </div>

      {/* Dual micro-OLED */}
      <div className="mt-24 grid gap-12 md:mt-32 md:grid-cols-2 md:items-center md:gap-16">
        <Reveal>
          <h2 className="font-display text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.05] tracking-[-0.02em]">
            Dual micro-OLED displays
          </h2>
          <p className="mt-6 max-w-prose text-lg leading-relaxed text-ink/65">
            Over 13.1 million pixels are packed into two 1-inch OLED displays in an
            RGB striped layout. Each pixel is just 7.2 μm wide, 7 times thinner than a
            human hair, with response times measured in nanoseconds. No more screen
            door effect, dull colors, or motion blur from older LCD-based headsets.
          </p>

          <dl className="mt-10 space-y-6">
            {SPECS.map((s) => (
              <div key={s.label} className="border-t border-white/12 pt-3">
                <dt className="font-mono text-caption uppercase tracking-[0.12em] text-ink/55">
                  {s.label}
                </dt>
                <dd className="mt-1 font-display text-3xl font-medium tracking-tight tabular-nums md:text-4xl">
                  {s.value}
                </dd>
              </div>
            ))}
          </dl>
        </Reveal>

        <Reveal delayMs={100} className="overflow-hidden rounded-lg md:order-last">
          <div className="relative aspect-[4/3] w-full bg-[#0a0a0b]">
            <Image
              src={media.opticsDisplay}
              alt="Macro view of a Beyond 2 micro-OLED display"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
            />
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
}