import { SectionShell } from "@/components/ui/SectionShell";
import { Reveal } from "@/components/ui/Reveal";

type Feature = { label: string; body: string; icon: React.ReactNode };

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

const FEATURES: Feature[] = [
  {
    label: "Edge-to-edge clarity",
    body: "A significant increase in sharpness across the entire field of view. Every detail stays crisp, from the center to the very edges.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} className={I} aria-hidden>
        <rect x="4" y="4" width="16" height="16" rx="1" />
        <path d="M9 9h6v6H9z" />
      </svg>
    ),
  },
  {
    label: "Massive sweet spot",
    body: "A significantly expanded eye box with clarity, allowing more freedom of movement without losing focus or sharpness.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} className={I} aria-hidden>
        <circle cx="12" cy="12" r="8" />
        <circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" />
      </svg>
    ),
  },
  {
    label: "Reduced lens glare",
    body: "Cleaner visuals in high-contrast scenes, with far fewer stray beams of light or distracting internal reflections.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} className={I} aria-hidden>
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2" />
      </svg>
    ),
  },
  {
    label: "Improved brightness",
    body: "A more efficient optical path, from the displays through the lenses, delivers a brighter, more vivid image.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} className={I} aria-hidden>
        <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4" />
        <circle cx="12" cy="12" r="3.5" />
      </svg>
    ),
  },
];

/**
 * Optics features — the four clarity claims, in the original's mono-labelled
 * format (Fragment Mono caps + a small instrument glyph), on the near-black
 * stage. A two-column spec list, one dominant idea each, no decorative grid.
 */
export function OpticsFeatures() {
  return (
    <SectionShell tone="graphite">
      <Reveal className="mx-auto mb-16 max-w-3xl text-center md:mb-24">
        <h2 className="text-balance font-display text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.06] tracking-[-0.02em]">
          Rebuilt around the eye box, so clarity holds wherever you look.
        </h2>
      </Reveal>

      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-x-16 gap-y-12 md:grid-cols-2 md:gap-y-16">
        {FEATURES.map((f, i) => (
          <Reveal key={f.label} delayMs={(i % 2) * 90} className="border-t border-white/12 pt-6">
            <div className="flex items-center gap-2.5 text-brand">
              {f.icon}
              <span className="font-mono text-caption uppercase tracking-[0.12em] text-ink/85">
                {f.label}
              </span>
            </div>
            <p className="mt-4 max-w-prose text-lg leading-relaxed text-ink/60">{f.body}</p>
          </Reveal>
        ))}
      </div>
    </SectionShell>
  );
}