import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowRight,
  Briefcase,
  Calendar,
  Heart,
  Mic2,
  Sparkles,
  Users,
  Wrench,
} from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import palestrasBg from "@/assets/palestras-corporate-bg.jpg.asset.json";

export const Route = createFileRoute("/solucoes/palestras")({
  head: () => ({
    meta: [
      { title: "Palestras de Saúde Mental e Segurança Psicológica | IVS" },
      {
        name: "description",
        content:
          "Leve palestras e workshops sobre NR-1, neurociência e segurança psicológica para sua empresa. Engajamento, prevenção e mudança de comportamento. Saiba mais!",
      },
      {
        property: "og:title",
        content: "Palestras de Saúde Mental e Segurança Psicológica | IVS",
      },
      {
        property: "og:description",
        content:
          "Leve palestras e workshops sobre NR-1, neurociência e segurança psicológica para sua empresa. Engajamento, prevenção e mudança de comportamento. Saiba mais!",
      },
    ],
  }),
  component: PalestrasPage,
});

const temas = [
  {
    icon: Heart,
    titulo: "Saúde mental no trabalho",
    desc: "Burnout, ansiedade, cultura de segurança: cuidando de quem entrega resultado.",
  },
  {
    icon: Users,
    titulo: "Liderança humanizada",
    desc: "Formar líderes que conversam sobre emoção sem perder a régua de performance.",
  },
  {
    icon: Sparkles,
    titulo: "Propósito e pertencimento",
    desc: "Reconectar pessoas à missão da empresa e ao impacto do próprio trabalho.",
  },
  {
    icon: Briefcase,
    titulo: "Cultura de segurança",
    desc: "Da regra ao hábito: comportamento seguro como valor compartilhado.",
  },
  {
    icon: Wrench,
    titulo: "Workshops práticos",
    desc: "Sessões hands-on de comunicação não-violenta, gestão de estresse e hábitos.",
  },
  {
    icon: Mic2,
    titulo: "Eventos e convenções",
    desc: "Keynotes para SIPATs, kickoffs, convenções de vendas e encontros de liderança.",
  },
];

const formatos = [
  { label: "Palestra magna", tempo: "60–90 min", publico: "Auditórios e SIPATs" },
  { label: "Workshop imersivo", tempo: "3–8 horas", publico: "Times e lideranças" },
  { label: "Trilha contínua", tempo: "4–12 encontros", publico: "Programas anuais" },
  { label: "Live corporativa", tempo: "45–60 min", publico: "Online, multi-unidades" },
];

function PalestrasPage() {
  return (
    <SiteShell>
      {/* Hero — padrão do site: texto à esquerda, imagem à direita */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[color-mix(in_oklab,var(--safe)_80%,var(--life)_20%)] via-[color-mix(in_oklab,var(--safe)_45%,var(--life)_55%)] to-[color-mix(in_oklab,var(--life)_40%,black)]">
        <div className="absolute inset-0 bg-black/20" aria-hidden />
        <div className="container-page relative grid gap-10 py-14 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:gap-16 lg:py-20">
          <div className="min-w-0">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-1.5 text-xs font-medium uppercase tracking-[0.18em] text-white backdrop-blur">
              <Mic2 className="h-3 w-3" /> Camada 03 · Conhecimento & cultura
            </span>
            <h1 className="mt-6 font-display text-4xl font-medium leading-[1.08] tracking-tight text-white sm:text-5xl lg:text-[3.25rem]">
              Palestras e workshops que{" "}
              <span className="italic text-[color:var(--life-glow)]">transformam ambientes</span>.
            </h1>
            <p className="mt-6 max-w-xl text-white/90">
              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.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link
                to="/contato"
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--life)] px-6 py-3 text-sm font-semibold text-[color:var(--safe)] transition hover:brightness-105"
              >
                Solicitar proposta
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                to="/solucoes"
                className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/10 px-6 py-3 text-sm font-medium text-white backdrop-blur transition hover:bg-white/20"
              >
                Ver todas as soluções
              </Link>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -inset-6 rounded-[2rem] bg-white/10 blur-2xl" aria-hidden />
            <div className="relative overflow-hidden rounded-[2rem] border border-white/25 shadow-2xl">
              <img
                src={palestrasBg.url}
                alt="Palestrante em palco com plateia"
                width={1200}
                height={1408}
                className="h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Temas */}
      <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-muted-foreground">
            Temas
          </span>
          <h2 className="mt-3 font-display text-4xl font-medium tracking-tight sm:text-5xl">
            Conteúdos que falam a língua de{" "}
            <span className="italic text-gradient-life">quem está na operação.</span>
          </h2>
        </div>

        <div className="mt-12 grid gap-6 lg:grid-cols-3">
          {temas.map(({ icon: Icon, titulo, desc }) => (
            <div key={titulo} className="glass-card rounded-3xl p-7">
              <span className="grid h-11 w-11 place-items-center rounded-xl border border-[color:var(--life)]/30 bg-[color:var(--life)]/5 text-[color:var(--life)]">
                <Icon className="h-5 w-5" />
              </span>
              <h3 className="mt-5 font-display text-xl font-medium tracking-tight">{titulo}</h3>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Formatos */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className="container-page py-20">
          <div className="grid gap-10 lg:grid-cols-[1fr_1.4fr] lg:items-start lg:gap-16">
            <div>
              <span className="text-xs font-medium uppercase tracking-[0.22em] text-muted-foreground">
                Formatos
              </span>
              <h2 className="mt-3 font-display text-4xl font-medium tracking-tight">
                Do palco ao <span className="italic text-gradient-life">dia a dia da equipe.</span>
              </h2>
              <p className="mt-5 text-muted-foreground">
                Escolha o formato que melhor encaixa no seu calendário corporativo — ou combine
                vários em uma trilha contínua.
              </p>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {formatos.map((f) => (
                <div
                  key={f.label}
                  className="rounded-2xl border border-border/70 bg-background p-6"
                >
                  <div className="font-display text-xl font-medium tracking-tight">{f.label}</div>
                  <div className="mt-4 flex items-center gap-2 text-sm text-[color:var(--life)]">
                    <Calendar className="h-4 w-4" />
                    {f.tempo}
                  </div>
                  <div className="mt-1 text-sm text-muted-foreground">{f.publico}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="rounded-3xl bg-[color:var(--safe)] p-10 text-background 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">
                Conte o momento da sua empresa —{" "}
                <span className="italic text-[color:var(--life-glow)]">desenhamos o conteúdo.</span>
              </h2>
              <p className="mt-4 text-background/75">
                Cada encontro é construído sob medida: pesquisa prévia com lideranças, roteiro
                alinhado à cultura e materiais de continuidade pós-evento.
              </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-[color:var(--life)] px-6 py-3 text-sm font-bold text-[color:var(--safe)]"
              >
                Solicitar proposta <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}
