import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { SocialLinks } from "@/components/SocialLinks";
import { LegalLinks } from "@/components/LegalLinks";
import logoFcjColor from "@/assets/fcjgroup-color.png.asset.json";
import logoFcjBranco from "@/assets/fcjgroup-branco.png.asset.json";

export type LegalSection = {
  t: string;
  p: (string | ReactNode)[];
};

export function LegalPage({
  eyebrow,
  titulo,
  destaque,
  intro,
  atualizacao,
  secoes,
}: {
  eyebrow: string;
  titulo: string;
  destaque: string;
  intro: string;
  atualizacao: string;
  secoes: LegalSection[];
}) {
  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* NAV */}
      <nav className="sticky top-0 z-50 border-b border-border/70 bg-background/85 backdrop-blur-xl">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-6 px-6 py-4">
          <Link to="/" className="group flex items-center">
            <span className="rounded-xl bg-primary/10 px-3 py-2 ring-1 ring-primary/25 transition-all group-hover:bg-primary/15 group-hover:ring-primary/40">
              <img
                src={logoFcjColor.url}
                alt="FCJ Group"
                className="h-8 w-auto brightness-110 drop-shadow-[0_0_14px_rgba(10,179,197,0.55)]"
              />
            </span>
          </Link>
          <Link
            to="/"
            className="rounded-full border border-border px-5 py-2.5 font-display text-sm font-semibold transition-colors hover:border-primary/60 hover:text-primary"
          >
            Voltar para a home
          </Link>
        </div>
      </nav>

      {/* HERO */}
      <header className="border-b border-border bg-card/40">
        <div className="mx-auto max-w-3xl px-6 py-20 text-center">
          <p className="eyebrow">{eyebrow}</p>
          <h1 className="mt-4 text-3xl font-bold md:text-5xl">
            {titulo} <span className="text-gradient">{destaque}</span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{intro}</p>
          <p className="mt-6 font-mono text-[11px] uppercase tracking-widest text-primary">
            Última atualização: {atualizacao}
          </p>
        </div>
      </header>

      {/* CONTEÚDO */}
      <main className="mx-auto max-w-3xl px-6 py-16">
        <div className="space-y-10">
          {secoes.map((s, i) => (
            <section key={s.t} className="surface-card rounded-3xl p-8">
              <p className="font-mono text-xs tracking-widest text-primary">
                {String(i + 1).padStart(2, "0")}
              </p>
              <h2 className="mt-2 text-xl font-semibold md:text-2xl">{s.t}</h2>
              <div className="mt-4 space-y-4 leading-relaxed text-muted-foreground">
                {s.p.map((p, j) => (
                  <div key={j}>{p}</div>
                ))}
              </div>
            </section>
          ))}
        </div>

        <div className="surface-card mt-12 rounded-3xl p-8 text-center">
          <h2 className="text-xl font-semibold">Dúvidas sobre este documento?</h2>
          <p className="mt-3 text-muted-foreground">
            Fale com o nosso time pelo e-mail{" "}
            <a
              href="mailto:fcj@fcjventurebuilder.com"
              className="text-primary transition-colors hover:text-foreground"
            >
              fcj@fcjventurebuilder.com
            </a>
            .
          </p>
        </div>
      </main>

      {/* FOOTER */}
      <footer className="border-t border-border bg-card/50 py-14 text-sm">
        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-6 px-6">
          <img src={logoFcjBranco.url} alt="FCJ Group" className="h-9 w-auto" />
          <div className="flex flex-wrap gap-6 text-muted-foreground">
            <Link to="/" className="transition-colors hover:text-foreground">
              Home
            </Link>
            <Link to="/o-que-e-venture-builder" className="transition-colors hover:text-foreground">
              O que é Venture Builder
            </Link>
            <Link to="/master" className="transition-colors hover:text-foreground">
              Master CVB
            </Link>
            <Link to="/startups" className="transition-colors hover:text-foreground">
              Startups
            </Link>
            <Link to="/club" className="transition-colors hover:text-foreground">
              FCJ Innovation Club
            </Link>
            <a
              href="mailto:fcj@fcjventurebuilder.com"
              className="transition-colors hover:text-foreground"
            >
              fcj@fcjventurebuilder.com
            </a>
          </div>
          <SocialLinks />
        </div>
        <div className="mx-auto mt-8 flex max-w-6xl flex-wrap items-center justify-between gap-4 border-t border-border px-6 pt-6 text-xs text-muted-foreground">
          <LegalLinks className="text-muted-foreground" />
          <span>© 2026 FCJ Group. Todos os direitos reservados.</span>
        </div>
      </footer>
    </div>
  );
}