"use client";

import { DrawLine } from "../animations/DrawLine";
import HorizontalScroll from "../cinematic/HorizontalScroll";
import { Section } from "../Section";

/**
 * Palco extra estilo product-page: filmstrip horizontal PINNADO com prints
 * reais capturados dos deployments em produção (public/assets/prints).
 * O scroll vertical empurra a faixa na horizontal (scrub), cada card entra
 * com rotateY/scale ligados ao mesmo trilho — sensação de carrossel de vídeo.
 */

const PRINTS = [
  {
    src: "/assets/prints/print-nutriscan.png",
    name: "NutriScan",
    desc: "PWA de dados nutricionais sobre Open Food Facts — busca, Nutri-Score e NOVA.",
    url: "https://nutriscan.evandro.dev.br",
    accent: true,
  },
  {
    src: "/assets/prints/print-scplus.png",
    name: "SCPLUS",
    desc: "Educação e tecnologia sustentável em Garuva-SC; interface institucional viva.",
    url: "https://scplus.evandro.dev.br",
    accent: false,
  },
  {
    src: "/assets/prints/print-sev.png",
    name: "SEV Moda Íntima",
    desc: "E-commerce em produção com checkout e catálogo — Next.js ponta a ponta.",
    url: "https://sevmodaintima.com.br",
    accent: true,
  },
  {
    src: "/assets/prints/print-asservicos.png",
    name: "AS Serviços",
    desc: "Presença digital SSR para operação de serviços, pronta para crescer.",
    url: "https://asservicos.com",
    accent: false,
  },
];

export default function PrintReel() {
  return (
    <Section
      id="print-reel"
      eyebrow="No ar, rodando"
      title="Prints ao vivo dos sistemas em produção"
      description="Capturas reais dos deployments — role e a faixa corre na horizontal como um reel."
      dark
      disableChildrenAnimation
    >
      <div className="flex h-[100dvh] items-center">
        <HorizontalScroll className="w-full">
        {PRINTS.map((print) => (
          <a
            key={print.name}
            data-scroll-item
            href={print.url}
            target="_blank"
            rel="noopener noreferrer"
            className="group flex w-[min(78vw,380px)] shrink-0 flex-col"
          >
            {/* moldura de navegador */}
            <div className="overflow-hidden rounded-t-xl border border-b-0 border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.05)] px-4 py-3">
              <div className="flex items-center gap-2">
                <span className="h-2.5 w-2.5 rounded-full bg-[rgba(255,255,255,.18)]" />
                <span className="h-2.5 w-2.5 rounded-full bg-[rgba(255,255,255,.18)]" />
                <span
                  className={`h-2.5 w-2.5 rounded-full ${print.accent ? "bg-[var(--slash)]" : "bg-[rgba(255,255,255,.18)]"}`}
                />
                <span className="ml-2 truncate font-mono text-[10px] text-[rgba(244,242,237,.5)]">
                  {new URL(print.url).hostname}
                </span>
              </div>
            </div>
            <div className="relative h-[420px] overflow-hidden border border-[rgba(255,255,255,.12)] bg-black">
              {/* o print real, deslizando de leve dentro da moldura (Ken Burns) */}
              <img
                src={print.src}
                alt={`Captura do projeto ${print.name} em produção`}
                loading="lazy"
                className="absolute inset-x-0 top-0 w-full origin-top scale-[1.04] object-cover object-top transition-transform duration-700 ease-out group-hover:-translate-y-6 group-hover:scale-100"
              />
              <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,transparent_60%,rgba(10,10,10,.85)_100%)]" />
            </div>
            <div className="border border-t-0 border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.03)] p-sp-5">
              <div className="flex items-center justify-between">
                <h3 className="font-display text-[18px] font-extrabold tracking-[-0.02em] text-[var(--paper)]">
                  {print.name}
                </h3>
                <span className="font-mono text-[9px] uppercase tracking-[0.14em] text-[var(--slash)]">
                  ao vivo ↗
                </span>
              </div>
              <DrawLine delay={0.1} />
              <p className="mt-sp-2 text-[13px] leading-6 text-[rgba(244,242,237,.66)]">
                {print.desc}
              </p>
            </div>
          </a>
        ))}
        </HorizontalScroll>
      </div>
    </Section>
  );
}