import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowRight,
  Brain,
  Compass,
  Heart,
  Home,
  Smile,
  Sparkles,
  Trophy,
} from "lucide-react";
import mindFamilyHero from "@/assets/mind-family-hero.png.asset.json";
import { SiteShell } from "@/components/site/SiteShell";

export const Route = createFileRoute("/solucoes/mind-family")({
  head: () => ({
    meta: [
      { title: "Mind Family | App de Bem-Estar Emocional para Empresas" },
      {
        name: "description",
        content:
          "Aplicativo diário de saúde emocional e autoconhecimento para colaboradores e famílias. Trilhas guiadas por neurociência para alívio do estresse. Conheça!",
      },
      {
        property: "og:title",
        content: "Mind Family | App de Bem-Estar Emocional para Empresas",
      },
      {
        property: "og:description",
        content:
          "Aplicativo diário de saúde emocional e autoconhecimento para colaboradores e famílias. Trilhas guiadas por neurociência para alívio do estresse. Conheça!",
      },
    ],
  }),
  component: MindFamilyPage,
});

function MindFamilyPage() {
  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(--mind-a)_20%)] via-[color-mix(in_oklab,var(--safe)_45%,var(--mind-b)_55%)] to-[color-mix(in_oklab,var(--mind-c)_35%,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>
            <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">
              <Heart className="h-3 w-3" /> Camada 02 · Acolhimento & bem-estar
            </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]">
              Ciência que cuida de{" "}
              <span className="italic text-[color:var(--mind-c)]">quem cuida de todos</span>.
            </h1>
            <p className="mt-6 max-w-xl text-white/90">
              O Mind Family é um aplicativo de autoconhecimento e bem-estar emocional para
              famílias. Jornadas guiadas, práticas diárias de 5 a 10 minutos e ferramentas
              baseadas em neurociência e psicologia positiva para adultos, jovens e crianças.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href="https://mindfamily.com.br/compartilhar.html"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--life)] px-6 py-3 text-sm font-semibold text-white transition hover:brightness-105"
              >
                Baixar o aplicativo
                <ArrowRight className="h-4 w-4" />
              </a>
              <Link
                to="/contato"
                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"
              >
                Mais informações sobre o app
              </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={mindFamilyHero.url}
                alt="Família usando o app Mind Family em um tablet"
                width={1200}
                height={1408}
                className="h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* 6 recursos do app */}
      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="grid gap-6 lg:grid-cols-3">
          {[
            { icon: Compass, n: "01", t: "Trilhas guiadas", d: "Jornadas progressivas de autoconhecimento adaptadas para cada fase da vida." },
            { icon: Brain, n: "02", t: "Testes flexivos", d: "Questionários e avaliações que ajudam a ampliar sua consciência emocional." },
            { icon: Smile, n: "03", t: "Práticas diárias", d: "Complete exercícios, reflexões e práticas de mindfulness em seu ritmo." },
            { icon: Home, n: "04", t: "Ferramentas cientificamente comprovadas", d: "Explore temas como ansiedade, burnout, autoestima, autoconfiança e mais de 100 temas." },
            { icon: Sparkles, n: "05", t: "Acompanhe seu progresso", d: "Veja sua evolução, ganhe conquistas, mude hábitos e suba no ranking." },
            { icon: Trophy, n: "06", t: "Gamificação", d: "Crie seu avatar, personalize seu perfil e participe de jornadas de autoconhecimento." },
          ].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-mind 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>

      {/* Stats Mind Family */}
      <section className="border-y border-border/60 bg-[color:var(--surface)]">
        <div className="container-page py-20">
          <div className="grid grid-cols-2 gap-y-10 lg:grid-cols-4">
            {[
              ["1k+", "Famílias ativas"],
              ["100+", "Temas disponíveis"],
              ["4.9 ★", "Avaliação média"],
              ["5–10 min", "Prática diária"],
            ].map(([n, l]) => (
              <div key={l} className="text-center">
                <div className="font-display text-4xl font-semibold text-gradient-mind">{n}</div>
                <div className="mt-2 text-xs uppercase tracking-[0.18em] text-muted-foreground">{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cuidado familiar — diferencial */}
      <section 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="grid h-12 w-12 place-items-center rounded-2xl border border-[color:var(--life)]/30 text-[color:var(--life)]">
              <Heart className="h-5 w-5" />
            </span>
            <h2 className="mt-5 font-display text-4xl font-medium tracking-tight sm:text-5xl">
              O cuidado <span className="italic text-gradient-mind">não termina</span> no portão da empresa.
            </h2>
            <p className="mt-5 text-muted-foreground">
              Ninguém adoece sozinho. Ninguém se cura sozinho. O Mind Family estende o
              app a cônjuges, filhos e dependentes porque o equilíbrio em casa é o que
              sustenta a performance no trabalho.
            </p>
          </div>

          <blockquote className="rounded-3xl bg-gradient-mind p-10">
            <p className="font-display text-2xl font-medium leading-snug tracking-tight sm:text-3xl">
              <span className="italic">"Quando o Mind Family chegou"</span>, minha
              esposa começou a praticar terapia e técnicas de regulação emocional
              pelo app e isso mudou nossa casa, isso mudou até meu jeito de
              trabalhar.
            </p>
            <p className="mt-6 text-xs uppercase tracking-[0.18em] text-[color:var(--safe)]/60">
              COLABORADOR · EMPRESA PARCEIRA
            </p>
          </blockquote>
        </div>
      </section>

      <section className="container-page pb-24 lg:pb-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">
                Bem-estar mensurável, <span className="italic text-[color:var(--life-glow)]">cuidado real</span>.
              </h2>
              <p className="mt-4 text-background/75">
                Junte-se a milhares de pessoas e transforme o bem-estar da sua
                família com práticas científicas e acessíveis através do App Mind
                Family.
              </p>
            </div>
            <div className="flex flex-col gap-3 lg:items-end">
              <a
                href="https://mindfamily.com.br/compartilhar.html"
                target="_blank"
                rel="noopener noreferrer"
                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)]"
              >
                Baixar o aplicativo <ArrowRight className="h-4 w-4" />
              </a>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}
