import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowRight,
  ArrowUpRight,
  Activity,
  BarChart3,
  Brain,
  CheckCircle2,
  FileCheck2,
  Heart,
  HeartPulse,
  ShieldCheck,
  Sparkles,
  TrendingUp,
  Users,
} from "lucide-react";
import heroMeeting from "@/assets/hero-meeting.jpg";
import { SiteShell } from "@/components/site/SiteShell";
import { RootLines } from "@/components/site/RootLines";
import { SectionDivider } from "@/components/site/SectionDivider";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Instituto Vida Segura | Liderança e Segurança Psicológica" },
      {
        name: "description",
        content:
          "Tecnologia, ciência e desenvolvimento humano para prevenir riscos psicossociais, fortalecer equipes e construir organizações mais saudáveis. Fale conosco!",
      },
      {
        property: "og:title",
        content: "Instituto Vida Segura | Liderança e Segurança Psicológica",
      },
      {
        property: "og:description",
        content:
          "Tecnologia, ciência e desenvolvimento humano para prevenir riscos psicossociais, fortalecer equipes e construir organizações mais saudáveis. Fale conosco!",
      },
    ],
  }),
  component: HomePage,
});

function HomePage() {
  return (
    <SiteShell>
      <Hero />
      <SectionDivider variant="gold" flip />
      <TwoLayers />
      <SectionDivider variant="mind" />
      <Cycle />
      <SectionDivider variant="safe" flip />
      <FinalCTA />
    </SiteShell>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="relative overflow-hidden bg-background">
      {/* ambient glows */}
      <div className="pointer-events-none absolute -top-40 -right-40 h-[32rem] w-[32rem] rounded-full bg-[color:var(--life)]/15 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-40 -left-40 h-[32rem] w-[32rem] rounded-full bg-[color:var(--life-soft)]/15 blur-3xl" />

      <div className="container-page relative grid gap-8 pt-12 pb-10 sm:gap-14 sm:pt-20 sm:pb-16 lg:grid-cols-[1fr_1.05fr] lg:items-center lg:gap-14 lg:pt-28 lg:pb-20">
        {/* LEFT */}
        <div className="animate-fade-up relative z-10 flex flex-col justify-center lg:py-6">
          <h1 className="font-display text-[1.7rem] font-semibold leading-[1.15] tracking-tight text-[color:var(--safe)] [text-wrap:balance] sm:text-[2.25rem] sm:leading-[1.1] md:text-[2.75rem] lg:text-[3.25rem] lg:leading-[1.05]">
            Cuidar de{" "}
            <span className="italic text-gradient-life">pessoas</span>{" "}
            e fortalecer{" "}
            <span className="italic text-[color:var(--life-soft)]">empresas</span>{" "}
            <br className="hidden sm:block" /> é o nosso maior talento.
          </h1>

          <div className="mt-5 flex items-start gap-3 sm:mt-7 sm:gap-4">
            <span className="mt-2 inline-block h-[3px] w-8 shrink-0 rounded-full bg-gradient-to-r from-[color:var(--life)] to-[color:var(--life-soft)] sm:w-12" />
            <p className="max-w-md text-[15px] leading-relaxed text-muted-foreground sm:text-base">
              Unimos tecnologia, ciência e desenvolvimento humano para prevenir
              riscos psicossociais, fortalecer equipes e construir organizações
              mais saudáveis, produtivas e sustentáveis.
            </p>
          </div>

          <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
            <Link
              to="/contato"
              className="group inline-flex items-center justify-center gap-2 rounded-full bg-[color:var(--life)] px-6 py-3.5 text-sm font-bold text-[color:var(--safe)] shadow-xl shadow-[color:var(--life)]/25 transition-transform hover:scale-[1.03] sm:px-7 sm:py-4"
            >
              Falar com um Especialista
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
            <Link
              to="/solucoes"
              className="inline-flex items-center justify-center gap-2 rounded-full border-2 border-[color:var(--safe)]/15 bg-background px-6 py-3.5 text-sm font-semibold text-foreground transition-colors hover:border-[color:var(--life)]/60 sm:px-7 sm:py-4"
            >
              Ver soluções
            </Link>
          </div>

          {/* trust strip */}
          <div className="mt-8 inline-flex max-w-xl items-start gap-3 rounded-2xl border border-[color:var(--life)]/20 bg-[color:var(--life)]/[0.06] px-4 py-3.5 sm:mt-10 sm:px-5 sm:py-4">
            <span className="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[color:var(--life)]/15">
              <ShieldCheck className="h-4 w-4 text-[color:var(--life)]" />
            </span>
            <div className="text-xs leading-snug">
              <p className="font-semibold text-[color:var(--life)]">
                Transformar hoje para proteger o amanhã.
              </p>
              <p className="mt-0.5 text-muted-foreground">
                Sua empresa preparada. Seu time fortalecido. Resultados que permanecem.
              </p>
            </div>
          </div>
        </div>

        {/* RIGHT — orbit composition */}
        <div className="relative mx-auto w-full max-w-[360px] sm:max-w-[480px] lg:max-w-[560px]">
          <OrbitVisual />
        </div>
      </div>

      {/* Pillar row */}
      <div className="container-page relative pb-10">
        <div className="grid gap-5 rounded-3xl border border-[color:var(--safe)]/10 bg-[color:var(--surface)]/70 px-5 py-6 backdrop-blur sm:grid-cols-2 sm:gap-6 sm:px-10 sm:py-7 lg:grid-cols-4 lg:gap-8">
          {[
            {
              icon: ShieldCheck,
              t: "Conformidade",
              s: "estratégica",
              d: "Alinhada e integrada à cultura e aos processos da empresa.",
            },
            {
              icon: Heart,
              t: "Ambientes",
              s: "mais saudáveis",
              d: "Menos adoecimento, mais engajamento.",
            },
            {
              icon: BarChart3,
              t: "Resultados",
              s: "que permanecem",
              d: "Equipes mais fortes, produtividade sustentável e reputação valorizada.",
            },
            {
              icon: Users,
              t: "Impacto",
              s: "que transforma",
              d: "Cuidamos de pessoas para impulsionar negócios.",
            },
          ].map(({ icon: Icon, t, s, d }) => (
            <div key={t} className="flex items-start gap-4">
              <span className="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--life)]/10 ring-1 ring-[color:var(--life)]/20">
                <Icon className="h-5 w-5 text-[color:var(--life)]" />
              </span>
              <div>
                <div className="text-sm font-semibold leading-tight text-[color:var(--safe)]">
                  {t}
                  <br />
                  <span className="text-[color:var(--safe)]">{s}</span>
                </div>
                <p className="mt-1.5 text-xs leading-relaxed text-muted-foreground">{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Mint CTA strip */}
      <div className="container-page pb-16">
        <Link
          to="/solucoes"
          className="group flex flex-col items-start justify-between gap-3 rounded-2xl bg-gradient-to-r from-[color:var(--life)] to-[color:var(--life-soft)] px-7 py-5 text-[color:var(--safe)] shadow-lg shadow-[color:var(--life)]/20 sm:flex-row sm:items-center"
        >
          <div className="flex items-center gap-3">
            <Sparkles className="h-5 w-5" />
            <p className="font-display text-lg font-semibold tracking-tight sm:text-xl">
              Nós conectamos o cuidado às melhores escolhas.
            </p>
          </div>
          <div className="inline-flex items-center gap-2 text-sm font-semibold">
            Prepare sua empresa para o futuro do trabalho.
            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
          </div>
        </Link>
      </div>
    </section>
  );
}

/* ---------- ORBIT VISUAL ---------- */
function OrbitVisual() {
  return (
    <div className="relative aspect-square w-full">
      {/* soft backdrop */}
      <div className="absolute inset-6 rounded-full bg-gradient-to-br from-[color:var(--life)]/10 via-transparent to-[color:var(--life-soft)]/10" />

      {/* static orbit rings */}
      <svg
        viewBox="0 0 400 400"
        className="absolute inset-0 h-full w-full"
        aria-hidden
      >
        <defs>
          <linearGradient id="orbit" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--life)" stopOpacity="0.55" />
            <stop offset="100%" stopColor="var(--life-soft)" stopOpacity="0.15" />
          </linearGradient>
        </defs>
        <circle cx="200" cy="200" r="188" fill="none" stroke="url(#orbit)" strokeWidth="1" strokeDasharray="2 5" />
        <circle cx="200" cy="200" r="168" fill="none" stroke="url(#orbit)" strokeWidth="1" />
        <circle cx="200" cy="200" r="148" fill="none" stroke="url(#orbit)" strokeWidth="0.6" strokeDasharray="1 4" />
      </svg>

      {/* rotating outer ring with glowing nodes */}
      <div className="absolute inset-[2%] animate-spin-slow">
        <svg viewBox="0 0 400 400" className="h-full w-full" aria-hidden>
          <defs>
            <linearGradient id="spinRing" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="var(--life)" stopOpacity="0.45" />
              <stop offset="50%" stopColor="var(--life-soft)" stopOpacity="0.25" />
              <stop offset="100%" stopColor="var(--mind-b)" stopOpacity="0.45" />
            </linearGradient>
          </defs>
          <circle
            cx="200"
            cy="200"
            r="196"
            fill="none"
            stroke="url(#spinRing)"
            strokeWidth="1.5"
            strokeDasharray="8 16"
            strokeLinecap="round"
          />
        </svg>

        {/* orbiting nodes */}
        <OrbitalNode className="top-0 left-1/2 -translate-x-1/2" icon={<Heart className="h-3.5 w-3.5" />} />
        <OrbitalNode className="bottom-0 left-1/2 -translate-x-1/2" icon={<Brain className="h-3.5 w-3.5" />} />
        <OrbitalNode className="left-0 top-1/2 -translate-y-1/2" icon={<ShieldCheck className="h-3.5 w-3.5" />} />
        <OrbitalNode className="right-0 top-1/2 -translate-y-1/2" icon={<Sparkles className="h-3.5 w-3.5" />} />
        <OrbitalNode className="left-[14%] top-[14%]" icon={<Users className="h-3 w-3" />} />
        <OrbitalNode className="right-[14%] bottom-[14%]" icon={<TrendingUp className="h-3 w-3" />} />
      </div>

      {/* circular photo */}
      <div className="absolute inset-[14%] overflow-hidden rounded-full ring-1 ring-[color:var(--life)]/20 shadow-[0_30px_80px_-20px_rgba(15,40,60,0.25)]">
        <img
          src={heroMeeting}
          alt="Equipe diversa em reunião sorrindo"
          className="h-full w-full object-cover"
          width={1024}
          height={1024}
        />
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-[color:var(--life)]/10 via-transparent to-transparent" />
      </div>

      {/* floating badges — hidden on smallest to avoid overlap */}
      <FloatBadge
        className="left-[6%] top-[18%] hidden sm:flex"
        icon={<Brain className="h-4 w-4" />}
        label="Mentes"
        sub="mais saudáveis"
      />
      <FloatBadge
        className="right-[4%] top-[6%] hidden sm:flex"
        icon={<Users className="h-4 w-4" />}
        label="Pessoas"
        sub="valorizadas"
      />
      <FloatBadge
        className="right-[2%] bottom-[26%] hidden md:flex"
        icon={<BarChart3 className="h-4 w-4" />}
        label="Empresas"
        sub="mais fortes"
      />

      {/* ROI card */}
      <div className="absolute bottom-[4%] left-[4%] max-w-[150px] rounded-2xl bg-[color:var(--safe)] p-3.5 text-background shadow-2xl shadow-[color:var(--safe)]/30 sm:bottom-[6%] sm:left-[8%] sm:max-w-[200px] sm:p-5">
        <p className="font-display text-2xl font-medium leading-none text-[color:var(--life-glow)] sm:text-4xl">
          4:1
        </p>
        <p className="mt-1.5 text-[9px] font-bold uppercase tracking-[0.2em] text-background/80 sm:mt-2 sm:text-[10px]">
          ROI em saúde<br />mental (OMS)
        </p>
        <p className="mt-2 hidden text-[11px] leading-snug text-background/70 sm:block">
          Cada R$1 investido retorna R$4 em produtividade e redução de custos.
        </p>
      </div>
    </div>
  );
}

function OrbitalNode({
  className = "",
  icon,
}: {
  className?: string;
  icon: React.ReactNode;
}) {
  return (
    <div
      className={`absolute grid h-8 w-8 place-items-center rounded-full border border-[color:var(--life)]/40 bg-background/90 shadow-lg shadow-[color:var(--life)]/15 backdrop-blur ${className}`}
    >
      <span className="text-[color:var(--life)]">{icon}</span>
    </div>
  );
}


function FloatBadge({
  className = "",
  icon,
  label,
  sub,
}: {
  className?: string;
  icon: React.ReactNode;
  label: string;
  sub: string;
}) {
  return (
    <div
      className={`absolute flex items-center gap-2.5 rounded-full border border-[color:var(--life)]/25 bg-background/95 px-3.5 py-2 shadow-lg shadow-[color:var(--safe)]/10 backdrop-blur ${className}`}
    >
      <span className="grid h-8 w-8 place-items-center rounded-full bg-[color:var(--life)]/15 text-[color:var(--life)]">
        {icon}
      </span>
      <div className="pr-1 text-[11px] leading-tight">
        <div className="font-bold text-[color:var(--safe)]">{label}</div>
        <div className="text-[10px] text-muted-foreground">{sub}</div>
      </div>
    </div>
  );
}


/* ---------- DUAS CAMADAS ---------- */
function TwoLayers() {
  return (
    <section className="relative overflow-hidden bg-background">
      <div className="pointer-events-none absolute top-24 right-0 h-72 w-72 rounded-full bg-[color:var(--safe-gold)]/15 blur-3xl" />
      <div className="pointer-events-none absolute bottom-0 left-0 h-72 w-72 rounded-full bg-[color:var(--mind-b)]/20 blur-3xl" />

      <div className="container-page relative py-16 sm:py-24 lg:py-32">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="font-display text-[1.75rem] font-medium leading-[1.15] tracking-tight sm:text-4xl lg:text-5xl">
            O futuro das empresas começa pela saúde emocional das pessoas.
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-[15px] leading-relaxed text-muted-foreground sm:text-lg">
            Transformamos a gestão dos riscos psicossociais em produtividade, engajamento e crescimento sustentável, reduzindo afastamentos, fortalecendo lideranças e preparando sua empresa para o futuro do trabalho.
          </p>
          <ul className="mx-auto mt-6 flex max-w-2xl flex-wrap items-center justify-center gap-x-2 gap-y-2 rounded-2xl border border-[color:var(--life)]/30 bg-surface px-4 py-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--life)] shadow-sm sm:mt-7 sm:gap-x-4 sm:gap-y-1 sm:px-5 sm:text-[11px] sm:tracking-[0.18em]">
            <li className="flex items-center gap-1.5"><Sparkles className="h-3 w-3 sm:h-3.5 sm:w-3.5" /> Alinhado à NR-1</li>
            <li aria-hidden className="hidden text-[color:var(--life)]/40 sm:inline">•</li>
            <li>Baseado na ISO 45003</li>
            <li aria-hidden className="hidden text-[color:var(--life)]/40 sm:inline">•</li>
            <li>Inteligência Artificial</li>
            <li aria-hidden className="hidden text-[color:var(--life)]/40 sm:inline">•</li>
            <li>Desenv. Humano Baseado em Evidências</li>
          </ul>
        </div>

        <div className="mt-10 grid gap-6 sm:mt-14 lg:grid-cols-2">
          <LayerCard
            to="/solucoes/safe-company"
            number="01"
            eyebrow="Camada corporativa · Governança"
            title="Safe Company"
            description="Plataforma digital alinhada à NR-1, ISO 45003 e diretrizes da OMS. Identifica, monitora e documenta riscos psicossociais com protocolos cientificamente comprovados. Relatórios prontos para auditoria."
            accent="safe"
            icon={<ShieldCheck className="h-6 w-6" />}
            highlights={[
              "Diagnóstico com base nas principais dimensões da NR-1/NR17",
              "Planos de ação e Relatórios PGR em poucos cliques",
              "Protocolos cientificamente comprovados",
              "Assistente de IA especialista em NR-1 / NR-17 - 24h",
            ]}
          />
          <LayerCard
            to="/solucoes/mind-family"
            number="02"
            eyebrow="Camada humana · Acolhimento"
            title="Mind Family"
            description="App diário de bem-estar emocional com práticas de 5 a 10 minutos baseadas em neurociência aplicada, psicologia positiva e autoconhecimento."
            accent="mind"
            icon={<Brain className="h-6 w-6" />}
            highlights={[
              "+100 trilhas guiadas e jornadas progressivas",
              "Reprogramação mental e consciência emocional",
              "Planos de ação e exercícios práticos para mudanças reais",
              "Gamificação que engaja com desafios diários",
            ]}
          />
        </div>

        <div className="mt-10 rounded-2xl border border-dashed border-[color:var(--life)]/40 bg-[color:var(--life)]/5 px-6 py-5 text-center sm:mt-12">
          <p className="text-sm text-foreground sm:text-base">
            <span className="font-semibold">Safe Company</span> identifica os riscos.{" "}
            <span className="font-semibold">Mind Family</span> fortalece as pessoas.{" "}
            <span className="italic">Juntos, transformam prevenção em resultado.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

function LayerCard({
  to,
  number,
  eyebrow,
  title,
  description,
  accent,
  icon,
  highlights,
}: {
  to: string;
  number: string;
  eyebrow: string;
  title: string;
  description: string;
  accent: "safe" | "mind";
  icon: React.ReactNode;
  highlights: string[];
}) {
  const accentBg = accent === "safe" ? "bg-gradient-safe" : "bg-gradient-mind";
  const accentText = accent === "safe" ? "text-gradient-safe" : "text-gradient-mind";

  return (
    <Link
      to={to}
      className="group relative flex flex-col overflow-hidden rounded-3xl glass-card p-6 sm:p-8 transition-all duration-500 hover:-translate-y-1 hover:border-[color:var(--life)]/40"
    >
      <div
        className={`pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-700 group-hover:opacity-100 ${accentBg}`}
        aria-hidden
      />
      <div className="relative flex flex-1 flex-col">
        <div className="flex items-center justify-between">
          <span className="grid h-12 w-12 place-items-center rounded-2xl border border-border bg-[color:var(--surface-2)] text-foreground">
            {icon}
          </span>
          <span className="font-display text-5xl font-medium text-[color:var(--safe)]/15">
            {number}
          </span>
        </div>

        <span className="mt-7 text-[11px] font-medium uppercase tracking-[0.22em] text-muted-foreground sm:mt-8">
          {eyebrow}
        </span>
        <h3 className={`mt-2 font-display text-3xl font-medium tracking-tight sm:text-4xl ${accentText}`}>
          {title}
        </h3>
        <p className="mt-4 text-sm leading-relaxed text-muted-foreground sm:text-[15px]">{description}</p>

        <ul className="mt-6 grid gap-2.5 sm:grid-cols-2">
          {highlights.map((h) => (
            <li key={h} className="flex items-start gap-2 text-sm text-foreground/85">
              <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[color:var(--life)]" />
              {h}
            </li>
          ))}
        </ul>

        <div className="mt-8 inline-flex items-center gap-1 text-sm font-medium text-foreground">
          Conhecer {title}
          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
        </div>
      </div>
    </Link>
  );
}

/* ---------- CICLO ---------- */
function Cycle() {
  const safe = ["Identifica", "Analisa", "Documenta", "Capacita"];
  const mind = ["Acolhe", "Fortalece", "Conecta", "Evolui"];
  return (
    <section className="relative overflow-hidden bg-[color:var(--surface)]">
      <div className="container-page py-16 sm:py-24 lg:py-32">
        <div className="mx-auto max-w-2xl text-center">
          <span className="text-[11px] font-medium uppercase tracking-[0.22em] text-[color:var(--life)]">
            Como o ecossistema trabalha em ciclo
          </span>
          <h2 className="mt-4 font-display text-[1.75rem] font-medium leading-[1.15] tracking-tight sm:text-4xl lg:text-5xl">
            Da identificação do risco à{" "}
            <span className="italic text-gradient-life">evolução emocional contínua</span>.
          </h2>
        </div>

        <div className="mt-10 grid gap-6 sm:mt-14 lg:grid-cols-2">
          <div className="rounded-3xl bg-gradient-safe p-6 sm:p-8">
            <div className="flex items-center gap-3">
              <ShieldCheck className="h-5 w-5 text-[color:var(--safe)]" />
              <span className="text-[11px] font-bold uppercase tracking-[0.22em] text-[color:var(--safe)]">
                Safe Company · Governança
              </span>
            </div>
            <ol className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
              {safe.map((s, i) => (
                <li key={s} className="flex flex-col items-center justify-center rounded-2xl border border-white/60 bg-white/70 p-4 text-center backdrop-blur sm:p-5">
                  <div className="font-display text-2xl font-semibold text-[color:var(--safe)] tabular-nums">
                    0{i + 1}
                  </div>
                  <div className="mt-1.5 text-xs font-semibold uppercase tracking-wide text-[color:var(--safe)] sm:text-sm">
                    {s}
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="rounded-3xl bg-gradient-mind p-6 sm:p-8">
            <div className="flex items-center gap-3">
              <Brain className="h-5 w-5 text-[color:var(--safe)]" />
              <span className="text-[11px] font-bold uppercase tracking-[0.22em] text-[color:var(--safe)]">
                Mind Family · Acolhimento
              </span>
            </div>
            <ol className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
              {mind.map((s, i) => (
                <li key={s} className="flex flex-col items-center justify-center rounded-2xl border border-white/60 bg-white/70 p-4 text-center backdrop-blur sm:p-5">
                  <div className="font-display text-2xl font-semibold text-[color:var(--safe)] tabular-nums">
                    0{i + 5}
                  </div>
                  <div className="mt-1.5 text-xs font-semibold uppercase tracking-wide text-[color:var(--safe)] sm:text-sm">
                    {s}
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>

        <p className="mt-8 text-center text-xs uppercase tracking-[0.22em] text-muted-foreground">
          Ciclo de feedback contínuo · os dados da Camada 2 alimentam a Camada 1
        </p>

        <div className="mt-10 grid gap-4 rounded-3xl border border-[color:var(--life)]/30 bg-[color:var(--life)]/5 p-6 sm:mt-12 sm:p-8 sm:grid-cols-3">
          {[
            { icon: FileCheck2, t: "IDENTIFICAR" },
            { icon: Activity, t: "DESENVOLVER" },
            { icon: Sparkles, t: "EVOLUIR" },
          ].map(({ icon: Icon, t }) => (
            <div key={t} className="flex items-center justify-center gap-3 rounded-2xl border border-[color:var(--life)]/10 bg-background/60 px-4 py-4 sm:flex-col sm:py-5">
              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-[color:var(--life)]/10 text-[color:var(--life)] sm:h-11 sm:w-11">
                <Icon className="h-5 w-5 sm:h-5.5 sm:w-5.5" />
              </span>
              <div className="text-sm font-semibold uppercase tracking-wide text-foreground sm:text-base">
                {t}
              </div>
            </div>
          ))}
        </div>

        <p className="mx-auto mt-10 max-w-3xl rounded-xl border border-[color:var(--life)]/20 bg-[color:var(--life)]/5 px-6 py-5 text-center text-base font-semibold leading-relaxed text-foreground sm:text-lg sm:px-8 sm:py-6">
          Um ecossistema integrado para fortalecer pessoas, reduzir riscos psicossociais e apoiar a evolução contínua das organizações.
        </p>
      </div>
    </section>
  );
}



/* ---------- FINAL CTA ---------- */
function FinalCTA() {
  return (
    <section className="container-page py-16 sm:py-24 lg:py-32">
      <div className="relative overflow-hidden rounded-3xl glass-card p-6 sm:p-10 md:p-14 lg:p-20">
        <RootLines className="opacity-50" />
        <div className="relative grid gap-8 lg:grid-cols-[1.4fr_1fr] lg:items-center lg:gap-10">
          <div>
            <span className="inline-flex items-center gap-2 rounded-full border border-[color:var(--life)]/30 bg-[color:var(--life)]/5 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-[color:var(--life)] sm:text-xs sm:tracking-[0.22em]">
              <HeartPulse className="h-3 w-3" /> Próximos passos
            </span>
            <h2 className="mt-5 font-display text-[1.75rem] font-medium leading-[1.15] tracking-tight sm:text-4xl lg:text-5xl">
              Proteger <span className="italic text-gradient-life">antes</span> que os riscos virem prejuízos.
            </h2>
            <p className="mt-5 max-w-lg text-[15px] leading-relaxed text-muted-foreground sm:text-base">
              Descubra como unir conformidade legal, saúde emocional e desenvolvimento humano em uma estratégia única para reduzir riscos, aumentar o engajamento e impulsionar resultados duradouros.
            </p>
          </div>

          <div className="flex flex-col gap-3">
            <Link
              to="/contato"
              className="group inline-flex items-center justify-between rounded-2xl bg-foreground px-6 py-5 text-sm font-medium text-background transition-all hover:shadow-[0_0_40px_-5px_var(--life)]"
            >
              <span>Falar com um especialista</span>
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
            <Link
              to="/solucoes"
              className="group inline-flex items-center justify-between rounded-2xl border border-border px-6 py-5 text-sm font-medium text-foreground transition-colors hover:border-[color:var(--life)]/60 hover:bg-[color:var(--life)]/5"
            >
              <span>Ver como funciona</span>
              <ArrowUpRight className="h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
