import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Brain, Heart, Shield, Sparkles, Users } from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";
import sobreHero from "@/assets/sobre-hero.jpg";

export const Route = createFileRoute("/sobre")({
  head: () => ({
    meta: [
      { title: "Sobre Nós | Ciência e Prevenção - Instituto Vida Segura" },
      {
        name: "description",
        content:
          "Conheça o Instituto Vida Segura. Unimos neurociência, tecnologia e desenvolvimento humano para transformar empresas em ambientes saudáveis e seguros.",
      },
      {
        property: "og:title",
        content: "Sobre Nós | Ciência e Prevenção - Instituto Vida Segura",
      },
      {
        property: "og:description",
        content:
          "Conheça o Instituto Vida Segura. Unimos neurociência, tecnologia e desenvolvimento humano para transformar empresas em ambientes saudáveis e seguros.",
      },
    ],
  }),
  component: SobrePage,
});

const SECTION_PY = "py-20 sm:py-24 lg:py-28";
const EYEBROW =
  "text-xs font-medium uppercase tracking-[0.2em] text-[color:var(--life)]";
const H2 =
  "mt-4 font-display text-4xl font-medium leading-[1.1] tracking-tight sm:text-5xl";
const LEAD =
  "text-lg leading-relaxed text-muted-foreground sm:text-xl";

function SobrePage() {
  return (
    <SiteShell>
      <PageHeader
        eyebrow="Sobre nós"
        title="Acreditamos que toda cultura de segurança"
        highlight="começa pelas pessoas."
        description="O Instituto Vida Segura nasceu da convicção de que ambientes mais seguros não são construídos apenas com normas, processos ou tecnologia — eles são construídos quando as pessoas são compreendidas, valorizadas e desenvolvidas."
        backgroundImage={{ src: sobreHero, alt: "Equipe diversa colaborando em um ambiente corporativo acolhedor" }}
        variant="safe"
      />

      {/* Seção 1 — Por que existimos */}
      <section className={`container-page ${SECTION_PY}`}>
        <div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-start lg:gap-20">
          <div>
            <span className={EYEBROW}>Por que existimos</span>
            <h2 className={H2}>
              Transformar vidas para{" "}
              <span className="italic text-gradient-life">transformar organizações.</span>
            </h2>
          </div>
          <div className="space-y-6 animate-fade-up">
            <p className={LEAD}>
              Vivemos um momento em que as empresas enfrentam desafios cada vez mais
              complexos. O aumento do adoecimento emocional, dos riscos psicossociais
              e das mudanças no mundo do trabalho exige uma nova forma de cuidar das
              pessoas.
            </p>
            <p className={LEAD}>
              Existimos para apoiar essa transformação, conectando{" "}
              <span className="font-display italic text-foreground">ciência, desenvolvimento humano e inovação</span>{" "}
              para construir ambientes onde as pessoas possam crescer, colaborar e prosperar.
            </p>
            <p className="font-display text-2xl italic leading-snug tracking-tight text-foreground sm:text-3xl">
              Porque empresas evoluem quando as pessoas evoluem.
            </p>
          </div>
        </div>
      </section>

      {/* Seção 2 — O que acreditamos */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className={`container-page ${SECTION_PY}`}>
          <div className="max-w-3xl">
            <span className={EYEBROW}>O que acreditamos</span>
            <h2 className={H2}>
              Cuidar de pessoas é a forma mais inteligente de{" "}
              <span className="italic text-gradient-life">proteger resultados.</span>
            </h2>
          </div>
          <div className="mt-10 grid gap-8 lg:grid-cols-2 lg:gap-16">
            <p className={LEAD}>
              Durante muito tempo, segurança significou evitar acidentes. Hoje entendemos
              que proteger pessoas também significa promover saúde mental, fortalecer
              lideranças, desenvolver inteligência emocional e criar ambientes onde cada
              profissional possa exercer seu potencial com segurança e confiança.
            </p>
            <p className={LEAD}>
              Quando o cuidado faz parte da cultura, os resultados deixam de ser
              consequência do controle e passam a ser{" "}
              <span className="font-display italic text-foreground">fruto do compromisso coletivo.</span>
            </p>
          </div>
        </div>
      </section>

      {/* Seção 3 — Como fazemos diferente */}
      <section className={`container-page ${SECTION_PY}`}>
        <div className="max-w-3xl">
          <span className={EYEBROW}>Como fazemos diferente</span>
          <h2 className={H2}>
            Não tratamos apenas sintomas.{" "}
            <span className="italic text-gradient-life">Desenvolvemos culturas.</span>
          </h2>
          <p className={`mt-6 ${LEAD}`}>
            Enquanto muitos oferecem soluções isoladas, nós construímos uma abordagem
            integrada que une comportamento humano, saúde mental, tecnologia e educação.
          </p>
        </div>

        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {[
            {
              icon: Brain,
              title: "Comportamento humano",
              desc: "Compreendemos a raiz das atitudes antes de propor mudanças.",
            },
            {
              icon: Heart,
              title: "Saúde mental",
              desc: "Cuidado emocional como base na segurança psicológica.",
            },
            {
              icon: Sparkles,
              title: "Tecnologia",
              desc: "Plataformas que tornam o autoconhecimento envolvente e mensurável.",
            },
            {
              icon: Users,
              title: "Educação",
              desc: "Formação de líderes e equipes preparados para uma nova cultura.",
            },
          ].map(({ icon: Icon, title, desc }) => (
            <div key={title} className="glass-card rounded-3xl p-7 transition-transform duration-300 hover:-translate-y-1">
              <span className="grid h-11 w-11 place-items-center rounded-2xl border border-[color:var(--life)]/30 text-[color:var(--life)]">
                <Icon className="h-5 w-5" />
              </span>
              <h3 className="mt-5 font-display text-xl font-medium tracking-tight">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{desc}</p>
            </div>
          ))}
        </div>

        <p className={`mt-10 max-w-3xl ${LEAD}`}>
          Nosso trabalho vai além da conformidade com normas. Atuamos para fortalecer a
          cultura organizacional, apoiar lideranças e desenvolver pessoas capazes de
          transformar o ambiente onde vivem e trabalham —{" "}
          <span className="font-display italic text-foreground">gerando mudanças reais, mensuráveis e duradouras.</span>
        </p>
      </section>

      {/* Seção 4 — Nossa Convicção (destaque) */}
      <section className="relative overflow-hidden bg-gradient-safe">
        <span className="pointer-events-none absolute -top-24 right-0 h-96 w-96 rounded-full bg-[color:var(--safe-gold)]/20 blur-3xl" />
        <span className="pointer-events-none absolute -bottom-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-[color:var(--life)]/15 blur-3xl" />
        <div className={`container-page relative ${SECTION_PY}`}>
          <div className="mx-auto max-w-4xl text-center">
            <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.2em] text-white/90 backdrop-blur">
              Nossa convicção
            </span>
            <h2 className="mt-8 font-display text-4xl font-medium leading-[1.05] tracking-tight text-white sm:text-6xl lg:text-7xl">
              O comportamento humano não é o problema.{" "}
              <span className="italic text-gradient-safe">Ele é o ponto de partida para a solução.</span>
            </h2>
            <div className="mt-10 space-y-5 text-lg leading-relaxed text-white/85 sm:text-xl">
              <p>Por trás de cada comportamento existe uma história.</p>
              <p>Por trás de cada decisão existe uma emoção.</p>
              <p>
                Toda transformação começa quando escolhemos{" "}
                <span className="italic text-white">compreender as pessoas</span>{" "}
                antes de simplesmente corrigir suas atitudes.
              </p>
              <p className="pt-4 text-base text-white/70">
                É essa convicção que orienta cada projeto, treinamento, tecnologia e solução
                desenvolvida pelo Instituto Vida Segura.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Seção 5 — Nosso Compromisso */}
      <section className={`container-page ${SECTION_PY}`}>
        <div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-start lg:gap-20">
          <div>
            <span className={EYEBROW}>Nosso compromisso</span>
            <h2 className={H2}>
              Ambientes emocionalmente seguros,{" "}
              <span className="italic text-gradient-life">saudáveis e produtivos.</span>
            </h2>
            <span className="mt-8 inline-grid h-14 w-14 place-items-center rounded-2xl border border-[color:var(--life)]/30 text-[color:var(--life)]">
              <Shield className="h-6 w-6" />
            </span>
          </div>
          <div className="space-y-6">
            <p className={LEAD}>
              Nosso compromisso é levar conhecimento científico, tecnologia e desenvolvimento
              humano para ajudar empresas a construir ambientes emocionalmente seguros,
              saudáveis e produtivos.
            </p>
            <p className={LEAD}>
              Queremos que organizações sejam reconhecidas não apenas pelos resultados que
              alcançam, mas pela forma como cuidam das pessoas que tornam esses resultados
              possíveis.
            </p>
            <p className="font-display text-2xl italic leading-snug tracking-tight text-foreground sm:text-3xl">
              Prevenir é mais do que evitar acidentes. É desenvolver uma cultura onde
              pessoas, equipes e empresas prosperam juntas.
            </p>
          </div>
        </div>
      </section>

      {/* Seção Final — O futuro que queremos construir */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className={`container-page ${SECTION_PY}`}>
          <div className="mx-auto max-w-3xl text-center">
            <span className={EYEBROW}>O futuro que queremos construir</span>
            <h2 className={`${H2} mx-auto`}>
              Cuidar de pessoas como o investimento mais{" "}
              <span className="italic text-gradient-life">inteligente</span> de uma organização.
            </h2>
            <div className="mt-10 space-y-5 text-lg leading-relaxed text-muted-foreground sm:text-xl">
              <p>
                Imaginamos organizações onde segurança, saúde mental e desenvolvimento
                humano façam parte da estratégia — e não apenas das obrigações.
              </p>
              <p>Onde líderes inspirem confiança.</p>
              <p>Onde equipes trabalhem com propósito.</p>
              <p className="font-display italic text-foreground">
                É esse futuro que nos inspira. E é por ele que trabalhamos todos os dias.
              </p>
            </div>
            <div className="relative mt-10 flex flex-wrap items-center justify-center gap-4">
              <Link
                to="/solucoes"
                className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-transform duration-200 hover:scale-[1.03]"
              >
                Conheça nossas soluções
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                to="/contato"
                className="inline-flex items-center gap-2 rounded-full border border-foreground/20 px-6 py-3 text-sm font-medium text-foreground transition-colors duration-200 hover:bg-foreground/5"
              >
                Fale com o Instituto
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}