/* Nina website — landing sections. Exports to window. */
const { useState: useStateS } = React;

function Nav({ onEnter, onLogin }) {
  useLucide();
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(255,251,245,0.85)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Logo height={34} />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <a href="#recursos" style={{ display: 'none' }}></a>
          <Button variant="ghost" size="sm" onClick={onLogin}>Entrar</Button>
          <Button variant="whatsapp" size="sm" iconRight="arrow-right" onClick={onEnter}><span className="nav-cta-label">Começar grátis</span></Button>
        </nav>
      </div>
    </header>
  );
}

function ChatThread({ msgs, compact }) {
  useLucide();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {msgs.map((m, i) => m.from === 'user' ? (
        <div key={i} style={{ alignSelf: 'flex-end', maxWidth: '78%', background: '#D9FDD3', borderRadius: 16, borderBottomRightRadius: 5, padding: '9px 13px', fontSize: compact ? 14 : 15, lineHeight: 1.45, boxShadow: '0 1px 1px rgba(0,0,0,.06)' }}>{m.text}</div>
      ) : (
        <div key={i} style={{ alignSelf: 'flex-start', maxWidth: '82%', display: 'flex', gap: 8, alignItems: 'flex-end' }}>
          <NinaAvatar size={26} />
          <div style={{ background: '#fff', borderRadius: 16, borderBottomLeftRadius: 5, padding: '9px 13px', fontSize: compact ? 14 : 15, lineHeight: 1.45, boxShadow: '0 1px 1px rgba(0,0,0,.06)' }} dangerouslySetInnerHTML={{ __html: m.text }} />
        </div>
      ))}
    </div>
  );
}

function ChatPhone({ msgs }) {
  return (
    <div style={{ background: '#ECE5DD', borderRadius: 28, padding: 18, boxShadow: 'var(--shadow-lg)', border: '6px solid #fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12, marginBottom: 12, borderBottom: '1px solid rgba(0,0,0,.06)' }}>
        <NinaAvatar size={36} variant="mark" />
        <div><div style={{ fontWeight: 700, fontSize: 14 }}>{window.NN()}</div><div style={{ fontSize: 11, color: '#25D366', fontWeight: 600 }}>online</div></div>
      </div>
      <ChatThread msgs={msgs} compact />
    </div>
  );
}

function Hero({ onEnter, onLogin }) {
  return (
    <Section style={{ paddingTop: 64, paddingBottom: 72, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -120, right: -120, width: 360, height: 360, borderRadius: '50%', background: 'var(--grad-warm)', opacity: 0.18, filter: 'blur(20px)' }}></div>
      <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        <div className="nina-page-rise">
          <Pill tone="coral" dot>Seu dinheiro, sem planilha</Pill>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(34px, 8vw, 52px)', lineHeight: 1.12, letterSpacing: '-0.02em', margin: '18px 0 22px', color: 'var(--ink)' }}>
            Sua vida financeira, organizada num <span style={{ color: 'var(--coral)' }}>oi</span> no WhatsApp.
          </h1>
          <p style={{ fontSize: 'clamp(16px, 2.4vw, 19px)', lineHeight: 1.5, color: 'var(--muted)', maxWidth: 460, margin: '0 0 28px' }}>
            Me manda seu gasto por texto, áudio ou foto do comprovante. Eu organizo, te lembro das contas e mostro pra onde seu dinheiro tá indo — com calma e sem julgamento.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={onEnter}>Começar grátis</Button>
            <Button variant="secondary" size="lg" icon="log-in" onClick={onLogin}>Já tenho conta</Button>
          </div>
          <p style={{ fontSize: 13, color: 'var(--subtle)', marginTop: 16 }}>7 dias grátis · sem cartão · cancela quando quiser</p>
        </div>
        <ChatPhone msgs={[
          { from: 'user', text: 'gastei 132 no mercado 🛒' },
          { from: 'nina', text: 'Anotei! R$ 132,40 em <b>Alimentação</b>. Seu saldo do mês: <b>R$ 1.247,60</b>.' },
          { from: 'user', text: 'quanto gastei com comida esse mês?' },
          { from: 'nina', text: 'Você gastou <b>R$ 840,00</b> em Alimentação 🍽️ — 12% menos que abril. Mandou bem!' },
        ]} />
      </div>
    </Section>
  );
}

function HowItWorks() {
  useLucide();
  const steps = [
    { icon: 'message-square-text', t: 'Manda pra ' + window.NN(), d: 'Texto, áudio ou foto do comprovante. Do seu jeito, na hora que rolar.' },
    { icon: 'sparkles', t: 'Ela organiza', d: 'A ' + window.NN() + ' entende, categoriza e guarda tudo — sem você abrir planilha nenhuma.' },
    { icon: 'trending-up', t: 'Você entende', d: 'Relatórios em imagem, lembretes de contas e uma visão clara do mês.' },
  ];
  return (
    <Section warm id="como-funciona">
      <h2 className="nina-reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(26px, 5vw, 36px)', letterSpacing: '-0.01em', textAlign: 'center', margin: '0 0 8px' }}>Como funciona</h2>
      <p className="nina-reveal" style={{ textAlign: 'center', color: 'var(--muted)', fontSize: 17, margin: '0 0 44px' }}>Três passos. Nenhuma planilha.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }} className="cols-3">
        {steps.map((s, i) => (
          <div key={i} className="nina-reveal nina-lift" style={{ background: 'var(--surface)', borderRadius: 20, padding: 28, boxShadow: 'var(--shadow-sm)', border: '1px solid var(--line)', transitionDelay: (i * 80) + 'ms' }}>
            <div style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--coral-tint)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name={s.icon} size={26} color="var(--coral-strong)" />
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--subtle)', marginBottom: 4 }}>0{i + 1}</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, margin: '0 0 8px' }}>{s.t}</h3>
            <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.5, margin: 0 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Features() {
  useLucide();
  const feats = [
    { icon: 'type', t: 'Por texto', d: 'Escreve do seu jeito: "almoço 32".' },
    { icon: 'mic', t: 'Por áudio', d: 'Manda um áudio que a ' + window.NN() + ' transcreve.' },
    { icon: 'camera', t: 'Foto do comprovante', d: 'Tira foto da nota e ela lê os valores.' },
    { icon: 'image', t: 'Relatório em imagem', d: 'Receba um resumo bonito do mês.' },
    { icon: 'bell', t: 'Lembretes', d: 'Avisos de contas antes do vencimento.' },
    { icon: 'lightbulb', t: 'Insights', d: 'Padrões e dicas, sem julgar.' },
  ];
  return (
    <Section id="recursos">
      <h2 className="nina-reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(26px, 5vw, 36px)', letterSpacing: '-0.01em', textAlign: 'center', margin: '0 0 44px' }}>Tudo dentro do WhatsApp</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="cols-3">
        {feats.map((f, i) => (
          <div key={i} className="nina-reveal" style={{ display: 'flex', gap: 14, padding: '6px 4px', transitionDelay: (i * 60) + 'ms' }}>
            <div style={{ width: 44, height: 44, borderRadius: 14, background: 'var(--surface-warm)', display: 'grid', placeItems: 'center', flex: 'none' }}>
              <Icon name={f.icon} size={22} color="var(--coral-strong)" />
            </div>
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, margin: '2px 0 4px' }}>{f.t}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 14.5, lineHeight: 1.5, margin: 0 }}>{f.d}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Demo() {
  return (
    <Section warm>
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }} className="hero-grid">
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(26px, 5vw, 34px)', letterSpacing: '-0.01em', margin: '0 0 14px' }}>Conversa de verdade, não formulário</h2>
          <p style={{ color: 'var(--muted)', fontSize: 17, lineHeight: 1.5, margin: 0 }}>
            A {window.NN()} fala como gente: na primeira pessoa, calorosa e sem jargão. Pergunta o que quiser sobre seu dinheiro — ela responde na hora.
          </p>
        </div>
        <ChatPhone msgs={[
          { from: 'nina', text: 'Oi! 👋 Já organizei sua semana. Quer ver o resumo?' },
          { from: 'user', text: 'pode mandar' },
          { from: 'nina', text: 'Entrou <b>R$ 4.200</b> e saiu <b>R$ 2.952</b>. Sobrou <b>R$ 1.248</b> 🙂' },
          { from: 'user', text: 'me lembra da fatura dia 10' },
          { from: 'nina', text: 'Combinado! Te aviso no dia 9 e no dia 10. ✓' },
        ]} />
      </div>
    </Section>
  );
}

function Plans({ onEnter }) {
  useLucide();
  const proFeats = ['Texto, áudio e foto', 'Relatórios em imagem', 'Lembretes de contas', 'Insights do mês', 'Suporte pelo WhatsApp'];
  return (
    <Section id="planos">
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(26px, 5vw, 36px)', letterSpacing: '-0.01em', textAlign: 'center', margin: '0 0 8px' }}>Simples como deve ser</h2>
      <p style={{ textAlign: 'center', color: 'var(--muted)', fontSize: 17, margin: '0 0 44px' }}>Comece grátis. Continue por menos que um café.</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 760, margin: '0 auto' }} className="cols-2">
        <div className="nina-reveal" style={{ background: 'var(--surface)', borderRadius: 20, padding: 28, border: '1px solid var(--line)', boxShadow: 'var(--shadow-sm)' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, margin: 0 }}>Trial</h3>
          <div style={{ fontSize: 36, fontWeight: 700, margin: '10px 0 2px' }}>Grátis</div>
          <p style={{ color: 'var(--muted)', fontSize: 14, margin: '0 0 20px' }}>7 dias · sem cartão</p>
          <Button variant="secondary" full onClick={onEnter}>Começar agora</Button>
        </div>
        <div className="nina-reveal" style={{ background: 'var(--surface)', borderRadius: 20, padding: 28, border: '2px solid var(--coral)', boxShadow: 'var(--shadow-md)', position: 'relative', transitionDelay: '80ms' }}>
          <span style={{ position: 'absolute', top: -12, right: 22, background: 'var(--coral-strong)', color: '#fff', fontSize: 11, fontWeight: 700, padding: '4px 11px', borderRadius: 999, whiteSpace: 'nowrap' }}>Popular</span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, margin: 0 }}>Pro</h3>
          <div style={{ fontSize: 36, fontWeight: 700, margin: '10px 0 2px', fontVariantNumeric: 'tabular-nums' }}>R$ 9,90<span style={{ fontSize: 15, color: 'var(--muted)', fontWeight: 600 }}>/mês</span></div>
          <p style={{ color: 'var(--muted)', fontSize: 14, margin: '0 0 16px' }}>Renove por Pix, cancele quando quiser</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 20 }}>
            {proFeats.map((f, i) => (
              <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 14.5 }}>
                <Icon name="check" size={17} color="var(--mint-strong)" /> {f}
              </div>
            ))}
          </div>
          <Button variant="primary" full iconRight="arrow-right" onClick={onEnter}>Começar com 7 dias grátis</Button>
        </div>
      </div>
    </Section>
  );
}

function FAQ() {
  const [open, setOpen] = useStateS(0);
  useLucide();
  const qs = [
    { q: 'Preciso instalar algum app?', a: 'Não! A ' + window.NN() + ' vive no WhatsApp que você já usa. É só mandar mensagem.' },
    { q: 'Meus dados ficam seguros?', a: 'Sim. Seguimos a LGPD: você pode exportar ou apagar seus dados quando quiser.' },
    { q: 'Como funciona o pagamento?', a: 'Trial de 7 dias grátis. Depois, R$ 9,90/mês via Pix. Cancela quando quiser.' },
    { q: 'A ' + window.NN() + ' entende áudio e foto?', a: 'Entende! Manda áudio que ela transcreve, ou foto do comprovante que ela lê os valores.' },
  ];
  return (
    <Section warm id="faq">
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(26px, 5vw, 36px)', letterSpacing: '-0.01em', textAlign: 'center', margin: '0 0 36px' }}>Perguntas frequentes</h2>
      <div style={{ maxWidth: 680, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {qs.map((item, i) => (
          <div key={i} style={{ background: 'var(--surface)', borderRadius: 16, border: '1px solid var(--line)', overflow: 'hidden' }}>
            <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, padding: '16px 20px', background: 'none', border: 0, cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 600, color: 'var(--ink)', textAlign: 'left' }}>
              {item.q}
              <Icon name={open === i ? 'minus' : 'plus'} size={18} color="var(--coral-strong)" />
            </button>
            {open === i && <div style={{ padding: '0 20px 18px', color: 'var(--muted)', fontSize: 15, lineHeight: 1.55 }}>{item.a}</div>}
          </div>
        ))}
      </div>
    </Section>
  );
}

function FinalCTA({ onEnter }) {
  return (
    <Section>
      <div style={{ background: 'var(--grad-warm)', borderRadius: 28, padding: '56px 32px', textAlign: 'center', boxShadow: 'var(--shadow-md)' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px, 6vw, 38px)', color: '#fff', margin: '0 0 12px', letterSpacing: '-0.01em' }}>Bora organizar seu dinheiro hoje?</h2>
        <p style={{ color: 'rgba(255,255,255,0.92)', fontSize: 18, margin: '0 0 28px' }}>Leva um minuto. Começa com um oi.</p>
        <Button variant="whatsapp" size="lg" iconRight="arrow-right" style={{ background: '#fff', color: 'var(--coral-strong)' }} onClick={onEnter}>Começar grátis</Button>
      </div>
    </Section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '40px 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
        <div>
          <Logo height={30} />
          <p style={{ color: 'var(--subtle)', fontSize: 13, margin: '12px 0 0' }}>Seu assistente financeiro no WhatsApp.</p>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 14, color: 'var(--muted)' }}>
          <a href="legal.html" style={{ color: 'inherit', textDecoration: 'none' }}>Privacidade</a>
          <a href="legal.html" style={{ color: 'inherit', textDecoration: 'none' }}>Termos</a>
          <a href="mailto:suporte@oinina.online" style={{ color: 'inherit', textDecoration: 'none' }}>suporte@oinina.online</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, ChatThread, ChatPhone, Hero, HowItWorks, Features, Demo, Plans, FAQ, FinalCTA, Footer });