/* landing.jsx — home pública / landing de marketing do AchaMais */
const {
  Button: LBtn, Badge: LBadge, cn: lcn,
  IconSearch: LSearch, IconBolt: LBolt, IconChart: LChart, IconLink: LLink,
  IconTrendUp: LTrend, IconShield: LShield, IconArrowRight: LArrow, IconCheck: LCheck,
  IconStar: LStar, IconClock: LClock, IconX: LX, IconLock: LLock, IconWallet: LWallet,
  Footer: LFooter, formatBRL: lBRL,
} = window;

function LandingNav({ onLogin, onStart }) {
  return (
    <nav className="sticky top-0 z-40 border-b border-edge bg-ink/80 backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5">
        <div className="flex items-center gap-2.5">
          <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-coral text-ink">
            <LSearch size={18} className="text-ink" />
          </span>
          <span className="font-syne text-xl font-extrabold tracking-tight text-white">Acha<span className="text-brand">Mais</span></span>
        </div>
        <div className="hidden items-center gap-7 text-sm text-zinc-400 md:flex">
          <a href="#vantagens" className="transition-colors hover:text-white">Vantagens</a>
          <a href="#planos" className="transition-colors hover:text-white">Planos</a>
          <a href="#depoimentos" className="transition-colors hover:text-white">Depoimentos</a>
        </div>
        <div className="flex items-center gap-2">
          <LBtn variant="ghost" size="sm" onClick={onLogin} className="hidden sm:inline-flex">Entrar</LBtn>
          <LBtn size="sm" onClick={onStart}>Começar grátis</LBtn>
        </div>
      </div>
    </nav>
  );
}

/* Mock de comparação exibido no hero */
function CompareMock() {
  return (
    <div className="relative mx-auto w-full max-w-md">
      <div className="absolute -inset-6 -z-10 rounded-[2rem] opacity-40 blur-3xl"
        style={{ background: 'radial-gradient(60% 60% at 30% 20%, rgba(22,191,163,.5), transparent 70%), radial-gradient(60% 60% at 80% 90%, rgba(249,94,46,.45), transparent 70%)' }} />
      <div className="rounded-2xl border border-edge bg-panel p-4 shadow-2xl shadow-black/60">
        <div className="mb-3 flex items-center gap-2 rounded-xl border border-edge bg-white/[0.04] px-3 py-2.5">
          <LSearch size={16} className="text-zinc-500" />
          <span className="text-sm text-zinc-300">fone bluetooth</span>
          <span className="ml-auto flex h-6 items-center rounded-md bg-brand px-2 text-[11px] font-bold text-ink">Buscar</span>
        </div>
        <div className="space-y-2.5">
          <MockRow plat="ml" name="Fone Bluetooth TWS Pro" price={189.9} rate="3%" comm={5.7} />
          <MockRow plat="shopee" name="Fone Bluetooth TWS Pro" price={164.9} rate="14%" comm={23.09} best />
        </div>
      </div>
    </div>
  );
}
function MockRow({ plat, name, price, rate, comm, best }) {
  const isMl = plat === 'ml';
  return (
    <div className={lcn('relative flex items-center gap-3 rounded-xl border bg-white/[0.02] p-3', best ? 'border-brand/40' : 'border-edge')}>
      <div className={lcn('flex h-11 w-11 shrink-0 items-center justify-center rounded-lg', isMl ? 'bg-gold/15' : 'bg-coral/15')}>
        <LSearch size={16} className={isMl ? 'text-gold' : 'text-coral'} />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-1.5">
          <span className={lcn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold', isMl ? 'bg-gold/15 text-gold' : 'bg-coral/15 text-coral')}>
            <span className={lcn('h-1 w-1 rounded-full', isMl ? 'bg-gold' : 'bg-coral')} />{isMl ? 'Mercado Livre' : 'Shopee'}
          </span>
          {best && <span className="inline-flex items-center gap-0.5 rounded-full bg-brand px-1.5 py-0.5 text-[9px] font-bold text-ink"><LStar size={9} fill="#0A0A0A" />melhor</span>}
        </div>
        <div className="mt-1 truncate text-xs text-zinc-400">{lBRL(price)} · {rate} comissão</div>
      </div>
      <div className="text-right">
        <div className="text-[9px] uppercase tracking-wide text-zinc-500">comissão</div>
        <div className={lcn('font-num text-base font-bold', isMl ? 'text-gold' : 'text-coral')}>{lBRL(comm)}</div>
      </div>
    </div>
  );
}

/* Card de plano */
function PlanCard({ featured, name, price, period, tagline, cta, items, onStart }) {
  return (
    <div className={lcn('relative flex flex-col rounded-3xl border p-7', featured ? 'border-brand/50 bg-panel' : 'border-edge bg-panel')}>
      {featured && (
        <>
          <div className="pointer-events-none absolute -inset-px -z-10 rounded-3xl opacity-60 blur-xl" style={{ background: 'radial-gradient(60% 50% at 50% 0%, rgba(22,191,163,.35), transparent 70%)' }} />
          <LBadge variant="brand" className="absolute -top-3 left-1/2 -translate-x-1/2">Mais popular</LBadge>
        </>
      )}
      <h3 className="font-syne text-lg font-bold text-white">{name}</h3>
      <p className="mt-1 text-sm text-zinc-500">{tagline}</p>
      <div className="mt-5 flex items-end gap-1.5">
        <span className="font-num text-4xl font-extrabold text-white">{price}</span>
        {period && <span className="pb-1 text-sm text-zinc-500">{period}</span>}
      </div>
      <LBtn variant={featured ? 'default' : 'outline'} className="mt-5 w-full" onClick={onStart}>{cta}</LBtn>
      <div className="my-6 h-px w-full bg-edge" />
      <ul className="space-y-3">
        {items.map((it) => (
          <li key={it.label} className={lcn('flex items-start gap-2.5 text-sm', it.off ? 'text-zinc-600' : 'text-zinc-200')}>
            <span className={lcn('mt-0.5 shrink-0', it.off ? 'text-zinc-700' : 'text-brand')}>
              {it.off ? <LX size={16} /> : <LCheck size={16} />}
            </span>
            {it.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

function Testimonial({ quote, name, role, tint }) {
  return (
    <figure className="flex h-full flex-col rounded-2xl border border-edge bg-panel p-6">
      <div className="mb-3 flex gap-0.5 text-brand">
        {Array.from({ length: 5 }).map((_, i) => <LStar key={i} size={14} fill="currentColor" />)}
      </div>
      <blockquote className="flex-1 text-pretty text-[15px] leading-relaxed text-zinc-200">“{quote}”</blockquote>
      <figcaption className="mt-5 flex items-center gap-3">
        <span className={lcn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold text-ink', tint)}>{name.charAt(0)}</span>
        <span>
          <span className="block text-sm font-semibold text-white">{name}</span>
          <span className="block text-xs text-zinc-500">{role}</span>
        </span>
      </figcaption>
    </figure>
  );
}

function Landing({ onStart, onLogin, onSubscribe = onStart }) {
  const vantagens = [
    { icon: LClock, title: 'Fim do trabalho manual', text: 'Nada de abrir dez abas e copiar preço de um lado, comissão do outro. Uma busca resolve as duas plataformas de uma vez.' },
    { icon: LStar, title: 'Sempre a maior comissão', text: 'O AchaMais calcula o valor real de cada plataforma e destaca onde você ganha mais. Você nunca mais divulga o link errado.' },
    { icon: LChart, title: 'Lucro claro, em tempo real', text: 'Comissão acumulada, conversões e seus campeões de venda num painel só. Saiba exatamente quanto está gerando.' },
  ];
  const steps = [
    { n: '01', title: 'Pesquise o produto', text: 'Digite o nome uma vez. Buscamos no Mercado Livre e na Shopee ao mesmo tempo.' },
    { n: '02', title: 'Compare lado a lado', text: 'Preço, percentual e comissão em R$ de cada plataforma, calculados na hora.' },
    { n: '03', title: 'Divulgue o que paga mais', text: 'A melhor oportunidade vem destacada. Copie o link certo e foque em vender.' },
  ];
  const freeItems = [
    { label: 'Acesso total por 7 dias' },
    { label: 'Buscas ilimitadas nas duas plataformas' },
    { label: 'Gerador de links e alertas inclusos' },
    { label: 'Cancele antes do fim e não paga nada' },
  ];
  const proItems = [
    { label: 'Buscas ilimitadas nas duas plataformas' },
    { label: 'Gerador de links de afiliado com sub-id' },
    { label: 'Alertas de melhor comissão' },
    { label: 'Monitoramento ilimitado de produtos' },
    { label: 'Suporte prioritário no WhatsApp' },
  ];
  return (
    <div className="min-h-screen">
      <LandingNav onLogin={onLogin} onStart={onStart} />

      {/* HERO */}
      <header className="relative overflow-hidden">
        <div className="pointer-events-none absolute -top-40 left-1/2 h-[520px] w-[820px] -translate-x-1/2 opacity-25 blur-[130px]"
          style={{ background: 'radial-gradient(50% 50% at 35% 40%, rgba(22,191,163,.55), transparent 70%), radial-gradient(50% 50% at 70% 60%, rgba(249,94,46,.5), transparent 70%)' }} />
        <div className="mx-auto grid max-w-6xl items-center gap-12 px-5 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
          <div>
            <LBadge variant="brand" className="mb-5">Automação para afiliados ML + Shopee</LBadge>
            <h1 className="text-balance font-syne text-4xl font-extrabold leading-[1.05] tracking-tight text-white sm:text-5xl lg:text-6xl">
              Menos tempo calculando, <span className="text-brand">mais comissão no bolso</span>.
            </h1>
            <p className="mt-5 max-w-xl text-pretty text-lg leading-relaxed text-zinc-400">
              O AchaMais pesquisa o mesmo produto no Mercado Livre e na Shopee, calcula a comissão real de cada um e mostra na hora onde vale mais a pena. Você decide em segundos — sem planilha, sem calculadora.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
              <LBtn onClick={onStart} className="w-full justify-center sm:w-auto">Começar minha automação agora <LArrow size={18} /></LBtn>
              <LBtn variant="outline" onClick={onLogin} className="w-full justify-center sm:w-auto">Já tenho conta</LBtn>
            </div>
            <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-zinc-500">
              <span className="inline-flex items-center gap-1.5"><LCheck size={15} className="text-brand" /> 7 dias grátis para testar</span>
              <span className="inline-flex items-center gap-1.5"><LCheck size={15} className="text-brand" /> Cancele quando quiser</span>
            </div>
          </div>
          <CompareMock />
        </div>
      </header>

      {/* VANTAGENS — A lógica do lucro */}
      <section id="vantagens" className="border-t border-edge bg-[#0c0c0c]">
        <div className="mx-auto max-w-6xl px-5 py-16 lg:py-24">
          <div className="mx-auto mb-12 max-w-2xl text-center">
            <span className="text-sm font-semibold uppercase tracking-wider text-brand">A lógica do lucro</span>
            <h2 className="mt-2 text-balance font-syne text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Trabalhe menos. Ganhe mais por venda.</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {vantagens.map((v) => (
              <div key={v.title} className="rounded-2xl border border-edge bg-panel p-7">
                <span className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/10 text-brand"><v.icon size={20} /></span>
                <h3 className="font-syne text-lg font-bold text-white">{v.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-zinc-400">{v.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMO FUNCIONA */}
      <section className="mx-auto max-w-6xl px-5 py-16 lg:py-24">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          <span className="text-sm font-semibold uppercase tracking-wider text-zinc-500">Como funciona</span>
          <h2 className="mt-2 text-balance font-syne text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Da busca à melhor comissão em 3 passos</h2>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          {steps.map((s) => (
            <div key={s.n} className="relative rounded-2xl border border-edge bg-panel p-7">
              <span className="font-syne text-4xl font-extrabold text-brand/25">{s.n}</span>
              <h3 className="mt-3 font-syne text-xl font-bold text-white">{s.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-400">{s.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PLANOS */}
      <section id="planos" className="border-t border-edge bg-[#0c0c0c]">
        <div className="mx-auto max-w-5xl px-5 py-16 lg:py-24">
          <div className="mx-auto mb-12 max-w-2xl text-center">
            <span className="text-sm font-semibold uppercase tracking-wider text-brand">Planos</span>
            <h2 className="mt-2 text-balance font-syne text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Teste grátis por 7 dias. Escale quando vender mais.</h2>
            <p className="mt-3 text-pretty text-zinc-400">O Pro se paga com <span className="text-brand">uma única venda a mais</span> que você fechar com o link certo.</p>
          </div>
          <div className="grid items-start gap-5 md:grid-cols-2">
            <PlanCard
              name="Teste grátis"
              tagline="7 dias com tudo liberado, sem compromisso."
              price="R$ 0"
              period="/7 dias"
              cta="Começar teste grátis"
              items={freeItems}
              onStart={onStart} />
            <PlanCard
              featured
              name="Pro"
              tagline="Para quem leva a sério e quer escalar."
              price="R$ 29,90"
              period="/mês"
              cta="Assinar o Pro"
              items={proItems}
              onStart={onSubscribe} />
          </div>
          <p className="mt-6 text-center text-xs text-zinc-600">Cancele quando quiser. Sem fidelidade, sem letras miúdas.</p>
        </div>
      </section>

      {/* DEPOIMENTOS */}
      <section id="depoimentos" className="mx-auto max-w-6xl px-5 py-16 lg:py-24">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          <span className="text-sm font-semibold uppercase tracking-wider text-brand">Quem usa, não larga</span>
          <h2 className="mt-2 text-balance font-syne text-3xl font-extrabold tracking-tight text-white sm:text-4xl">A mudança começa na primeira busca</h2>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          <Testimonial
            quote="Antes eu perdia umas 2 horas por dia comparando preço e comissão na mão. Hoje faço em 10 minutos e uso o resto do tempo pra criar conteúdo."
            name="Juliana M." role="Afiliada há 2 anos" tint="bg-gradient-to-br from-brand to-coral" />
          <Testimonial
            quote="Descobri que estava divulgando vários produtos com comissão baixa sem perceber. Parei com isso e minha receita subiu quase 30% no primeiro mês."
            name="Rafael T." role="Criador de conteúdo" tint="bg-gradient-to-br from-coral to-gold" />
          <Testimonial
            quote="O painel me mostrou que a Shopee pagava bem mais nos meus nichos. Mudei o foco e nunca mais voltei atrás."
            name="Camila S." role="Afiliada full-time" tint="bg-gradient-to-br from-gold to-brand" />
        </div>
      </section>

      {/* SEGURANÇA / TRUST */}
      <section className="border-t border-edge bg-[#0c0c0c]">
        <div className="mx-auto max-w-5xl px-5 py-16 lg:py-20">
          <div className="grid items-center gap-10 lg:grid-cols-[0.9fr_1.1fr]">
            <div>
              <span className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/10 text-brand"><LShield size={24} /></span>
              <h2 className="text-balance font-syne text-3xl font-extrabold tracking-tight text-white">Suas chaves de API, blindadas.</h2>
              <p className="mt-4 text-pretty leading-relaxed text-zinc-400">
                Seus tokens são usados apenas durante a sua sessão e <span className="text-zinc-200">nunca ficam salvos</span> nos nossos servidores. A comunicação é criptografada de ponta a ponta e você revoga o acesso quando quiser. Sem letras miúdas, sem dados vendidos — transparência total, do começo ao fim.
              </p>
            </div>
            <div className="grid gap-3 sm:grid-cols-1">
              {[
                { icon: LLock, title: 'Criptografia de ponta a ponta', text: 'Todo o tráfego entre você e o AchaMais é cifrado.' },
                { icon: LShield, title: 'Tokens nunca armazenados', text: 'Suas chaves vivem só na memória da sessão e somem ao sair.' },
                { icon: LCheck, title: 'Você no controle', text: 'Revogue o acesso a qualquer momento, sem burocracia.' },
              ].map((t) => (
                <div key={t.title} className="flex items-start gap-4 rounded-2xl border border-edge bg-panel p-5">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-brand"><t.icon size={19} /></span>
                  <div>
                    <h3 className="font-semibold text-white">{t.title}</h3>
                    <p className="mt-0.5 text-sm text-zinc-400">{t.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="border-t border-edge">
        <div className="relative mx-auto max-w-6xl overflow-hidden px-5 py-20 text-center">
          <div className="pointer-events-none absolute inset-0 -z-10 opacity-20 blur-[120px]"
            style={{ background: 'radial-gradient(40% 60% at 50% 50%, rgba(22,191,163,.6), transparent 70%)' }} />
          <h2 className="mx-auto max-w-2xl text-balance font-syne text-3xl font-extrabold tracking-tight text-white sm:text-4xl">A próxima venda pode pagar o dobro. Descubra qual link divulgar.</h2>
          <p className="mx-auto mt-3 max-w-xl text-zinc-400">Comece seu teste grátis hoje e sinta a diferença já na primeira busca.</p>
          <div className="mt-8 flex justify-center">
            <LBtn onClick={onStart}>Começar minha automação agora <LArrow size={18} /></LBtn>
          </div>
        </div>
      </section>

      <LFooter />
    </div>
  );
}

Object.assign(window, { Landing });