import { createFileRoute } from "@tanstack/react-router";
import {
  AlertTriangle,
  Brain,
  CalendarDays,
  DollarSign,
  Frown,
  TrendingDown,
  TrendingUp,
  Users,
} from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";

export const Route = createFileRoute("/impacto")({
  head: () => ({
    meta: [
      { title: "Impacto — A crise invisível da saúde mental no trabalho" },
      {
        name: "description",
        content:
          "Brasil bate recorde histórico de afastamentos por transtornos mentais. Veja os dados oficiais do INSS 2025 e o custo real para as empresas.",
      },
      { property: "og:title", content: "Impacto — Instituto Vida Segura" },
      {
        property: "og:description",
        content:
          "Dados oficiais INSS 2025, custo do presenteísmo e o retorno comprovado de investir em saúde mental corporativa.",
      },
    ],
  }),
  component: ImpactoPage,
});

// Tokens de espaçamento e tipografia unificados (mobile ↔ web)
const SECTION_PY = "py-20 sm:py-24 lg:py-28";
const EYEBROW = "text-xs font-medium uppercase tracking-[0.2em]";
const H2 = "mt-4 font-display text-4xl font-medium leading-[1.05] tracking-tight sm:text-5xl";
const LEAD = "mt-5 text-base text-muted-foreground sm:text-lg";
const GRID = "mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3";
const BIG_NUM = "font-display text-4xl font-medium tracking-tight sm:text-5xl";
const CARD_LABEL = "mt-4 text-base font-medium text-foreground";
const CARD_SUB = "mt-2 text-sm leading-relaxed text-muted-foreground";
const FOOTNOTE = "text-xs uppercase tracking-[0.2em] text-muted-foreground";

// INSS 2025 — A crise invisível
const inss2025 = [
  {
    icon: TrendingUp,
    v: "+15,66%",
    l: "Aumento vs. 2024",
    sub: "Crescimento acelerado dos afastamentos por transtornos mentais.",
  },
  {
    icon: DollarSign,
    v: "R$ 3,5 Bi",
    l: "Custo ao INSS em 2025",
    sub: "Impacto direto no sistema previdenciário brasileiro.",
  },
  {
    icon: CalendarDays,
    v: "96 dias",
    l: "Tempo médio de afastamento",
    sub: "Cada colaborador afastado permanece, em média, mais de três meses fora.",
  },
  {
    icon: Users,
    v: "63%",
    l: "Mulheres · 346.613 casos",
    sub: "Recorte de gênero evidencia a urgência de políticas específicas.",
  },
  {
    icon: Brain,
    v: "30%",
    l: "Ansiedade",
    sub: "Principal diagnóstico entre os afastamentos concedidos.",
  },
  {
    icon: Frown,
    v: "Recorrente",
    l: "Depressão",
    sub: "Episódios que se repetem e prolongam o tempo fora do trabalho.",
  },
];

// Impacto financeiro — saúde mental em números de negócio
const negocios = [
  ["R$ 3,5 Bi/ano", "Afastamentos", "Custo direto ao INSS (2025)."],
  ["R$ 200 Bi/ano", "Presenteísmo", "Funcionário presente, mas improdutivo."],
  ["50–200%", "Turnover", "Do salário anual por substituição de talento."],
  ["−30%", "Produtividade", "Queda média observada em 6 meses."],
  ["US$ 1 Tri", "Perdas globais/ano", "Estimativa OMS · depressão e ansiedade."],
  ["12 Bi", "Dias de trabalho perdidos/ano", "Globalmente por depressão e ansiedade."],
];

// Seção final — "Resultados e decisão" (mantida)
const ganhos = [
  ["4:1", "ROI · OMS (2022)", "Cada US$ 1 investido em saúde mental no trabalho retorna US$ 4 em produtividade."],
  ["3,68:1", "Bem-estar emocional · HBR", "Em programas estruturados, cada R$ 1 retorna R$ 3,68 em redução de afastamentos, turnover e custos médicos."],
  ["−40%", "Afastamentos", "Redução média documentada após implantação do ecossistema."],
  ["−35%", "Turnover", "Equipes mais estáveis e engajadas."],
  ["+25%", "Engajamento", "Diálogo aberto e pertencimento."],
  ["77%", "Empresas com ROI > 100% (Wellhub)", "Programas de bem-estar como investimento estratégico."],
  ["81%", "Menos absenteísmo (Gallup)", "Em empresas que medem bem-estar."],
];

const antesDepois = [
  ["Afastamentos frequentes", "Colaboradores acolhidos · −40% afastamentos"],
  ["Custo médico crescente sem visibilidade", "Prevenção ativa e mensurável"],
  ["Alta rotatividade", "Equipe estável e engajada · −35% turnover"],
  ["Clima negativo, conflitos não resolvidos", "Cultura saudável · +25% engajamento"],
  ["Queda de produtividade · presenteísmo invisível", "Pessoas presentes — corpo e mente"],
  ["Risco jurídico · passivos e multas", "NR-1 documentada · auditoria pronta"],
];

function ImpactoPage() {
  return (
    <SiteShell>
      <PageHeader
        eyebrow="Dados oficiais INSS · 2025"
        title="A crise"
        highlight="invisível."
        description="O Brasil registrou o maior número da história de afastamentos por transtornos mentais. Por trás dos números, uma epidemia silenciosa que já afeta pessoas, famílias e empresas em todo o país."
      />

      {/* INSS 2025 — grid principal */}
      <section className={`container-page ${SECTION_PY}`}>
        <div className="max-w-2xl">
          <span className={`${EYEBROW} text-[color:var(--safe-gold)]`}>
            Recorde histórico
          </span>
          <h2 className={H2}>
            O que os dados de <span className="italic text-gradient-safe">2025</span> revelam.
          </h2>
          <p className={LEAD}>
            Ansiedade e depressão lideram as concessões de benefícios previdenciários — e o custo humano e financeiro cresce a cada ano.
          </p>
        </div>

        <div className={GRID}>
          {inss2025.map(({ icon: Icon, v, l, sub }) => (
            <div key={l} className="glass-card rounded-3xl p-7">
              <div className="flex items-center justify-between">
                <span className="grid h-11 w-11 place-items-center rounded-xl bg-gradient-safe text-[color:var(--safe)]">
                  <Icon className="h-5 w-5" />
                </span>
                <AlertTriangle className="h-4 w-4 text-[color:var(--safe-gold)]" />
              </div>
              <div className={`mt-5 ${BIG_NUM} text-gradient-safe`}>{v}</div>
              <div className={CARD_LABEL.replace("mt-4", "mt-3")}>{l}</div>
              <div className={CARD_SUB}>{sub}</div>
            </div>
          ))}
        </div>

        <p className={`mt-8 ${FOOTNOTE}`}>
          Fonte: INSS · Boletim Estatístico da Previdência Social 2025
        </p>
      </section>

      {/* Impacto financeiro — saúde mental em números de negócio */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className={`container-page ${SECTION_PY}`}>
          <div className="max-w-2xl">
            <span className={`${EYEBROW} text-[color:var(--safe-gold)]`}>
              O impacto financeiro
            </span>
            <h2 className={H2}>
              Saúde mental em <span className="italic text-gradient-safe">números de negócio</span>.
            </h2>
            <p className={LEAD}>
              O custo do afastamento é apenas a ponta do iceberg. Presenteísmo, turnover e queda de produtividade compõem uma conta silenciosa que corrói o resultado das empresas.
            </p>
          </div>

          <div className={GRID}>
            {negocios.map(([v, l, sub]) => (
              <div
                key={l}
                className="rounded-3xl border border-border bg-[color:var(--surface-2)] p-7"
              >
                <div className={`${BIG_NUM} text-foreground`}>{v}</div>
                <div className={CARD_LABEL}>{l}</div>
                <div className={CARD_SUB}>{sub}</div>
              </div>
            ))}
          </div>

          <div className={`mt-10 flex flex-wrap items-center gap-4 ${FOOTNOTE}`}>
            <span className="inline-flex items-center gap-2">
              <TrendingDown className="h-3.5 w-3.5 text-[color:var(--safe-gold)]" />
              Fontes: INSS · OMS · Harvard Business Review · Deloitte
            </span>
          </div>
        </div>
      </section>

      {/* Citação OMS */}
      <section className={`container-page ${SECTION_PY}`}>
        <blockquote className="mx-auto max-w-3xl rounded-3xl bg-[color:var(--safe)] p-8 text-background sm:p-10 lg:p-14">
          <p className="font-display text-2xl font-medium leading-snug tracking-tight sm:text-3xl lg:text-4xl">
            Investir em saúde mental significa investir em{" "}
            <span className="italic text-[color:var(--life-glow)]">pessoas</span>,{" "}
            <span className="italic text-[color:var(--life-glow)]">comunidades</span> e{" "}
            <span className="italic text-[color:var(--life-glow)]">economias</span> — investimento que{" "}
            <span className="italic text-[color:var(--safe-gold)]">nenhum país pode se dar ao luxo de negligenciar</span>.
          </p>
          <footer className="mt-6 text-xs uppercase tracking-[0.2em] text-background/60">
            — Organização Mundial da Saúde (OMS)
          </footer>
        </blockquote>
      </section>

      {/* Resultados e decisão (mantido) */}
      <section className="border-t border-border/60 bg-[color:var(--surface)]">
        <div className={`container-page ${SECTION_PY}`}>
          <div className="max-w-2xl">
            <span className={`${EYEBROW} text-[color:var(--life)]`}>
              Resultados e decisão
            </span>
            <h2 className={H2}>
              O retorno é <span className="italic text-gradient-life">dado público.</span>
            </h2>
            <p className={LEAD}>
              OMS, Deloitte e Harvard convergem: cuidar de saúde mental no trabalho retorna múltiplas vezes — em produtividade, retenção e redução de passivos.
            </p>
          </div>

          <div className={GRID}>
            {ganhos.map(([n, l, sub]) => (
              <div key={l} className="glass-card rounded-3xl p-7">
                <div className={`${BIG_NUM} text-gradient-life`}>{n}</div>
                <div className={CARD_LABEL}>{l}</div>
                <div className={CARD_SUB}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className={`container-page ${SECTION_PY}`}>
          <div className="max-w-2xl">
            <span className={`${EYEBROW} text-[color:var(--life)]`}>
              Antes × depois
            </span>
            <h2 className={H2}>
              A diferença entre <span className="italic text-gradient-life">não fazer</span> e <span className="italic text-gradient-safe">agir</span>.
            </h2>
          </div>

          <div className="mt-12 overflow-hidden rounded-3xl border border-border bg-[color:var(--surface-2)]">
            <div className="grid grid-cols-2 border-b border-border bg-[color:var(--safe)] text-background">
              <div className="px-6 py-4 text-[10px] font-semibold uppercase tracking-[0.2em] opacity-70">
                Antes · empresas que adiam
              </div>
              <div className="px-6 py-4 text-[10px] font-semibold uppercase tracking-[0.2em] text-[color:var(--life-glow)]">
                Depois · empresas que agem
              </div>
            </div>
            {antesDepois.map(([a, d], i) => (
              <div
                key={a}
                className={`grid grid-cols-2 border-t border-border ${i % 2 === 0 ? "bg-[color:var(--surface)]" : ""}`}
              >
                <div className="px-6 py-5 text-sm text-muted-foreground">{a}</div>
                <div className="px-6 py-5 text-sm font-medium text-foreground">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className={`container-page ${SECTION_PY}`}>
        <blockquote className="mx-auto max-w-3xl rounded-3xl bg-[color:var(--safe)] p-8 text-background sm:p-10 lg:p-14">
          <p className="font-display text-2xl font-medium leading-snug tracking-tight sm:text-3xl lg:text-4xl">
            O maior custo dos riscos psicossociais não está no que a empresa{" "}
            <span className="italic text-[color:var(--safe-gold)]">vê</span>. Está no que
            ela <span className="italic text-[color:var(--life-glow)]">perde</span> todos
            os dias sem perceber.
          </p>
          <footer className="mt-6 text-xs uppercase tracking-[0.2em] text-background/60">
            Fontes: OMS · Harvard Business Review · INSS · SHRM
          </footer>
        </blockquote>
      </section>
    </SiteShell>
  );
}