/* NINA — landing pública + entrada (registro/OTP). Reusa data, icons, components, charts.
   Marca (nome/logos/accent) e preço vêm da API real; dados de demo (chat/gráfico) seguem mock. */
const { useState: lUS, useEffect: lUE, useRef: lUR } = React;
const L = () => window.NinaData;
const LANDING_API = window.NINA_API_BASE || '/api';

/* ====================== CHAT DEMO (bolhas estilo WhatsApp) ====================== */
const CHAT_SCRIPT = [
  { who: 'me', text: 'almoço 32 no crédito', t: '12:04' },
  { who: 'nina', text: 'Anotado! 🍔 R$ 32,00 em Restaurantes, no crédito. Esse mês você já está em R$ 480 com comida fora.', t: '12:04' },
  { who: 'me', kind: 'img', t: '15:20' },
  { who: 'nina', kind: 'card', t: '15:20' },
  { who: 'nina', text: 'Li o comprovante e registrei pra você. Quer que eu crie um teto pra Mercado? 🧡', t: '15:20' },
];
function ChatDemo({ mark }) {
  const [shown, setShown] = lUS(0);
  const [typing, setTyping] = lUS(false);
  const ref = lUR(null);
  const bodyRef = lUR(null);
  lUE(() => {
    let i = 0, timers = [];
    const run = () => {
      if (i >= CHAT_SCRIPT.length) { timers.push(setTimeout(() => { i = 0; setShown(0); run(); }, 4200)); return; }
      const msg = CHAT_SCRIPT[i];
      if (msg.who === 'nina') {
        setTyping(true);
        timers.push(setTimeout(() => { setTyping(false); setShown(i + 1); i++; run(); }, 1100));
      } else { setShown(i + 1); i++; timers.push(setTimeout(run, 900)); }
    };
    const io = new IntersectionObserver((e) => { if (e[0].isIntersecting) { run(); io.disconnect(); } }, { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    timers.push(setTimeout(() => { if (shown === 0) run(); }, 600));
    return () => { timers.forEach(clearTimeout); io.disconnect(); };
  }, []);
  // keep newest message in view (chat scrolls inside the fixed phone)
  lUE(() => { const el = bodyRef.current; if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' }); }, [shown, typing]);
  return (
    <div className="phone" ref={ref}>
      <div className="phone__notch" />
      <div className="phone__screen">
        <div className="wa-header">
          <Icon name="chevronL" size={22} style={{ color: '#54656f' }} />
          <img src={mark} alt="" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="wa-header__name">{L().config.projectName} <span className="wa-verified"><Icon name="check" size={9} /></span></div>
            <div className="wa-header__status">online</div>
          </div>
          <Icon name="camera" size={18} style={{ color: '#54656f' }} />
          <Icon name="menu" size={18} style={{ color: '#54656f' }} />
        </div>
        <div className="chat-body" ref={bodyRef}>
          <div className="chat-day">HOJE</div>
          {CHAT_SCRIPT.slice(0, shown).map((m, i) => {
            if (m.kind === 'img') return (
              <div key={i} className="bubble bubble--me bubble--img">
                <div className="receipt"><div style={{ width: '60%' }} /><div style={{ width: '85%' }} /><div style={{ width: '45%' }} /><div style={{ width: '70%', marginTop: 'auto', background: 'var(--coral-tint)' }} /></div>
                <div className="bubble__time">{m.t} ✓✓</div>
              </div>
            );
            if (m.kind === 'card') return (
              <div key={i} className="bubble bubble--nina bubble--card">
                <div className="mini-tx"><span className="mini-tx__ic">🛒</span><div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 13 }}>Mercado</div><div style={{ fontSize: 11, color: 'var(--subtle)' }}>Pão de Açúcar · crédito</div></div><div className="tnum" style={{ fontWeight: 700, fontSize: 13 }}>R$ 137,90</div></div>
              </div>
            );
            return (
              <div key={i} className={`bubble ${m.who === 'me' ? 'bubble--me' : 'bubble--nina'}`}>
                {m.text}<div className="bubble__time">{m.t}{m.who === 'me' ? ' ✓✓' : ''}</div>
              </div>
            );
          })}
          {typing && <div className="bubble bubble--nina bubble--typing"><span className="typing"><span></span><span></span><span></span></span></div>}
        </div>
        <div className="wa-input">
          <div className="wa-input__box">Mensagem</div>
          <span className="wa-input__send"><Icon name="mic" size={17} /></span>
        </div>
      </div>
    </div>
  );
}

/* ====================== LANDING ====================== */
function Landing() {
  const cfg = L().config;
  const brand = cfg.projectName;
  const wa = `https://wa.me/${cfg.contact.whatsapp}`;
  const [openFaq, setOpenFaq] = lUS(0);
  // pricing vem da API real (preço/trial nunca fixo na UI)
  const [pricing, setPricing] = lUS(null);
  lUE(() => {
    let alive = true;
    fetch(LANDING_API + '/pricing').then((r) => r.json()).then((d) => { if (alive) setPricing(d); }).catch(() => {});
    return () => { alive = false; };
  }, []);

  const features = [
    ['message', 'var(--coral)', 'Registre por texto', 'Manda “uber 18 no Pix” e eu já anoto, categorizo e somo. Sem planilha, sem app pesado.'],
    ['mic', 'var(--info)', 'Fale por áudio', 'Sem tempo de digitar? Manda um áudio que eu transcrevo e registro tudo certinho.'],
    ['camera', 'var(--amber)', 'Foto do comprovante', 'Tira foto da nota ou do Pix que eu leio os valores e lanço automaticamente.'],
    ['target', 'var(--mint-strong)', 'Orçamentos', 'Define um teto por categoria e eu te aviso, com carinho, quando você chega perto.'],
    ['calendar', 'var(--coral)', 'Contas & lembretes', 'Eu lembro dos vencimentos e dos seus compromissos antes da hora — no WhatsApp.'],
    ['sparkle', 'var(--coral-strong)', 'Recados da Nina', 'Toda semana, um resumo gentil de pra onde foi seu dinheiro e o que dá pra melhorar.'],
  ];
  const faqs = [
    ['Preciso instalar algum app?', 'Não! Eu vivo no WhatsApp que você já usa. Tem também um painel na web e um app pra iPhone, mas dá pra fazer tudo só pela conversa.'],
    ['Como funciona o teste grátis?', `Você usa tudo por ${pricing ? pricing.trialDays : 7} dias sem pagar nada e sem cadastrar cartão. Se gostar, assina por ${pricing ? pricing.plan.priceFmt : '—'} por mês. Se não, é só parar.`],
    ['Meus dados estão seguros?', 'Sim. Seus dados são seus: você pode exportar tudo ou apagar sua conta quando quiser, seguindo a LGPD. Eu nunca compartilho nada.'],
    ['Como eu pago?', 'Por Pix, direto pela conversa ou pelo painel. A confirmação é automática e na hora.'],
    ['A Nina entende gírias e o jeito brasileiro de falar?', 'Entendo sim 🧡 Pode falar “rachei a conta”, “paguei fiado”, “caiu o salário” — eu fui feita pra conversar como gente.'],
  ];

  return (
    <div>
      {/* NAV */}
      <nav className="lp-nav">
        <a href="#inicio" className="lp-nav__brand" style={{ textDecoration: 'none', color: 'inherit' }}>
          <img src={cfg.logos.mark} alt="" /><span>{brand}</span>
        </a>
        <div className="lp-nav__links">
          <a href="#como" className="lp-nav__link hide-xs">Como funciona</a>
          <a href="#recursos" className="lp-nav__link hide-xs">Recursos</a>
          <a href="#planos" className="lp-nav__link hide-xs">Planos</a>
          <a href="entrada.html#login" className="lp-nav__link">Entrar</a>
          <a href="entrada.html" className="btn btn--primary" style={{ padding: '9px 16px' }}>Começar grátis</a>
        </div>
      </nav>

      <div id="inicio" className="lp">
        {/* HERO */}
        <header className="hero">
          <div className="rise">
            <span className="lp-eyebrow"><Icon name="whatsapp" size={14} /> Sua vida financeira no WhatsApp</span>
            <h1 className="hero__title">O dinheiro<br />sob controle,<br /><span className="accent">conversando.</span></h1>
            <p className="hero__sub">A {brand} é sua assistente financeira que vive no WhatsApp. Manda um texto, áudio ou foto — eu anoto, organizo e te mostro pra onde vai cada real. Sem planilha, sem julgamento.</p>
            <div className="hero__cta">
              <a href={wa} className="btn btn--whats btn--lg" target="_blank" rel="noopener"><Icon name="whatsapp" /> Falar com a {brand}</a>
              <a href="entrada.html" className="btn btn--secondary btn--lg">Começar grátis</a>
            </div>
            <div className="hero__trust">
              <span><b>7 dias grátis</b> · sem cartão</span>
              <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--subtle)' }} />
              <span>+9 mil pessoas organizando a vida</span>
            </div>
          </div>
          <ChatDemo mark={cfg.logos.mark} />
        </header>

        {/* METRICS */}
        <div className="metrics rise">
          {[['9 mil+', 'pessoas usando'], ['R$ 12 mi', 'organizados por mês'], ['3 jeitos', 'texto, áudio e foto'], ['4,9 ★', 'avaliação média']].map(([v, l]) => (
            <div className="metric" key={l}><div className="metric__v tnum">{v}</div><div className="metric__l">{l}</div></div>
          ))}
        </div>

        {/* COMO FUNCIONA */}
        <section id="como" className="lp-section lp-center">
          <span className="lp-eyebrow">Como funciona</span>
          <h2 className="lp-h2">Três passos. Um minuto.</h2>
          <p className="lp-lead">Você fala do seu jeito. Eu cuido do resto.</p>
          <div className="steps" style={{ marginTop: 48, textAlign: 'left' }}>
            {[['message', 'Me conta o gasto', 'Texto, áudio ou foto do comprovante. Do jeito que for mais fácil pra você naquele momento.'],
              ['sparkle', 'Eu organizo', 'Categorizo, somo e guardo tudo — entendendo o jeito brasileiro de falar de dinheiro.'],
              ['activity', 'Você enxerga tudo', 'Gráficos claros, lembretes na hora certa e recados gentis pra te ajudar a sobrar mais.']].map(([ic, t, d], i) => (
              <div className="step" key={t}><span className="step__n">{i + 1}</span><span className="step__ic"><Icon name={ic} size={24} /></span><h3 className="step__t">{t}</h3><p className="step__d">{d}</p></div>
            ))}
          </div>
        </section>

        {/* PROOF (gráficos protagonistas) */}
        <section className="lp-section">
          <div className="proof">
            <div>
              <span className="lp-eyebrow">Gráficos que falam</span>
              <h2 className="lp-h2">Veja pra onde<br />vai o seu dinheiro.</h2>
              <p className="lp-lead">Nada de tabelas frias. Eu transformo seus gastos em imagens fáceis de entender — por categoria, por método, ao longo do mês.</p>
              <a href="entrada.html" className="btn btn--primary btn--lg" style={{ marginTop: 24 }}>Quero ver o meu <Icon name="chevronR" /></a>
            </div>
            <div className="proof__card">
              <div className="row between" style={{ marginBottom: 18 }}>
                <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18 }}>Junho</div><div className="subtle" style={{ fontSize: 13 }}>seus gastos por categoria</div></div>
                <span className="pill pill--coral">−12% vs maio</span>
              </div>
              <BarsByCategory data={L().overview('mes').byCategory.slice(0, 5)} />
            </div>
          </div>
        </section>

        {/* RECURSOS */}
        <section id="recursos" className="lp-section lp-center">
          <span className="lp-eyebrow">Tudo num lugar só</span>
          <h2 className="lp-h2">Mais que anotar gastos.</h2>
          <p className="lp-lead">Uma assistente completa pra sua vida financeira — e pra sua rotina.</p>
          <div className="features" style={{ marginTop: 48, textAlign: 'left' }}>
            {features.map(([ic, color, t, d]) => (
              <div className="feature" key={t}>
                <span className="feature__ic" style={{ background: 'color-mix(in srgb, ' + color + ' 16%, white)', color }}><Icon name={ic} size={22} /></span>
                <h3 className="feature__t">{t}</h3><p className="feature__d">{d}</p>
              </div>
            ))}
          </div>
        </section>

        {/* PLANOS — preço da API */}
        <section id="planos" className="lp-section lp-center">
          <span className="lp-eyebrow">Planos</span>
          <h2 className="lp-h2">Simples e justo.</h2>
          <p className="lp-lead">Teste sem compromisso. Cancele quando quiser.</p>
          <div style={{ marginTop: 40 }}>
            {!pricing ? (
              <div className="price-card"><div className="price-card__head"><Sk w="40%" h={16} style={{ margin: '0 auto 14px' }} /><Sk w="55%" h={48} style={{ margin: '0 auto' }} /></div>
                <div className="price-card__body">{[0, 1, 2, 3].map((i) => <Sk key={i} w="80%" style={{ margin: '12px 0' }} />)}</div></div>
            ) : (
              <div className="price-card rise">
                <div className="price-card__head">
                  <div className="price-card__name"><Icon name="crown" size={15} /> Plano {pricing.plan.name}</div>
                  <div className="price-card__val tnum">{pricing.plan.priceFmt}</div>
                  <div className="price-card__per">por {pricing.plan.period} · cancele quando quiser</div>
                  <div className="price-card__trial">🎁 {pricing.trialDays} dias grátis{pricing.needsCard ? '' : ' · sem cartão'}</div>
                </div>
                <div className="price-card__body">
                  {pricing.perks.map((p) => <div className="price-perk" key={p}><Icon name="check" size={18} />{p}</div>)}
                  <a href="entrada.html" className="btn btn--primary btn--lg btn--block" style={{ marginTop: 20 }}>Começar {pricing.trialDays} dias grátis</a>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* FAQ */}
        <section className="lp-section">
          <div className="lp-center" style={{ marginBottom: 40 }}><span className="lp-eyebrow">Perguntas</span><h2 className="lp-h2">Tudo que você quer saber.</h2></div>
          <div className="faq">
            {faqs.map(([q, a], i) => (
              <div className={`faq-item ${openFaq === i ? 'open' : ''}`} key={q}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>{q}<Icon name="plus" size={20} /></button>
                <div className="faq-a"><p>{a}</p></div>
              </div>
            ))}
          </div>
        </section>

        {/* CTA FINAL */}
        <section className="lp-section">
          <div className="cta-band">
            <div className="cta-band__glow" />
            <div style={{ position: 'relative' }}>
              <h2>Bora organizar sua vida<br />financeira hoje?</h2>
              <p>Leva um minuto. E eu fico com você o tempo todo. 🧡</p>
              <div className="row" style={{ gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <a href={wa} className="btn btn--lg" style={{ background: '#fff', color: 'var(--coral-strong)' }} target="_blank" rel="noopener"><Icon name="whatsapp" /> Falar com a {brand}</a>
                <a href="entrada.html" className="btn btn--lg" style={{ background: 'rgba(255,255,255,0.16)', color: '#fff', border: '1px solid rgba(255,255,255,0.4)' }}>Começar grátis</a>
              </div>
            </div>
          </div>
        </section>
      </div>

      {/* FOOTER */}
      <footer className="lp-footer">
        <div className="lp">
          <div className="lp-footer__grid">
            <div style={{ maxWidth: 280 }}>
              <div className="lp-nav__brand" style={{ marginBottom: 12 }}><img src={cfg.logos.mark} alt="" /><span>{brand}</span></div>
              <p className="subtle" style={{ fontSize: 14, margin: 0 }}>Sua assistente financeira no WhatsApp. Feita com calor humano, no Brasil.</p>
              <a href="#" className="ios-badge" style={{ marginTop: 16 }}><Icon name="sparkle" size={15} /> Baixar no iPhone</a>
            </div>
            <div className="lp-footer__links">
              <a href="#como">Como funciona</a><a href="#recursos">Recursos</a><a href="#planos">Planos</a>
              <a href="legal.html#privacidade">Privacidade</a><a href="legal.html#termos">Termos</a><a href={`mailto:${cfg.contact.email}`}>Suporte</a>
            </div>
          </div>
          <div className="subtle" style={{ fontSize: 13, marginTop: 32 }}>© 2026 {brand} · {cfg.contact.instagram} · {cfg.contact.site}</div>
        </div>
      </footer>
    </div>
  );
}

// White-label: busca marca real (nome/logos/paleta) antes de montar, evitando flash.
(async () => {
  try {
    const r = await fetch(LANDING_API + '/config');
    if (r.ok) {
      const cfg = await r.json();
      const nd = window.NinaData;
      nd.config.projectName = cfg.projectName || nd.config.projectName;
      if (cfg.contact) Object.assign(nd.config.contact, cfg.contact);
      if (cfg.logos) Object.assign(nd.config.logos, {
        mark: cfg.logos.mark || nd.config.logos.mark,
        lockup: cfg.logos.lockup || nd.config.logos.lockup,
      });
      if (cfg.palette && cfg.palette.accent) {
        window.applyNinaPalette({ accent: cfg.palette.accent, strong: cfg.palette.accent, tint: cfg.palette.accent + '22' });
      }
      if (cfg.logos && cfg.logos.favicon) {
        const l = document.querySelector('link[rel=icon]'); if (l) l.href = cfg.logos.favicon;
      }
      document.title = (cfg.projectName || 'Nina') + ' — sua assistente financeira no WhatsApp';
    }
  } catch (e) { /* segue com o default */ }
  ReactDOM.createRoot(document.getElementById('root')).render(<Landing />);
})();