"use client";

import Image from "next/image";

type Card = {
  n: string;
  titulo: string;
  body: string;
  tag: string;
  destaque?: boolean;
  img: string;
  imgAlt: string;
};

const CARDS: Card[] = [
  {
    n: "01",
    titulo: "Fila de produção inteligente",
    body: "Adicione múltiplos trabalhos em sequência. O sistema processa desatendido enquanto você cuida do resto.",
    tag: "AUTOMAÇÃO",
    img: "/features/01-fila-producao.svg",
    imgAlt: "Ilustração de fila de produção com processador central",
  },
  {
    n: "02",
    titulo: "3 etapas de verificação antes de destinar",
    body: "Cada foto passa por triagem tripla antes de ser alocada. Menos erro chega ao entregável final.",
    tag: "PRECISÃO",
    img: "/features/02-tres-etapas.svg",
    imgAlt: "Três caixas com check indicando as três etapas de verificação",
  },
  {
    n: "03",
    titulo: "Buscar não identificados",
    body: "A IA varre os não identificados e localiza possíveis formandos que ficaram pra trás. Ninguém fica de fora.",
    tag: "RECUPERAÇÃO",
    img: "/features/03-buscar-nao-identificados.svg",
    imgAlt: "Silhueta com marcador vermelho de não identificado e lupa em cima",
  },
  {
    n: "04",
    titulo: "Reconhecer familiares",
    body: "Recurso inédito. O sistema identifica os familiares do formando nas fotos. Chega de garimpar manualmente foto de parente em lote de 10 mil imagens.",
    tag: "INÉDITO",
    destaque: true,
    img: "/features/04-reconhecer-familiares.svg",
    imgAlt: "Rostos de mãe e pai com marcadores de face detection",
  },
  {
    n: "05",
    titulo: "Filtro por olhos fechados, sorriso e qualidade",
    body: "Descarte automático do que não presta antes de entregar ao cliente.",
    tag: "CURADORIA",
    img: "/features/05-filtro-olhos-fechados.svg",
    imgAlt: "Mesma pessoa em duas versões: olho aberto aprovada e olho fechado com X vermelho",
  },
  {
    n: "06",
    titulo: "Fotos por vizinhança",
    body: "Identifica o formando em fotos sem rosto visível: outorga, alianças, mãos. Quem não apareceu de frente, ainda aparece.",
    tag: "VISÃO",
    img: "/features/06-fotos-vizinhanca.svg",
    imgAlt: "Sequência rosto, mão com aliança e rosto identificando a mesma pessoa",
  },
  {
    n: "07",
    titulo: "Descarte por similaridade",
    body: "A IA reconhece sequência de fotos iguais e descarta a série automaticamente. Você não faz curadoria manual de burst.",
    tag: "EFICIÊNCIA",
    img: "/features/07-descarte-similaridade.svg",
    imgAlt: "Quatro fotos praticamente iguais com três descartadas e uma escolhida",
  },
  {
    n: "08",
    titulo: "Windows e Mac nativos + API",
    body: "Roda no que você já usa. Integra com o sistema do seu estúdio se precisar.",
    tag: "PLATAFORMA",
    img: "/features/08-multi-plataforma.svg",
    imgAlt: "Ícones estilizados de monitor Windows, laptop Mac e API REST na nuvem",
  },
];

function CardMedia({ card }: { card: Card }) {
  return (
    <div className="relative w-full aspect-[16/10] mb-5 overflow-hidden border border-neon/20 bg-ink-900 flex items-center justify-center">
      <Image
        src={card.img}
        alt={card.imgAlt}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 25vw"
        className="object-contain p-3"
      />
      <span className="absolute top-2 right-2 font-mono text-[9px] uppercase tracking-widest text-neon bg-ink-900/80 border border-neon/40 px-1.5 py-0.5">
        UI · 2.0
      </span>
    </div>
  );
}

export default function Diferenciais() {
  return (
    <section id="diferenciais" className="relative py-16 md:py-24 border-t border-neon/10">
      <div className="mx-auto max-w-7xl px-5 md:px-10">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-3">
            <span className="h-px w-8 bg-neon" />
            <span className="text-[11px] md:text-xs font-mono uppercase tracking-[0.3em] text-neon">
              O que vem dentro
            </span>
          </div>
          <h2 className="mt-6 font-display font-black uppercase leading-[0.9] text-5xl sm:text-6xl md:text-7xl">
            Oito recursos que mudam <span className="text-neon">o jogo</span>.
          </h2>
          <p className="mt-6 text-lg md:text-xl text-white/70 max-w-2xl leading-relaxed">
            Não é atualização cosmética. Cada um desses recursos apaga horas de trabalho manual
            que você faz hoje sem perceber.
          </p>
        </div>

        {/* Grid */}
        <div className="mt-10 md:mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-neon/10">
          {CARDS.map((c) => (
            <article
              key={c.n}
              className={`group relative bg-ink-800 p-5 md:p-6 flex flex-col transition-colors hover:bg-ink-700 ${
                c.destaque
                  ? "bg-gradient-to-br from-neon/15 via-ink-700 to-ink-800 md:border-l-2 md:border-neon/40"
                  : ""
              }`}
            >
              {/* Media (SVG estilizado) */}
              <CardMedia card={c} />

              {/* topo: número + tag */}
              <div className="flex items-start justify-between mb-4">
                <span
                  className={`font-display font-black text-4xl md:text-5xl leading-none ${
                    c.destaque ? "text-neon" : "text-white/20 group-hover:text-neon/50"
                  } transition-colors`}
                >
                  {c.n}
                </span>
                <span
                  className={`font-mono text-[10px] uppercase tracking-widest px-2 py-1 border ${
                    c.destaque
                      ? "border-neon text-neon bg-neon/10"
                      : "border-white/20 text-white/50"
                  }`}
                >
                  {c.tag}
                </span>
              </div>

              {/* título + body */}
              <div>
                <h3
                  className={`font-display font-bold uppercase leading-[0.95] ${
                    c.destaque
                      ? "text-xl md:text-2xl text-white"
                      : "text-lg md:text-xl text-white"
                  }`}
                >
                  {c.titulo}
                </h3>
                <p
                  className={`mt-3 leading-relaxed ${
                    c.destaque ? "text-white/85 text-sm md:text-base" : "text-white/65 text-sm"
                  }`}
                >
                  {c.body}
                </p>
              </div>

              {/* bracket canto inferior direito só no hover */}
              <span
                className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-neon opacity-0 group-hover:opacity-100 transition-opacity"
                aria-hidden
              />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}