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";

type Quote = { quote: string; outlet: string; image: string };

const QUOTES: Quote[] = [
  {
    quote:
      "The Bigscreen Beyond 2's next-gen optics set a new bar for PC VR. Sharp clarity, wide FOV, zero eye strain. This is the ultimate sim racing headset.",
    outlet: "Optimum",
    image: media.press[0],
  },
  {
    quote:
      "With virtually no glare, sharp optics, and an ultra-light custom fit, the Bigscreen Beyond 2 is one of the most immersive PC VR headsets I've ever tested.",
    outlet: "Tested",
    image: media.press[1],
  },
  {
    quote:
      "I saw fewer distracting internal reflections, and the area of clarity is huge. This device is built for people who want to spend many hours in incredible places.",
    outlet: "UploadVR",
    image: media.press[2],
  },
  {
    quote:
      "Beyond 2 fixes almost every major complaint I had: a wider 116° FOV, per-eye IPD adjustment, and lenses that banish glare and distracting reflections.",
    outlet: "Thrillseeker",
    image: media.press[3],
  },
];

const LOGOS: { src: string; alt: string }[] = [
  { src: media.logos[0], alt: "UploadVR" },
  { src: media.logos[1], alt: "Forbes" },
  { src: media.logos[2], alt: "Road to VR" },
  { src: media.logos[3], alt: "The Verge" },
];

/**
 * Press — what reviewers said. Centered "/ PRESS" kicker, four testimonial cards
 * pairing the outlet's still with a pull-quote, then a quiet row of outlet logos.
 * Black stage; the imagery carries the credibility, no color competes.
 */
export function Press() {
  return (
    <SectionShell tone="stage">
      <Reveal className="flex flex-col items-center text-center">
        <Eyebrow className="mb-6">PRESS</Eyebrow>
        <h2 className="font-display text-[clamp(2.25rem,5.5vw,4rem)] font-medium leading-[1.02] tracking-[-0.025em]">
          What people are saying
        </h2>
      </Reveal>

      <div className="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 md:mt-20 lg:grid-cols-4">
        {QUOTES.map((q, i) => (
          <Reveal key={q.outlet} delayMs={(i % 4) * 80} className="flex flex-col">
            <div className="relative aspect-[5/4] overflow-hidden rounded-lg bg-[#0a0a0b]">
              <Image
                src={q.image}
                alt={`${q.outlet} reviewing the Bigscreen Beyond 2`}
                fill
                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                className="object-cover"
              />
            </div>
            <div className="mt-4 font-mono text-caption uppercase tracking-[0.12em] text-ink/55">
              {q.outlet}
            </div>
            <p className="mt-3 text-base leading-relaxed text-ink/80">“{q.quote}”</p>
          </Reveal>
        ))}
      </div>

      <Reveal className="mt-16 flex flex-wrap items-center justify-center gap-x-12 gap-y-8 md:mt-24 md:gap-x-20">
        {LOGOS.map((l) => (
          <div key={l.alt} className="relative h-7 w-28 opacity-45 md:h-8 md:w-32">
            <Image
              src={l.src}
              alt={l.alt}
              fill
              sizes="160px"
              className="object-contain object-center"
            />
          </div>
        ))}
      </Reveal>
    </SectionShell>
  );
}