// Hero section — landing Ezza CRM
// Headline editorial + mockup vivo do dashboard rotacionado + floating notifs

const { useState: useHeroState, useEffect: useHeroEffect } = React;

const lpAvatar = (i) => `https://i.pravatar.cc/120?img=${i}`;

// ─── icons inline ───
const lpICN = {
  arrowRight: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  arrowLeft:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>,
  check:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  x:          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  play:       <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>,
  sparkle:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4"/></svg>,
  bolt:       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
  whatsapp:   <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.003 0C7.165 0 .003 7.163.003 16c0 2.825.738 5.477 2.027 7.778L0 32l8.45-2.21A15.93 15.93 0 0 0 16.003 32C24.838 32 32 24.837 32 16S24.838 0 16.003 0Zm0 29.092a13.06 13.06 0 0 1-6.66-1.823l-.477-.284-4.97 1.3 1.327-4.844-.31-.497A13.04 13.04 0 0 1 2.91 16C2.91 8.78 8.78 2.91 16.003 2.91S29.094 8.78 29.094 16c0 7.222-5.87 13.092-13.09 13.092Zm7.227-9.798c-.396-.198-2.343-1.157-2.706-1.29-.363-.132-.627-.198-.89.198-.265.397-1.022 1.29-1.252 1.555-.23.264-.46.298-.857.1-.396-.198-1.674-.617-3.189-1.97-1.18-1.052-1.975-2.352-2.207-2.748-.23-.397-.025-.612.174-.81.179-.178.397-.464.595-.696.198-.232.265-.397.397-.661.132-.265.066-.497-.033-.696-.099-.198-.89-2.146-1.22-2.94-.322-.772-.647-.668-.89-.68a16.85 16.85 0 0 0-.76-.014c-.265 0-.694.099-1.057.497-.363.397-1.386 1.353-1.386 3.3 0 1.95 1.42 3.83 1.617 4.094.198.265 2.793 4.265 6.766 5.98.947.409 1.685.652 2.26.835.95.302 1.815.26 2.5.158.762-.114 2.343-.957 2.674-1.88.331-.926.331-1.72.232-1.88-.1-.165-.363-.265-.76-.463Z"/></svg>,
  trendUp:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>,
};

// ─── NAVBAR ───
function LpNav({ onPrimary, onLogin }) {
  return (
    <nav className="lp-nav">
      <div className="lp-container lp-nav-inner">
        <div className="lp-nav-brand">
          <img src="assets/ezza-logo.png" alt="" />
          <span>ezza<em>CRM</em></span>
        </div>

        <div className="lp-nav-links">
          <a className="lp-nav-link" href="#produto">Produto</a>
          <a className="lp-nav-link" href="#funciona">Como funciona</a>
          <a className="lp-nav-link" href="#clientes">Clientes</a>
          <a className="lp-nav-link" href="#precos">Preços</a>
          <a className="lp-nav-link" href="#faq">FAQ</a>
        </div>

        <div className="lp-nav-actions">
          <button className="lp-nav-login" onClick={onLogin}>Entrar</button>
          <button className="lp-nav-cta" onClick={onPrimary}>
            Iniciar grátis {lpICN.arrowRight}
          </button>
        </div>
      </div>
    </nav>
  );
}

// ─── HERO ───
function LpHero({ onDemo, onTalkSales }) {
  return (
    <header className="hero">
      <div className="hero-blob hero-blob-1" />
      <div className="hero-blob hero-blob-2" />
      <div className="hero-blob hero-blob-3" />

      <div className="lp-container hero-inner">
        <div className="hero-text">
          <div className="hero-tag">
            <span className="hero-tag-badge">NOVO</span>
            <span>WhatsApp integrado nativo</span>
            <span style={{color:'var(--ink-muted)', margin:'0 4px'}}>→</span>
          </div>

          <h1 className="hero-title">
            Receita previsível,<br/>
            <em>em português claro.</em>
          </h1>

          <p className="hero-sub">
            O CRM brasileiro que junta pipeline, atendimento e automação numa coisa só.
            Para times que vendem muito e odeiam planilha.
          </p>

          <div className="hero-ctas">
            <button className="lp-btn" onClick={onDemo}>
              Iniciar demo gratuita {lpICN.arrowRight}
            </button>
            <button className="lp-btn lp-btn-ghost" onClick={onTalkSales}>
              {lpICN.whatsapp} Falar com a gente
            </button>
          </div>

          <div className="hero-stats">
            <div className="hero-stat">
              <div className="hero-stat-n">500+</div>
              <div className="hero-stat-l">times comerciais<br/>usando ativamente</div>
            </div>
            <div className="hero-stat-divider" />
            <div className="hero-stat">
              <div className="hero-stat-n">R$ 4,2bi</div>
              <div className="hero-stat-l">em pipeline<br/>gerenciado em 2026</div>
            </div>
            <div className="hero-stat-divider" />
            <div className="hero-stat">
              <div className="hero-stat-n">4,9<span style={{fontSize:18, opacity:.6}}>★</span></div>
              <div className="hero-stat-l">no Capterra<br/>(312 reviews)</div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <HeroMockup />
          <FloatingNotif
            kind="ok"
            title="Ana Beatriz fechou um negócio"
            sub="Tecnoluz Solar · R$ 482k"
            className="hero-notif-1"
          />
          <FloatingNotif
            kind="wa"
            title="Bruno respondeu no WhatsApp"
            sub="“Bom dia, podemos marcar amanhã?”"
            className="hero-notif-2"
          />
        </div>
      </div>
    </header>
  );
}

function HeroMockup() {
  return (
    <div className="hero-mockup">
      <div className="hero-mk-bar">
        <div className="hero-mk-dots"><span/><span/><span/></div>
        <div className="hero-mk-tab">Pipeline · Maio</div>
        <div className="hero-mk-bar-right">
          <span className="hero-mk-pill">+12% vs mês anterior</span>
        </div>
      </div>

      <div className="hero-mk-body">
        <div className="hero-mk-stats-row">
          <div className="hero-mk-stat">
            <div className="hero-mk-stat-lbl">Receita</div>
            <div className="hero-mk-stat-val">R$ 1,98M</div>
            <div className="hero-mk-stat-delta">↑ +12%</div>
          </div>
          <div className="hero-mk-stat">
            <div className="hero-mk-stat-lbl">Deals</div>
            <div className="hero-mk-stat-val">76</div>
            <div className="hero-mk-stat-delta">↑ +8</div>
          </div>
          <div className="hero-mk-stat hero-mk-stat-hl">
            <div className="hero-mk-stat-lbl">Conversão</div>
            <div className="hero-mk-stat-val">32,4%</div>
            <div className="hero-mk-stat-delta">↑ +5,8pp</div>
          </div>
        </div>

        <div className="hero-mk-chart">
          <div className="hero-mk-chart-bars">
            {[20,28,22,38,30,46,42,52,48,62,58,70,66,82].map((h, i) => (
              <div key={i} style={{
                height: `${h}%`,
                background: i === 13 ? 'var(--ink)' : i % 4 === 0 ? 'var(--acc-pink)' : i % 4 === 1 ? 'var(--acc-yellow)' : i % 4 === 2 ? 'var(--acc-mint)' : 'var(--acc-blue)',
                animationDelay: `${i * 60}ms`,
              }} />
            ))}
          </div>
        </div>

        <div className="hero-mk-funnel">
          {[
            { lbl: 'Qualificado', pct: 92, val: 'R$ 920k', c: 'oklch(0.78 0.10 250)' },
            { lbl: 'Proposta',    pct: 67, val: 'R$ 670k', c: 'oklch(0.88 0.13 95)'  },
            { lbl: 'Negociação',  pct: 48, val: 'R$ 482k', c: 'oklch(0.82 0.09 18)'  },
            { lbl: 'Fechado',     pct: 28, val: 'R$ 282k', c: 'oklch(0.88 0.08 160)' },
          ].map((s, i) => (
            <div key={i} className="hero-mk-funnel-row">
              <span className="hero-mk-funnel-lbl">{s.lbl}</span>
              <div className="hero-mk-funnel-bar">
                <div className="hero-mk-funnel-fill" style={{ width: `${s.pct}%`, background: s.c, animationDelay: `${0.6 + i*0.15}s` }} />
              </div>
              <span className="hero-mk-funnel-val">{s.val}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function FloatingNotif({ kind, title, sub, className }) {
  return (
    <div className={`hero-notif ${className}`}>
      <div className={`hero-notif-ic hero-notif-ic-${kind}`}>
        {kind === 'ok' ? '✓' : lpICN.whatsapp}
      </div>
      <div>
        <div className="hero-notif-t">{title}</div>
        <div className="hero-notif-s">{sub}</div>
      </div>
    </div>
  );
}

Object.assign(window, { LpNav, LpHero, lpICN, lpAvatar });