import { createFileRoute } from "@tanstack/react-router";
import data from "@/data/portfolio.json";

type Item = { white: string; blue: string; text: string[]; links: { href: string; icon: string }[] };

export const Route = createFileRoute("/portfolio")({
  head: () => ({
    meta: [
      { title: "Portfólio – Dome Ventures" },
      { name: "description", content: "Conheça as soluções inovadoras que estão transformando as instituições públicas no Brasil." },
      { property: "og:title", content: "Portfólio – Dome Ventures" },
      { property: "og:description", content: "Nossas soluções govtech." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Portfolio,
});

function Portfolio() {
  return (
    <main className="bg-navy pb-24">
      <div className="mx-auto max-w-[760px] px-5 py-16 text-center text-primary-foreground">
        <h1 className="text-[40px] font-semibold md:text-[52px]">Nossas soluções</h1>
        <p className="mt-4 text-[22px] leading-tight md:text-[28px]">Conheça as soluções inovadoras que estão transformando as instituições públicas no Brasil.</p>
      </div>
      <div className="mx-auto grid max-w-[1920px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
        {(data as Item[]).map((i) => (
          <div key={i.white} className="group relative flex h-[580px] items-center justify-center overflow-hidden">
            <img src={i.white} alt="" className="max-h-[160px] w-[150px] object-contain transition-opacity group-hover:opacity-0" />
            <div className="absolute inset-0 flex flex-col items-center justify-center gap-5 bg-surface p-8 text-center opacity-0 transition-opacity group-hover:opacity-100">
              <img src={i.blue} alt="" className="max-h-[100px] w-[150px] object-contain" />
              <div className="space-y-2 text-[14px] leading-snug text-navy">{i.text.map((t) => <p key={t}>{t}</p>)}</div>
              <div className="flex gap-3">
                {i.links.map((l) => (
                  <a key={l.href + l.icon} href={l.href} target="_blank" rel="noreferrer"><img src={l.icon} alt="" className="h-7 w-7 object-contain" /></a>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}