// Hero + platform mockup
const PlatformMockup = () => {
  const trails = [
    { name: 'Modelagem Financeira', icon: ICalc, count: '24', active: true },
    { name: 'Valuation & M&A', icon: ITrend, count: '18' },
    { name: 'Contabilidade', icon: ILayers, count: '21' },
    { name: 'FP&A & Reporting', icon: IBarChart, count: '14' },
    { name: 'IA Aplicada', icon: ISparkles, count: '12' },
    { name: 'Python & APIs', icon: ICode, count: '9' },
    { name: 'Dashboards', icon: IGrid, count: '11' },
    { name: 'Extração de Dados', icon: IDatabase, count: '7' },
  ];
  return (
    <div className="mockup-wrap reveal">
      <div className="mockup">
        <div className="mockup-bar">
          <div className="lights"><span /><span /><span /></div>
          <div className="mockup-url">app.equityelab.com.br / trilhas / valuation</div>
          <div style={{ width: 56 }} />
        </div>
        <div className="mockup-body">
          <aside className="mockup-side">
            <div className="mockup-side-label">Trilhas</div>
            {trails.map((t, i) => {
              const I = t.icon;
              return (
                <div key={i} className={"side-item" + (t.active ? " active" : "")}>
                  <I className="ic" size={15} />
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.name}</span>
                  <span className="side-count">{t.count}</span>
                </div>
              );
            })}
          </aside>

          <main className="mockup-main">
            <div className="crumb">Trilhas / <b>Valuation & M&A</b> / Case 04</div>
            <div className="video-card">
              <div className="video-thumb">
                <div className="video-meta-overlay">
                  <span className="pill pill-dark" style={{ padding: '4px 10px', fontSize: 10 }}>
                    <span className="dot-pulse" />NOVO
                  </span>
                </div>
                <div className="play-btn"><IPlaySolid size={20} /></div>
                <div className="video-duration">42:18 / 1:08:22</div>
              </div>
              <div className="video-info">
                <h4 className="video-title">Case: Valuation Track&Field (TFCO4) — DCF completo</h4>
                <div className="video-sub">9h · 14 vídeos · construção do modelo do zero · planilha incluída</div>
              </div>
            </div>

            <div className="kpi-row">
              <div className="kpi">
                <div className="kpi-label">EV / EBITDA</div>
                <div className="kpi-val tabular">8.4x<span className="delta">+0.2</span></div>
              </div>
              <div className="kpi">
                <div className="kpi-label">WACC</div>
                <div className="kpi-val tabular">12.7%</div>
              </div>
              <div className="kpi">
                <div className="kpi-label">Preço-alvo</div>
                <div className="kpi-val tabular">R$ 9,80</div>
              </div>
            </div>
          </main>

          <aside className="mockup-feed">
            <div className="feed-head">
              <div className="feed-head-title">Feed</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span className="dot-pulse" />
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em' }}>AO VIVO</span>
              </div>
            </div>

            <div className="post">
              <div className="post-head">
                <div className="avatar" style={{ background: '#0D30A4' }}>RM</div>
                <div>
                  <div className="post-name">Renata M.</div>
                  <div className="post-role">Controller · Indústria</div>
                </div>
              </div>
              <div className="post-text">Alguém aqui já modelou cláusula de earn-out em DCF? Travei na sensibilidade do gatilho de EBITDA…</div>
              <div className="post-meta"><span>14 respostas</span><span>3h</span></div>
            </div>

            <div className="post">
              <div className="post-head">
                <div className="avatar" style={{ background: '#1F2124', border: '1px solid rgba(255,255,255,0.15)' }}>JC</div>
                <div>
                  <div className="post-name">João C.</div>
                  <div className="post-role">FP&A · SaaS</div>
                </div>
              </div>
              <div className="post-text">Fiz um prompt pro Claude reconciliar 3 DREs trimestrais em ~4min. Compartilhando o template no canal <span className="tag">#prompts</span>.</div>
              <div className="post-meta"><span>27 curtidas</span><span>6h</span></div>
            </div>

            <div className="post">
              <div className="post-head">
                <div className="avatar" style={{ background: 'rgba(173,215,246,0.18)', color: '#ADD7F6' }}>LP</div>
                <div>
                  <div className="post-name">Lucas P.</div>
                  <div className="post-role">Analista · Asset</div>
                </div>
              </div>
              <div className="post-text">Subi o modelo do case TFCO4 com premissas atualizadas pós‑release. Quem quiser comparar, anexei .xlsx</div>
              <div className="post-meta"><span>11 respostas</span><span>1d</span></div>
            </div>
          </aside>
        </div>
        <div className="mockup-fade" />
      </div>
    </div>
  );
};

const Hero = () => (
  <section className="hero grain" id="top">
    <div className="radial-blue" />
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div className="reveal-stagger" style={{ maxWidth: 820 }}>
        <span className="pill pill-dark">
          <span className="dot-pulse" />
          Comunidade para profissionais de finanças
        </span>
        <h1>
          Modelagem. Valuation. Indicadores.<br />
          Contabilidade. IA. Programação.<br />
          <span className="accent">Tudo na prática.</span>
        </h1>
        <p className="hero-sub">
          Uma plataforma para profissionais de finanças que querem aprofundar em modelagem financeira, análise de demonstrativos e valuation — usando IA como ferramenta para entregar mais rápido, com mais qualidade. Cases reais toda semana.
        </p>
        <div className="hero-actions">
          <span className="cta-pill">
            <a href="#preco" className="btn btn-primary btn-lg">
              Entrar como Fundador — R$ 129/mês <IArrow size={16} />
            </a>
          </span>
          <a href="#incluso" className="btn btn-ghost-dark btn-lg">Ver o que está incluso</a>
        </div>
        <div className="hero-microcopy">Vagas de fundador limitadas · Cancele quando quiser · Acesso imediato</div>
      </div>
      <PlatformMockup />
    </div>
  </section>
);

window.Hero = Hero;