"use client";

import Image from "next/image";
import { Container } from "@/components/ui/Container";
import { useReveal } from "@/lib/use-reveal";
import { media } from "@/lib/assets";

type Pillar = {
  label: string;
  image: { src: string; alt: string };
  icon: React.ReactNode;
};

const I = "h-5 w-5 stroke-current";

const PILLARS: Pillar[] = [
  {
    label: "Next-Gen Optics",
    image: { src: media.pillarOptics, alt: "Beyond 2 pancake lens assembly" },
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className={I} strokeWidth={1.5} aria-hidden>
        <circle cx="12" cy="12" r="8" />
        <path d="M12 4a8 8 0 0 0 0 16Z" fill="currentColor" stroke="none" />
      </svg>
    ),
  },
  {
    label: "Adjustable IPD",
    image: { src: media.pillarIpd, alt: "Beyond 2 adjustable IPD mechanism" },
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className={I} strokeWidth={1.5} aria-hidden>
        <path d="M3 12h18M3 12l4-4M3 12l4 4M21 12l-4-4M21 12l-4 4" />
      </svg>
    ),
  },
  {
    label: "Eyetracking",
    image: { src: media.pillarEyetracking, alt: "Beyond 2 eyetracking sensors" },
    icon: (
      <svg viewBox="0 0 24 24" fill="none" className={I} strokeWidth={1.5} aria-hidden>
        <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" />
        <circle cx="12" cy="12" r="2.5" />
      </svg>
    ),
  },
];

/**
 * Pillars — the three capability tiles (the original's optics / IPD / eyetracking
 * row), now full-bleed product imagery on the black stage. Each tile carries its
 * mono icon + label low-left over the image; they rise in a staggered cascade.
 */
export function Pillars() {
  return (
    <section className="bg-paper py-16 text-ink md:py-24">
      <Container>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          {PILLARS.map((p, i) => (
            <PillarCard key={p.label} pillar={p} index={i} />
          ))}
        </div>
      </Container>
    </section>
  );
}

function PillarCard({ pillar, index }: { pillar: Pillar; index: number }) {
  const ref = useReveal<HTMLDivElement>({ delayMs: index * 120, y: 36 });
  return (
    <div
      ref={ref}
      className="group relative aspect-[4/5] overflow-hidden rounded-lg bg-[#0a0a0b]"
    >
      <Image
        src={pillar.image.src}
        alt={pillar.image.alt}
        fill
        sizes="(max-width: 640px) 100vw, 33vw"
        className="object-cover transition-transform duration-700 ease-signature group-hover:scale-[1.04] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0b]/90 via-transparent to-transparent" />
      <div className="absolute inset-x-0 bottom-0 flex items-center gap-3 p-6">
        <span className="text-ink/90">{pillar.icon}</span>
        <h3 className="font-display text-2xl font-medium tracking-tight">{pillar.label}</h3>
      </div>
    </div>
  );
}