/* ═══════════════════════════════════════════════════════════════════
   CONTENT SECTIONS
   Desafio, Metodologia, Prova Social, Filtro, Fechamento
═══════════════════════════════════════════════════════════════════ */

function PanelTag({ idx, total, label }) {
  return (
    <div className="panel-tag">
      <span className="dot"></span>
      <span>0{idx} / 0{total}</span>
      <span style={{ color: "var(--ivory)", opacity: .5 }}>·</span>
      <span>{label}</span>
    </div>
  );
}

/* --- Panel 2: O Desafio --- */
function PanelDesafio() {
  return (
    <div className="stack-panel" data-panel="2" data-screen-label="02 Desafio">
      <PanelTag idx="2" total="6" label="O Desafio" />
      <div className="panel-inner">
        <div className="wrap">
          <div className="reveal d1" style={{
            marginBottom: "56px",
            maxWidth: "900px"
          }}>
            <h2>
              O mercado está barulhento.<br/>
              A sua mensagem{" "}
              <em className="gold" style={{ fontStyle: "italic" }}>
                está se perdendo?
              </em>
            </h2>
          </div>
          
          <div className="desafio-body">
            <div className="reveal">
              <p className="body-lg">
                A maioria dos executivos e fundadores chega até nós com uma frustração em comum: eles têm um produto superior, mas estão perdendo terreno para concorrentes com um marketing mais agressivo.
              </p>
              <p className="body" style={{ marginTop: "20px" }}>
                Estão cansados de agências que entregam métricas de vaidade — curtidas, cliques e relatórios confusos — mas que falham em entender o núcleo do negócio: a margem de lucro, o CAC e o ROI.
              </p>
            </div>
            
            <div className="reveal d2">
              <blockquote className="pull-quote">
                Nós entendemos. O crescimento escalável não aceita amadorismo. Ele exige previsibilidade, dados implacáveis e uma arquitetura de marca à prova de crises.
              </blockquote>
              <div style={{
                marginTop: "28px",
                display: "flex",
                gap: "24px",
                flexWrap: "wrap"
              }}>
                {[
                  ["CAC", "Custo de Aquisição"],
                  ["LTV", "Lifetime Value"],
                  ["ROI", "Retorno sobre Inv."],
                  ["MRR", "Receita Recorrente"],
                ].map(([k, v]) => (
                  <div key={k} style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "4px"
                  }}>
                    <span style={{
                      fontFamily: "var(--mono)",
                      fontSize: "11px",
                      letterSpacing: "0.2em",
                      color: "var(--gold)"
                    }}>
                      {k}
                    </span>
                    <span style={{
                      fontSize: "12px",
                      color: "var(--slate-2)",
                      fontFamily: "var(--mono)",
                      letterSpacing: "0.05em"
                    }}>
                      {v}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- Panel 3: Metodologia --- */
function PanelMetodologia() {
  const IconBranding = (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="8" stroke="var(--gold)" strokeWidth="1"/>
      <circle cx="10" cy="10" r="3" fill="var(--gold)"/>
    </svg>
  );
  
  const IconConversion = (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M2 14 L7 9 L11 13 L18 4" stroke="var(--gold)" strokeWidth="1" fill="none"/>
      <path d="M13 4 L18 4 L18 9" stroke="var(--gold)" strokeWidth="1" fill="none"/>
    </svg>
  );
  
  const IconGrowth = (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <rect x="2" y="12" width="3" height="6" stroke="var(--gold)" strokeWidth="1"/>
      <rect x="8.5" y="8" width="3" height="10" stroke="var(--gold)" strokeWidth="1"/>
      <rect x="15" y="3" width="3" height="15" stroke="var(--gold)" strokeWidth="1" fill="var(--gold)" fillOpacity="0.15"/>
    </svg>
  );
  
  return (
    <div className="stack-panel alt" data-panel="3" data-screen-label="03 Metodologia">
      <PanelTag idx="3" total="6" label="Metodologia" />
      <div className="panel-inner">
        <div className="wrap">
          <div className="reveal d1" style={{
            marginBottom: "56px",
            maxWidth: "900px"
          }}>
            <h2>
              Não somos uma agência.<br/>
              Somos{" "}
              <em className="gold" style={{ fontStyle: "italic" }}>
                arquitetos
              </em>{" "}
              de crescimento.
            </h2>
            <p className="body" style={{
              marginTop: "24px",
              maxWidth: "640px"
            }}>
              A Aurum opera de forma diferente. Nos infiltramos na sua operação, diagnosticamos gargalos invisíveis e desenhamos um ecossistema de aquisição sob medida para o seu ticket e o seu público.
            </p>
          </div>
          
          <div className="pillars">
            <div className="pillar reveal">
              <div className="pillar-num">I</div>
              <div className="pillar-icon">{IconBranding}</div>
              <h3>Posicionamento de Autoridade</h3>
              <p>Elevamos a percepção de valor da sua marca. Seus clientes pararão de comparar preços quando entenderem que você é a única escolha lógica.</p>
            </div>
            
            <div className="pillar reveal d1">
              <div className="pillar-num">II</div>
              <div className="pillar-icon">{IconConversion}</div>
              <h3>Engenharia de Conversão</h3>
              <p>Cada decisão é pautada por dados estatísticos. Otimizamos taxas de conversão de ponta a ponta, transformando visitantes em compradores de alto valor.</p>
            </div>
            
            <div className="pillar reveal d2">
              <div className="pillar-num">III</div>
              <div className="pillar-icon">{IconGrowth}</div>
              <h3>Escala Sustentável</h3>
              <p>Desenvolvemos canais de aquisição previsíveis e escaláveis. Mais volume, com menor custo, preservando a saúde financeira da operação.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- Panel 4: Prova Social --- */
function PanelProva() {
  return (
    <div className="stack-panel" data-panel="4" data-screen-label="04 Prova Social">
      <PanelTag idx="4" total="6" label="Resultados Auditados" />
      <div className="panel-inner">
        <div className="wrap">
          <div className="prova-head reveal" style={{ marginBottom: "56px" }}>
            <h2>
              Onde a estratégia encontra a{" "}
              <em className="gold" style={{ fontStyle: "italic" }}>
                execução impecável.
              </em>
            </h2>
          </div>
          
          <div className="stats">
            <div className="stat reveal">
              <div className="micro">Receita Gerada · 2025</div>
              <div className="figure">
                +R$<AnimNum to={50} /><span className="unit">M</span>
              </div>
              <div className="label">
                em receita gerada e auditada para nossos parceiros no último ano fiscal.
              </div>
            </div>
            
            <div className="stat reveal d1">
              <div className="micro">Lifetime Value · Média</div>
              <div className="figure">
                <AnimNum to={3.5} decimals={1} /><span className="unit">x</span>
              </div>
              <div className="label">
                de aumento médio em LTV nos primeiros 6 meses de consultoria.
              </div>
            </div>
            
            <div className="stat reveal d2">
              <div className="micro">Mandato de Atuação</div>
              <div className="figure">
                <AnimNum to={100} /><span className="unit">%</span>
              </div>
              <div className="label">
                de foco em operações de High Ticket e B2B consolidadas.
              </div>
            </div>
          </div>
          
          <div className="reveal d3" style={{
            textAlign: "center",
            marginTop: "40px",
            fontFamily: "var(--mono)",
            fontSize: "11px",
            letterSpacing: "0.18em",
            color: "var(--slate-2)",
            textTransform: "uppercase"
          }}>
            Dados auditados por terceiros · Disponíveis em sessão estratégica sob NDA
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- Panel 5: Filtro --- */
function PanelFiltro() {
  return (
    <div className="stack-panel alt" data-panel="5" data-screen-label="05 Filtro">
      <PanelTag idx="5" total="6" label="Critério de Parceria" />
      <div className="panel-inner">
        <div className="wrap">
          <div className="reveal d1" style={{
            marginBottom: "48px",
            maxWidth: "900px"
          }}>
            <h2>
              Para quem é a{" "}
              <em className="gold" style={{ fontStyle: "italic" }}>
                Aurum?
              </em>
            </h2>
            <p className="body" style={{
              marginTop: "20px",
              maxWidth: "680px"
            }}>
              Nossa consultoria exige imersão profunda. Por isso, limitamos rigorosamente o número de parceiros simultâneos. Garantimos que nosso time esteja <em className="gold">100% focado</em> no seu faturamento.
            </p>
          </div>
          
          <div className="fit-grid reveal">
            <div className="fit-col yes">
              <div className="fit-head">
                <span className="fit-tag">— Fit perfeito</span>
              </div>
              <h3 style={{ marginBottom: "24px" }}>Temos sinergia com:</h3>
              <ul className="fit-list">
                <li><span className="mark yes"></span><span>Empresas <em className="gold">já estabelecidas</em> escalando para 7 ou 8 dígitos.</span></li>
                <li><span className="mark yes"></span><span>CEOs e Diretores que decidem por <em className="gold">lógica financeira</em>.</span></li>
                <li><span className="mark yes"></span><span>Negócios com margem para <em className="gold">soluções estruturais</em>.</span></li>
                <li><span className="mark yes"></span><span>Operações com produto consolidado e <em className="gold">visão de longo prazo.</em></span></li>
              </ul>
            </div>
            
            <div className="fit-col no">
              <div className="fit-head">
                <span className="fit-tag">— Não atendemos</span>
              </div>
              <h3 style={{
                marginBottom: "24px",
                color: "rgba(248,249,250,0.6)"
              }}>
                Não somos adequados para:
              </h3>
              <ul className="fit-list">
                <li><span className="mark no"></span><span>Iniciantes buscando a "primeira venda" ou fórmulas mágicas.</span></li>
                <li><span className="mark no"></span><span>Líderes que procuram executores braçais em vez de parceiros intelectuais.</span></li>
                <li><span className="mark no"></span><span>Negócios sem caixa para mudanças estruturais.</span></li>
                <li><span className="mark no"></span><span>Operações que medem sucesso por métricas de vaidade.</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- Panel 6: Fechamento --- */
function PanelFechamento({ onCTA }) {
  return (
    <div className="stack-panel" data-panel="6" data-screen-label="06 Fechamento">
      <PanelTag idx="6" total="6" label="Próximo Passo" />
      <div className="panel-inner">
        <div className="wrap">
          <div className="closing-inner" style={{
            maxWidth: "820px",
            margin: "0 auto",
            textAlign: "center"
          }}>
            <h2 className="reveal d1" style={{
              fontSize: "clamp(40px, 5vw, 72px)"
            }}>
              Assuma o controle do{" "}
              <em className="gold" style={{ fontStyle: "italic" }}>
                seu crescimento.
              </em>
            </h2>
            
            <p className="body-lg reveal d2" style={{
              maxWidth: "640px",
              margin: "24px auto 0"
            }}>
              Se você reconhece que seu negócio tem potencial reprimido e está pronto para implementar uma estratégia de classe mundial, o primeiro passo é nosso.
            </p>
            
            <p className="body reveal d2" style={{
              maxWidth: "640px",
              margin: "20px auto 0"
            }}>
              Agende uma{" "}
              <em className="gold">Sessão Estratégica de Diagnóstico</em>.
              Durante 45 minutos, um de nossos sócios fará um raio-x do seu cenário atual e revelará os gargalos que estão travando sua expansão.
            </p>
            
            <div className="reveal d3" style={{ marginTop: "40px" }}>
              <button className="btn lg" onClick={onCTA}>
                Solicitar Minha Sessão Estratégica <span className="arrow">→</span>
              </button>
            </div>
            
            <div className="closing-meta reveal d4" style={{ marginTop: "40px" }}>
              <span><span className="dot"></span> 45 minutos</span>
              <span><span className="dot"></span> Sob NDA</span>
              <span><span className="dot"></span> Vagas limitadas · Q2 2026</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}