import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowRight,
  CheckCircle2,
  FileCheck2,
  GraduationCap,
  LineChart,
  ShieldCheck,
  Sparkles,
  Users,
} from "lucide-react";

import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";
import safeBg from "@/assets/safe-corporate-bg.jpg";

export const Route = createFileRoute("/solucoes/safe-company")({
  head: () => ({
    meta: [
      { title: "Safe Company | Software de Riscos Psicossociais NR-1 e PGR" },
      {
        name: "description",
        content:
          "Plataforma digital para diagnóstico e relatórios PGR de riscos psicossociais. Adeque sua empresa à NR-1 e ISO 45003 com IA e dados científicos. Saiba mais!",
      },
      {
        property: "og:title",
        content: "Safe Company | Software de Riscos Psicossociais NR-1 e PGR",
      },
      {
        property: "og:description",
        content:
          "Plataforma digital para diagnóstico e relatórios PGR de riscos psicossociais. Adeque sua empresa à NR-1 e ISO 45003 com IA e dados científicos. Saiba mais!",
      },
    ],
  }),
  component: SafeCompanyPage,
});

const dimensoes = [
  ["01", "Apoio da chefia", "Percepção sobre suporte, orientação e disponibilidade da liderança."],
  ["02", "Apoio dos colegas", "Colaboração, respeito e ajuda mútua entre membros da equipe."],
  ["03", "Clareza de papel", "Responsabilidades, atribuições e expectativas claramente definidas."],
  ["04", "Estilo de gestão", "Como a empresa conduz pessoas, decisões e participação."],
  ["05", "Relacionamento", "Qualidade dos vínculos, conflitos, assédio e discriminação."],
  ["06", "Mudanças organizacionais", "Como as mudanças são comunicadas, planejadas e implementadas."],
  ["07", "Demanda", "Quantidade de trabalho, ritmo e pressão por prazos."],
  ["08+", "Demais dimensões", "Demais fatores exigidos pela NR-1 — todos cobertos pela plataforma."],
];

function SafeCompanyPage() {
  return (
    <SiteShell>
      <PageHeader
        variant="safe"
        backgroundImage={{ src: safeBg, alt: "Equipe corporativa em ambiente de negócios com gráficos e indicadores ao fundo." }}
        eyebrow="Camada 01 · Governança & conformidade"
        title="Plataforma digital alinhada à"
        highlight="NR-1, ISO 45003 e OMS."
        description="Identifica, monitora e documenta riscos psicossociais com protocolos cientificamente comprovados. Relatórios prontos para auditoria — em poucos cliques."
      >

        <div className="flex flex-wrap gap-3">
          <Link to="/contato" className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background">
            Agendar uma demonstração
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link to="/acesso/empresa" className="inline-flex items-center gap-2 rounded-full border border-border px-6 py-3 text-sm font-medium">
            Acessar plataforma
          </Link>
        </div>
      </PageHeader>

      {/* 6 vantagens da plataforma — do PDF */}
      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="grid gap-6 lg:grid-cols-3">
          {[
            { icon: ShieldCheck, n: "01", t: "Prevenção ativa", d: "Neutralize riscos antes que virem processos." },
            { icon: FileCheck2, n: "02", t: "Protocolos científicos", d: "Diagnóstico baseado em ISO 45003 e diretrizes da OMS." },
            { icon: LineChart, n: "03", t: "Monitoramento contínuo", d: "Indicadores dinâmicos em tempo real, por setor e dimensão." },
            { icon: FileCheck2, n: "04", t: "Relatórios PGR", d: "Conformidade NR-1/NR17 em poucos cliques — pronto para auditoria." },
            { icon: Users, n: "05", t: "Escala 50 → 50 mil", d: "Pequenas e grandes operações, com a mesma profundidade." },
            { icon: GraduationCap, n: "06", t: "Capacitação de líderes", d: "Cultura preventiva instalada em todos os níveis." },
          ].map(({ icon: Icon, n, t, d }) => (
            <div key={t} 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>
                <span className="font-display text-3xl font-medium text-[color:var(--safe)]/20">{n}</span>
              </div>
              <h3 className="mt-5 font-display text-xl font-medium tracking-tight">{t}</h3>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Dashboard / o que sua empresa enxerga */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className="container-page py-16 sm:py-24 lg:py-32">
          <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:items-center lg:gap-16">
            <div>
              <span className="text-xs font-medium uppercase tracking-[0.22em] text-[color:var(--safe-gold)]">
                O que sua empresa enxerga
              </span>
              <h2 className="mt-4 font-display text-4xl font-medium tracking-tight sm:text-5xl">
                Riscos psicossociais <span className="text-gradient-safe italic">visíveis</span> — por setor, por dimensão, em tempo real.
              </h2>
              <p className="mt-5 text-muted-foreground">
                A plataforma traduz a realidade do seu time em um painel claro: distribuição
                de risco (muito baixo - baixo - moderado - alto - crítico), perfil por
                dimensão, alertas, comparativos, inventários, relatórios e muito mais...
              </p>
            </div>

            <div className="rounded-3xl border border-border bg-[color:var(--surface-2)] p-6 shadow-card">
              <div className="flex items-center justify-between text-[10px] uppercase tracking-[0.22em] text-muted-foreground">
                <span>Riscos psicossociais · Ciclo Q1</span>
                <span className="rounded-full bg-[color:var(--life)]/10 px-2 py-0.5 text-[color:var(--life)]">LGPD ✓</span>
              </div>
              <div className="mt-5 rounded-2xl border border-[color:var(--safe-gold)]/30 bg-[color:var(--safe-gold)]/10 p-3 text-xs text-[color:var(--safe)]">
                ⚠️ <span className="font-semibold">Alerta:</span> Setor Operacional · Risco Alto em Demanda (+18%)
              </div>

              <div className="mt-5 grid grid-cols-3 gap-2">
                {[
                  ["Baixo", "62%", "bg-[color:var(--life)]/20 text-[color:var(--safe)]"],
                  ["Moderado", "26%", "bg-[color:var(--safe-gold)]/20 text-[color:var(--safe)]"],
                  ["Alto", "12%", "bg-[color:var(--safe)] text-background"],
                ].map(([l, v, c]) => (
                  <div key={l} className={`rounded-xl p-3 text-center ${c}`}>
                    <div className="font-display text-2xl font-semibold">{v}</div>
                    <div className="text-[10px] uppercase tracking-wider">{l}</div>
                  </div>
                ))}
              </div>

              <div className="mt-5">
                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                  Perfil por dimensão · pontuação 1–5
                </div>
                <div className="mt-3 space-y-2">
                  {[
                    ["Demandas", 4.2],
                    ["Controle", 3.1],
                    ["Apoio", 2.5],
                    ["Relações", 2.2],
                    ["Liderança", 3.5],
                    ["Mudança", 3.9],
                  ].map(([l, v]) => (
                    <div key={l as string} className="flex items-center gap-3 text-xs">
                      <span className="w-20 text-foreground">{l}</span>
                      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[color:var(--safe)]/10">
                        <div
                          className="h-full rounded-full bg-gradient-to-r from-[color:var(--life)] to-[color:var(--safe-gold)]"
                          style={{ width: `${((v as number) / 5) * 100}%` }}
                        />
                      </div>
                      <span className="w-8 text-right font-mono text-foreground">{v}</span>
                    </div>
                  ))}
                </div>
                <div className="mt-3 text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
                  1.482 respondentes
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Dimensões NR-1 */}
      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="max-w-2xl">
          <span className="text-xs font-medium uppercase tracking-[0.22em] text-[color:var(--safe-gold)]">
            Os fatores que sua empresa precisa monitorar
          </span>
          <h2 className="mt-4 font-display text-4xl font-medium tracking-tight sm:text-5xl">
            Todas as dimensões exigidas pela <span className="italic text-gradient-safe">NR-1/NR17</span>.
          </h2>
          <p className="mt-5 text-muted-foreground">
            Identificação, avaliação e mitigação documentadas no PGR. Não basta dizer que cuida — é preciso comprovar.
          </p>
        </div>

        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {dimensoes.map(([n, t, d]) => (
            <div key={n} className="rounded-2xl border border-border bg-[color:var(--surface-2)] p-5">
              <div className="font-display text-2xl font-semibold text-[color:var(--safe-gold)]">{n}</div>
              <div className="mt-2 text-sm font-semibold text-foreground">{t}</div>
              <div className="mt-1 text-xs leading-relaxed text-muted-foreground">{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Implantação 30 dias */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className="container-page py-16 sm:py-24 lg:py-32">
          <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:items-center lg:gap-20">
            <div>
              <span className="text-xs font-medium uppercase tracking-[0.22em] text-[color:var(--safe-gold)]">
                Operacional em 30 dias
              </span>
              <h2 className="mt-4 font-display text-4xl font-medium tracking-tight sm:text-5xl">
                Da assinatura ao primeiro <span className="text-gradient-safe italic">relatório PGR auditável</span>.
              </h2>
              <p className="mt-5 text-muted-foreground">
                Implantação em três fases, com gestor dedicado e suporte estratégico contínuo.
              </p>
            </div>
            <ol className="space-y-5">
              {[
                ["Fase 01 · semanas 1-2", "Diagnóstico", "Mapeamento de riscos por setor, configuração da plataforma, KPIs psicossociais e onboarding de SESMT/RH."],
                ["Fase 02 · semanas 3-4", "Lançamento", "Aplicação dos protocolos, primeira coleta de dados, planos de ação e capacitação das lideranças."],
                ["Fase 03 · contínuo", "Monitoramento", "Acompanhamento de indicadores, relatórios PGR periódicos e suporte estratégico dedicado."],
              ].map(([n, t, d]) => (
                <li key={t} className="flex gap-5 rounded-2xl border border-border bg-[color:var(--surface-2)] p-5">
                  <div className="flex-1">
                    <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[color:var(--safe-gold)]">
                      {n}
                    </div>
                    <div className="mt-1 font-display text-xl font-medium tracking-tight">{t}</div>
                    <div className="mt-1 text-sm text-muted-foreground">{d}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>

          <div className="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {[
              "Assistente IA especialista em NR-1/NR17 - 24h",
              "Plataforma alinhada à MTE, ISO 45003 e OMS",
              "App Mind Family para todos os colaboradores",
              "Garantia de conformidade auditável",
            ].map((b) => (
              <div key={b} className="flex items-center gap-2 rounded-2xl border border-[color:var(--life)]/30 bg-[color:var(--life)]/5 p-4 text-sm text-foreground">
                <Sparkles className="h-4 w-4 shrink-0 text-[color:var(--life)]" />
                {b}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="rounded-3xl bg-gradient-safe p-10 sm:p-14">
          <div className="grid gap-8 lg:grid-cols-2 lg:items-center">
            <div>
              <h2 className="font-display text-3xl font-medium tracking-tight sm:text-4xl">
                Conformidade NR-1/NR17{"\u00a0"}<span className="italic">sem caos</span>.
              </h2>
              <p className="mt-4 text-muted-foreground">
                Resposta em até 1 dia útil.
              </p>
            </div>
            <div className="flex flex-col gap-3 lg:items-end">
              <Link to="/contato" className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background">
                Quero uma demostração <ArrowRight className="h-4 w-4" />
              </Link>
              <ul className="flex flex-wrap gap-4 text-xs text-muted-foreground">
                {["Sem compromisso", "Resposta rápida", "On-line"].map((b) => (
                  <li key={b} className="inline-flex items-center gap-1.5">
                    <CheckCircle2 className="h-3.5 w-3.5 text-[color:var(--safe-gold)]" /> {b}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}
