// Problem + WhatYouGet + Trails sections

const Problem = () => (
  <section className="section-pad grain grain-light" style={{ background: 'var(--color-bg)' }}>
    <div className="container-md" style={{ position: 'relative', zIndex: 1 }}>
      <div className="reveal section-head">
        <span className="eyebrow">O contexto</span>
        <h2 className="h-section">O mercado quer profissionais completos. Não especialistas em só uma coisa.</h2>
      </div>
      <div className="problem-grid reveal-stagger">
        <article className="tension">
          <div className="tension-label">A técnica</div>
          <div className="tension-num tabular">80%</div>
          <p>dos profissionais de finanças sabem operar no dia a dia. Poucos dominam modelagem, valuation e análise de demonstrativos em profundidade. Menos ainda sabem usar IA pra acelerar tudo isso.</p>
        </article>
        <article className="tension">
          <div className="tension-label">O gap</div>
          <div className="tension-num tabular">94,3%</div>
          <p>das tarefas de finanças têm cobertura teórica de IA, segundo a Anthropic. Na prática, quem sabe usar essas ferramentas no contexto financeiro ainda é minoria — e isso é uma vantagem pra quem aprender agora.</p>
          <span className="src">Fonte: Anthropic Economic Index</span>
        </article>
        <article className="tension">
          <div className="tension-label">A oportunidade</div>
          <div className="tension-num serif" style={{ fontSize: 44, lineHeight: 1.05 }}>toda semana</div>
          <p>Cases práticos de modelagem, valuation, indicadores, M&A — com IA aplicada em cada etapa. É assim que você sai do operacional e vai pro estratégico.</p>
        </article>
      </div>
    </div>
  </section>
);

// WhatYouGet
const FeatureBlock = ({ flip, eyebrow, icon: I, title, desc, visual }) => (
  <div className={"feature-block reveal" + (flip ? " flip" : "")}>
    <div className="feature-text">
      <span className="pill pill-dark" style={{ marginBottom: 22 }}>{eyebrow}</span>
      <div className="feature-icon"><I size={20} /></div>
      <h3 className="feature-title">{title}</h3>
      <p className="feature-desc">{desc}</p>
    </div>
    <div className="feature-vis">{visual}</div>
  </div>
);

const TrailMini = () => {
  const items = [
    { name: 'Modelagem Financeira', meta: '24 vídeos', I: ICalc },
    { name: 'Valuation & M&A', meta: '18 vídeos', I: ITrend },
    { name: 'Contabilidade & Controladoria', meta: '21 vídeos', I: ILayers },
    { name: 'Python & Automações', meta: '9 vídeos', I: ICode },
    { name: 'IA para Finanças', meta: '12 vídeos', I: ISparkles },
    { name: 'FP&A & Reporting', meta: '14 vídeos', I: IBarChart },
  ];
  return (
    <div className="trail-mini">
      {items.map((t, i) => {
        const I = t.I;
        return (
          <div key={i} className="trail-mini-item">
            <div>
              <div className="name">{t.name}</div>
              <div className="meta">{t.meta}</div>
            </div>
            <I className="ic" size={18} />
          </div>
        );
      })}
    </div>
  );
};

const LiveVis = () => (
  <div className="live-card">
    <div className="live-head">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="dot-live" />
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>Ao vivo · Quinta 20:00</span>
      </div>
      <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>312 online</span>
    </div>
    <div className="live-stage">
      <div className="live-cells">
        {Array.from({ length: 24 }).map((_, i) => (
          <span key={i} className={[3, 4, 9, 10, 15, 16, 21, 22].includes(i) ? 'f' : ''} />
        ))}
      </div>
      <div className="live-caption">
        <span>Modelo aberto · DCF · TFCO4.xlsx</span>
        <span>1h 24min</span>
      </div>
    </div>
    <div className="live-agenda">
      <div className="agenda-row"><span className="t">19:55</span><span className="dot" />Premissas: revenue, COGS, capex</div>
      <div className="agenda-row now"><span className="t">20:18</span><span className="dot" />Construção do FCFE — passo a passo</div>
      <div className="agenda-row"><span className="t">20:45</span><span className="dot" />Sensibilidade WACC × g</div>
      <div className="agenda-row"><span className="t">21:10</span><span className="dot" />Q&A com a comunidade</div>
    </div>
  </div>
);

const FeedVis = () => (
  <div className="feed-mockup">
    <div className="post-row">
      <div className="post-row-head">
        <div className="avatar" style={{ background: '#0D30A4' }}>RM</div>
        <div>
          <div className="post-name">Renata Moreira</div>
          <div className="post-role">Controller · Indústria de bens de consumo</div>
        </div>
      </div>
      <div className="post-text">Construí um forecast rolling 18m no template da live passada. Bati 3,2% de variance contra o real do trimestre. Alguém quer trocar premissas de COGS?</div>
      <div className="post-row-meta"><span>↳ 14 respostas</span><span>♥ 41</span><span>3h</span></div>
    </div>
    <div className="post-row">
      <div className="post-row-head">
        <div className="avatar" style={{ background: 'rgba(173,215,246,0.18)', color: '#ADD7F6' }}>LP</div>
        <div>
          <div className="post-name">Lucas Prado</div>
          <div className="post-role">Equity Research · Asset</div>
        </div>
      </div>
      <div className="post-text">Refiz o valuation de TFCO4 com prompt do Claude pra extrair guidance do release de 4Q. Diferença vs. modelo manual: ~1,8%. Subi o .ipynb no canal <span className="tag">#valuation</span>.</div>
      <div className="post-row-meta"><span>↳ 22 respostas</span><span>♥ 67</span><span>5h</span></div>
    </div>
    <div className="post-row">
      <div className="post-row-head">
        <div className="avatar" style={{ background: '#2A2D32', border: '1px solid rgba(255,255,255,0.15)' }}>BC</div>
        <div>
          <div className="post-name">Bruno Carvalho</div>
          <div className="post-role">Sócio · Escritório contábil</div>
        </div>
      </div>
      <div className="post-text">Estruturei advisory de FP&A pra dois clientes usando os templates da trilha. Faturamento +R$ 18k/mês recorrente. Compartilho a proposta no DM.</div>
      <div className="post-row-meta"><span>↳ 31 respostas</span><span>♥ 92</span><span>1d</span></div>
    </div>
  </div>
);

const TemplatesVis = () => (
  <div className="templates-stack">
    <div className="template-card" style={{ top: 0, right: 0, transform: 'rotate(2deg)' }}>
      <div className="tname">Modelo DCF — completo</div>
      <div className="tmeta">.xlsx · 12 abas · sensibilidade WACC×g</div>
      <div className="tprev">
        {Array.from({ length: 18 }).map((_, i) => (
          <span key={i} className={[2, 5, 9, 14].includes(i) ? 'h' : ''} />
        ))}
      </div>
    </div>
    <div className="template-card" style={{ top: 70, left: 0, transform: 'rotate(-2deg)' }}>
      <div className="tname">Prompt-pack: análise de DRE</div>
      <div className="tmeta">11 prompts testados · Claude/ChatGPT</div>
      <div className="tprev">
        {Array.from({ length: 18 }).map((_, i) => (
          <span key={i} className={[1, 7, 12, 16].includes(i) ? 'h' : ''} />
        ))}
      </div>
    </div>
    <div className="template-card" style={{ top: 150, right: 12, transform: 'rotate(1deg)' }}>
      <div className="tname">Script Python — extração de DREs</div>
      <div className="tmeta">.py · PDF→DataFrame · 80 linhas</div>
      <div className="tprev">
        {Array.from({ length: 18 }).map((_, i) => (
          <span key={i} className={[3, 8, 11, 17].includes(i) ? 'h' : ''} />
        ))}
      </div>
    </div>
    <div className="template-card" style={{ top: 226, left: 18, transform: 'rotate(-1deg)' }}>
      <div className="tname">Checklist · Due diligence financeira</div>
      <div className="tmeta">.pdf · 47 itens · M&A buy-side</div>
      <div className="tprev">
        {Array.from({ length: 18 }).map((_, i) => (
          <span key={i} className={[0, 4, 10, 13].includes(i) ? 'h' : ''} />
        ))}
      </div>
    </div>
  </div>
);

const WhatYouGet = () => (
  <section className="dark-section section-pad grain" id="incluso">
    <div className="radial-blue" />
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div className="reveal section-head">
        <span className="eyebrow" style={{ color: 'var(--color-primary-light)' }}>Dentro da plataforma</span>
        <h2 className="h-section on-dark">Tudo que está incluso no Equitye Lab.</h2>
        <p className="h-sub on-dark" style={{ marginTop: 14 }}>Quatro coisas, integradas. Nenhuma teoria solta.</p>
      </div>

      <div style={{ marginTop: 56 }}>
        <FeatureBlock
          eyebrow="01 · Trilhas"
          icon={IPlay}
          title="Trilhas práticas com cases reais"
          desc="Modelagem financeira, valuation, contabilidade, controladoria, FP&A, M&A, Python, automações — organizados por trilha. Dois vídeos novos por semana, sempre com um case prático. Você assiste, entende o processo e replica no seu trabalho."
          visual={<TrailMini />}
        />
        <FeatureBlock
          flip
          eyebrow="02 · Live semanal"
          icon={IRadio}
          title="Live prática toda semana"
          desc="Toda semana, uma live de 1–2h com um case real. Pode ser a construção de um modelo financeiro, a análise de resultados de uma empresa listada, um valuation completo ou a automação de um processo com IA. Sempre prático, sempre com execução ao vivo."
          visual={<LiveVis />}
        />
        <FeatureBlock
          eyebrow="03 · Comunidade"
          icon={IUsers}
          title="Rede de profissionais de finanças"
          desc="Um espaço onde profissionais de finanças postam dúvidas técnicas, compartilham análises, discutem cases e trocam experiências. Controllers, analistas, consultores — todos no mesmo lugar, falando a mesma língua."
          visual={<FeedVis />}
        />
        <FeatureBlock
          flip
          eyebrow="04 · Materiais"
          icon={IFile}
          title="Templates, modelos e frameworks"
          desc="Modelos financeiros em Excel, templates de valuation, scripts em Python, frameworks de análise, checklists, prompts testados para IA. Cada conteúdo gera um material prático que você usa no dia seguinte."
          visual={<TemplatesVis />}
        />
      </div>
    </div>
  </section>
);

// Trails section (light)
const TRAILS = [
  { n: '01', name: 'Modelagem Financeira', desc: 'DRE, DFC e Balanço projetados. Construção de modelos completos com cases reais.', count: '24 vídeos', I: ICalc },
  { n: '02', name: 'Valuation & M&A', desc: 'DCF, múltiplos, premissas de mercado, análise de transações comparáveis.', count: '18 vídeos', I: ITrend },
  { n: '03', name: 'Contabilidade & Controladoria', desc: 'Análise de demonstrativos, indicadores financeiros, consolidação, conciliação, regimes tributários.', count: '21 vídeos', I: ILayers },
  { n: '04', name: 'FP&A & Reporting', desc: 'Budget, forecast, variance analysis, relatórios gerenciais, apresentações executivas.', count: '14 vídeos', I: IBarChart },
  { n: '05', name: 'IA Aplicada a Finanças', desc: 'Claude, ChatGPT, Cowork — como usar IA no contexto financeiro do dia a dia.', count: '12 vídeos', I: ISparkles },
  { n: '06', name: 'Python & Automações', desc: 'Scripts para extração de dados, automação de relatórios, tratamento de bases, integração com APIs.', count: '9 vídeos', I: ICode },
  { n: '07', name: 'Dashboards & Visualização', desc: 'Painéis interativos, indicadores visuais, gráficos executivos, KPIs.', count: '11 vídeos', I: IGrid },
  { n: '08', name: 'Extração e Organização de Dados', desc: 'PDF para Excel, organização de documentos, estruturação de bases financeiras.', count: '7 vídeos', I: IDatabase },
];

const Trails = () => (
  <section className="section-pad grain grain-light" style={{ background: '#fff' }} id="trilhas">
    <div className="container-md" style={{ position: 'relative', zIndex: 1 }}>
      <div className="reveal section-head">
        <span className="eyebrow">8 trilhas · 116 vídeos no acervo</span>
        <h2 className="h-section">Aprenda por trilha. No seu ritmo.</h2>
        <p className="h-sub" style={{ marginTop: 14 }}>Cada trilha é uma sequência de cases práticos. Assista, replique, evolua.</p>
      </div>
      <div className="trails-grid reveal-stagger">
        {TRAILS.map((t, i) => {
          const I = t.I;
          return (
            <article key={i} className="trail-card">
              <div className="tic"><I size={20} /></div>
              <div style={{ flex: 1 }}>
                <div className="trail-num tabular">Trilha {t.n}</div>
                <h3>{t.name}</h3>
                <p>{t.desc}</p>
                <span className="badge"><span style={{ width: 4, height: 4, background: 'currentColor', borderRadius: '50%' }} />{t.count}</span>
              </div>
            </article>
          );
        })}
      </div>
      <div className="trails-foot">2 vídeos novos por semana + live prática · O acervo cresce junto com você</div>
    </div>
  </section>
);

Object.assign(window, { Problem, WhatYouGet, Trails });