import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowRight,
  Building2,
  CalendarHeart,
  Coins,
  Handshake,
  Sparkles,
  Target,
  BookOpen,
} from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import parceiroHero from "@/assets/parceiro-hero.jpg";

export const Route = createFileRoute("/acesso/parceiro")({
  head: () => ({
    meta: [
      { title: "Parceiro Comercial — Instituto Vida Segura" },
      {
        name: "description",
        content:
          "Faça parte de uma rede de parceiros que leva ciência, desenvolvimento humano e inovação para empresas de todo o Brasil.",
      },
      { property: "og:title", content: "Parceiro Comercial — Instituto Vida Segura" },
      {
        property: "og:description",
        content: "Movimento de transformação para empresas e pessoas.",
      },
    ],
  }),
  component: AcessoParceiro,
});

const partnerBenefits = [
  {
    icon: Target,
    title: "Oportunidades de Negócio",
    description: "Leads qualificados e novas frentes de crescimento.",
  },
  {
    icon: Coins,
    title: "Gestão de Comissões",
    description: "Acompanhamento transparente de metas e ganhos.",
  },
  {
    icon: BookOpen,
    title: "Materiais Exclusivos",
    description: "Conteúdos de vendas, argumentação e apresentações.",
  },
  {
    icon: CalendarHeart,
    title: "Campanhas e Eventos",
    description: "Agenda de ativações, webinars e experiências.",
  },
];

function AcessoParceiro() {
  return (
    <SiteShell>
      {/* Hero — padrão site: texto à esquerda, imagem à direita */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[color:var(--safe)] via-[color:var(--safe)] to-[color:var(--safe-gold)]/30">
        <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">
              <Handshake className="h-3 w-3" /> Parceiro Comercial
            </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]">
              Transforme conexões em{" "}
              <span className="italic text-[color:var(--safe-gold)]">oportunidades</span>.
            </h1>
            <p className="mt-6 max-w-xl text-white/90">
              Faça parte de uma rede de parceiros que leva ciência, desenvolvimento humano e
              inovação para empresas de todo o Brasil.
            </p>
            <p className="mt-4 max-w-xl text-white/75">
              Tenha acesso a oportunidades de negócio, materiais exclusivos, acompanhamento de
              comissões e uma plataforma desenvolvida para impulsionar seus resultados.
            </p>
          </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={parceiroHero}
                alt="Duas pessoas cumprimentando-se com um aperto de mãos em ambiente corporativo moderno."
                width={1200}
                height={1408}
                className="h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Benefícios + Login */}
      <section className="bg-[color:var(--background)]">
        <div className="container-page grid gap-10 py-16 lg:grid-cols-[1fr_1.05fr] lg:items-start lg:gap-14 lg:py-20">
          <div>
            <span className="text-xs font-medium uppercase tracking-[0.2em] text-[color:var(--life)]">
              Programa de parceria
            </span>
            <h2 className="mt-3 font-display text-3xl font-medium tracking-tight text-[color:var(--safe)] sm:text-4xl">
              Um ecossistema que impulsiona seus resultados
            </h2>
            <p className="mt-3 max-w-md text-sm text-[color:var(--safe)]/70">
              Ferramentas, materiais e agenda de ativações para você crescer junto com o Instituto
              Vida Segura.
            </p>

            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              {partnerBenefits.map(({ icon: Icon, title, description }) => (
                <div
                  key={title}
                  className="group rounded-2xl border border-[color:var(--safe)]/10 bg-white p-5 shadow-[0_10px_40px_-30px_color-mix(in_oklab,var(--safe)_35%,transparent)] transition hover:-translate-y-0.5 hover:border-[color:var(--safe-gold)]/50"
                >
                  <span className="grid h-11 w-11 place-items-center rounded-xl bg-[color:var(--safe-gold)]/15 text-[color:var(--safe)] transition group-hover:bg-[color:var(--safe-gold)]">
                    <Icon className="h-5 w-5" />
                  </span>
                  <h3 className="mt-4 font-display text-lg font-medium tracking-tight text-[color:var(--safe)]">
                    {title}
                  </h3>
                  <p className="mt-1 text-sm leading-relaxed text-[color:var(--safe)]/70">
                    {description}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:sticky lg:top-24">
            <div className="rounded-3xl border border-[color:var(--safe)]/10 bg-white p-8 shadow-[0_40px_80px_-40px_color-mix(in_oklab,var(--safe)_35%,transparent)] sm:p-10">
              <div className="flex items-center gap-3">
                <span className="grid h-12 w-12 place-items-center rounded-2xl bg-[color:var(--safe-gold)]/15 text-[color:var(--safe)]">
                  <Sparkles className="h-5 w-5" />
                </span>
                <div>
                  <h2 className="font-display text-2xl font-medium tracking-tight text-[color:var(--safe)]">
                    Acessar portal
                  </h2>
                  <p className="text-xs text-[color:var(--safe)]/60">
                    Use seu e-mail de parceiro credenciado
                  </p>
                </div>
              </div>

              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  alert("Portal do parceiro em integração — em breve disponível.");
                }}
                className="mt-8 space-y-4"
              >
                <label className="block">
                  <span className="text-xs font-medium uppercase tracking-[0.16em] text-[color:var(--safe)]/70">
                    E-mail de parceiro
                  </span>
                  <input
                    type="email"
                    required
                    placeholder="voce@suaempresa.com.br"
                    className="mt-2 w-full rounded-2xl border border-[color:var(--safe)]/15 bg-white px-4 py-3 text-sm text-[color:var(--safe)] placeholder:text-[color:var(--safe)]/40 outline-none transition focus:border-[color:var(--safe-gold)]"
                  />
                </label>
                <label className="block">
                  <span className="text-xs font-medium uppercase tracking-[0.16em] text-[color:var(--safe)]/70">
                    Senha
                  </span>
                  <input
                    type="password"
                    required
                    placeholder="••••••••"
                    className="mt-2 w-full rounded-2xl border border-[color:var(--safe)]/15 bg-white px-4 py-3 text-sm text-[color:var(--safe)] placeholder:text-[color:var(--safe)]/40 outline-none transition focus:border-[color:var(--safe-gold)]"
                  />
                </label>
                <button
                  type="submit"
                  className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-[color:var(--safe)] px-6 py-3.5 text-sm font-semibold text-white transition hover:brightness-110"
                >
                  Entrar
                  <ArrowRight className="h-4 w-4" />
                </button>
                <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-[color:var(--safe)]/70">
                  <a href="#" className="hover:text-[color:var(--safe-gold)]">
                    Esqueci minha senha
                  </a>
                  <Link to="/contato" className="hover:text-[color:var(--safe-gold)]">
                    Quero ser parceiro
                  </Link>
                </div>
              </form>

              <Link
                to="/acesso/parceiro/cadastrar-empresa"
                className="mt-6 flex items-center justify-between gap-4 rounded-2xl border border-[color:var(--safe)]/10 bg-[color:var(--safe)]/5 px-5 py-4 text-left text-[color:var(--safe)] transition hover:border-[color:var(--safe-gold)]/50 hover:bg-[color:var(--safe)]/10"
              >
                <span className="flex items-center gap-3">
                  <span className="grid h-10 w-10 place-items-center rounded-xl bg-[color:var(--safe-gold)]/20 text-[color:var(--safe)]">
                    <Building2 className="h-5 w-5" />
                  </span>
                  <span>
                    <span className="block text-sm font-semibold">
                      Grandes resultados começam com grandes parcerias.
                    </span>
                    <span className="block text-xs text-[color:var(--safe)]/60">
                      Cada empresa conectada ao nosso ecossistema amplia o impacto positivo na saúde
                      mental, no desenvolvimento humano e na construção de ambientes mais seguros.
                    </span>
                  </span>
                </span>
                <ArrowRight className="h-4 w-4 text-[color:var(--safe-gold)]" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}
