import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Brain, Mic2, ShieldCheck } from "lucide-react";

import mindAppImage from "@/assets/mind-family-app.png.asset.json";
import palestrasBg from "@/assets/palestras-corporate-bg.jpg.asset.json";
import safeBg from "@/assets/safe-corporate-bg.jpg";
import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";


export const Route = createFileRoute("/solucoes/")({
  head: () => ({
    meta: [
      { title: "Soluções — TECNOLOGIA • PESSOAS • CULTURA" },
      {
        name: "description",
        content:
          "Safe Company (governança NR-1 / ISO 45003) + Mind Family (app diário de bem-estar para o colaborador e sua família).",
      },
      { property: "og:title", content: "Soluções — Instituto Vida Segura" },
      {
        property: "og:description",
        content: "Transformamos conhecimento em cuidado, comportamento em cultura e pessoas em protagonistas de ambientes mais seguros, saudáveis e humanos.",
      },
    ],
  }),
  component: SolucoesPage,
});

const solucoes = [
  {
    to: "/solucoes/safe-company",
    eyebrow: "Camada 01 · Governança & conformidade",
    name: "Safe Company",
    accent: "safe" as const,
    logo: null,
    cover: safeBg as unknown as string,
    icon: ShieldCheck,
    description:
      "Plataforma digital alinhada à NR-1, ISO 45003 e OMS. Identifica, monitora e documenta riscos psicossociais com protocolos científicos — relatórios prontos para auditoria.",
    bullets: [
      "Diagnóstico das principais dimensões sugeridas pelo MTE na NR-1 / NR-17",
      "Relatórios PGR em poucos cliques",
      "Monitoramento Contínuo",
      "Assistente IA especialista em NR-1 / NR-17 24h",
    ],
  },
  {
    to: "/solucoes/mind-family",
    eyebrow: "Camada 02 · Acolhimento & bem-estar",
    name: "Mind Family",
    accent: "mind" as const,
    logo: null,
    cover: mindAppImage.url,
    icon: Brain,
    description:
      "Transforme pequenos minutos do dia em mais equilíbrio emocional, relacionamentos saudáveis e qualidade de vida para toda a família.\n\nBaseado em neurociência, psicologia positiva e terapias integrativas, o Mind Family oferece uma jornada completa de autoconhecimento e desenvolvimento humano.",
    bullets: [
      "+100 trilhas guidas 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 com desafios diários",
    ],
  },
  {
    to: "/solucoes/palestras",
    eyebrow: "Camada 03 · Conhecimento & cultura",
    name: "Palestras & Workshops",
    accent: "safe" as const,
    logo: null,
    cover: palestrasBg.url,
    icon: Mic2,
    description:
      "Mais do que palestras, promovemos experiências que despertam consciência, fortalecem equipes e impulsionam uma cultura de bem-estar, prevenção e alta performance.",
    bullets: [
      "Saúde mental e prevenção do burnout",
      "NR-1, riscos psicossociais e segurança psicológica",
      "Liderança humanizada e inteligência emocional",
      "Comunicação, engajamento e trabalho em equipe",
    ],
  },
];

function SolucoesPage() {
  return (
    <SiteShell>
      <PageHeader
        eyebrow="TECNOLOGIA • PESSOAS • CULTURA"
        title="Transformamos conhecimento em cuidado, comportamento em cultura"
        highlight="e pessoas em protagonistas de ambientes mais seguros, saudáveis e humanos."
        description="Uma solução integrada em três camadas que identifica riscos psicossociais, fortalece a saúde emocional dos colaboradores e desenvolve uma cultura organizacional mais segura, humana e sustentável."
      />

      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="space-y-10">
          {solucoes.map((s, i) => {
            const accentBg = s.accent === "safe" ? "bg-gradient-safe" : "bg-gradient-mind";
            const accentText = s.accent === "safe" ? "text-gradient-safe" : "text-gradient-mind";
            const reversed = i % 2 === 1;
            return (
              <Link
                key={s.to}
                to={s.to}
                className="group relative grid gap-8 overflow-hidden rounded-3xl glass-card p-8 transition-all hover:-translate-y-1 hover:border-[color:var(--life)]/40 lg:grid-cols-[1fr_1.4fr] lg:gap-12 lg:p-12"
              >
                <div
                  className={`relative grid min-h-[240px] place-items-center overflow-hidden rounded-2xl ${accentBg} ${
                    reversed ? "lg:order-2" : ""
                  }`}
                >
                  {s.accent === "safe" && !s.cover && (
                    <>
                      <img
                        src={safeBg}
                        alt=""
                        aria-hidden="true"
                        loading="lazy"
                        width={1536}
                        height={1024}
                        className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-25 mix-blend-luminosity"
                      />
                      <span className="pointer-events-none absolute inset-0 bg-gradient-to-br from-[color:var(--safe)]/80 via-[color:var(--safe)]/50 to-[color:var(--safe-gold)]/40" />
                      <span className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.14),transparent_70%)]" />
                    </>
                  )}
                  {s.cover ? (
                    <img
                      src={s.cover}
                      alt={s.name}
                      loading="lazy"
                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                  ) : (
                    <>
                      <span className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.18),transparent_60%)]" />
                      {s.logo ? (
                        <div className="relative z-10 flex items-center justify-center">
                          {s.accent === "safe" && (
                            <>
                              <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                                <div className="h-52 w-72 rounded-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.75)_0%,rgba(255,255,255,0.3)_45%,transparent_70%)] blur-3xl sm:h-60 sm:w-96" />
                              </div>
                              <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                                <div className="rounded-full bg-[color:var(--safe-gold)]/30 blur-2xl" style={{ width: '140%', height: '140%' }} />
                              </div>
                            </>
                          )}
                          <div className={`relative z-10 flex items-center justify-center ${s.accent === "safe" ? "rounded-[2rem] border border-white/30 bg-white/85 p-6 shadow-[0_20px_60px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:rounded-[2.5rem] sm:p-8" : ""}`}>
                            <img
                              src={s.logo}
                              alt={`Logo ${s.name}`}
                              className={`relative z-10 object-contain transition-transform duration-700 group-hover:scale-105 ${s.accent === "safe" ? "max-h-44 w-auto max-w-[90%] drop-shadow-[0_8px_24px_rgba(0,0,0,0.25)] sm:max-h-52" : "max-h-40 w-auto max-w-[70%] drop-shadow-[0_8px_24px_rgba(0,0,0,0.35)]"}`}
                            />
                          </div>
                        </div>
                      ) : (
                        <s.icon className="relative h-24 w-24 text-white drop-shadow-[0_8px_24px_rgba(0,0,0,0.35)] transition-transform duration-700 group-hover:scale-105" />
                      )}
                    </>
                  )}
                </div>


                <div className="flex flex-col justify-center">
                  <span className="text-[11px] font-medium uppercase tracking-[0.22em] text-muted-foreground">
                    {s.eyebrow}
                  </span>
                  <h2 className={`mt-2 font-display text-4xl font-medium tracking-tight sm:text-5xl ${accentText}`}>
                    {s.name}
                  </h2>
                  <div className="mt-4 max-w-xl text-muted-foreground whitespace-pre-line">
                    {s.description}
                  </div>
                  <ul className="mt-6 grid gap-2 sm:grid-cols-2">
                    {s.bullets.map((b) => (
                      <li key={b} className="flex items-start gap-2 text-sm text-foreground/85">
                        <span className="mt-2 h-1 w-1 shrink-0 rounded-full bg-[color:var(--life)]" />
                        {b}
                      </li>
                    ))}
                  </ul>
                  <span className="mt-8 inline-flex items-center gap-2 text-sm font-medium text-foreground">
                    Conhecer {s.name}
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </span>
                </div>
              </Link>
            );
          })}
        </div>

        <div className="mt-12 rounded-3xl bg-[color:var(--safe)] p-6 text-background sm:p-10 lg:p-14">
          <div className="grid gap-6 lg:grid-cols-[1.4fr_1fr] lg:items-center">
            <div>
              <h2 className="font-display text-3xl font-medium tracking-tight sm:text-4xl">
                Uma estratégia. <span className="italic text-[color:var(--life-glow)]">Três camadas.</span> Um único propósito.
              </h2>
              <p className="mt-4 text-sm text-background/75">
                No Instituto Vida Segura, acreditamos que empresas mais saudáveis são construídas quando tecnologia, pessoas e conhecimento trabalham juntos. Por isso, desenvolvemos um ecossistema integrado que identifica riscos psicossociais, fortalece a saúde emocional dos colaboradores e transforma a cultura organizacional em uma vantagem competitiva.
              </p>
            </div>
            <Link
              to="/contato"
              className="inline-flex items-center justify-between rounded-2xl bg-[color:var(--life)] px-6 py-4 text-sm font-bold text-[color:var(--safe)] transition-transform hover:scale-[1.02]"
            >
              Falar com um especialista
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}
