/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION COMPONENT
   First panel with headline, CTA, metadata
═══════════════════════════════════════════════════════════════════ */

function PanelHero({ onCTA }) {
  return (
    <div className="stack-panel" data-panel="1" data-screen-label="01 Hero">
      <section className="hero" id="hero" aria-labelledby="hero-heading">
        <div className="hero-bg" aria-hidden="true">
          <div className="parallax-image"></div>
          <div className="bottom-fade"></div>
        </div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div className="hero-grid">
            <div>
              <div className="eyebrow reveal" style={{ margin: "0 auto" }}>
                Estratégia de Elite para Marcas Ambiciosas
              </div>

              <h1 id="hero-heading" className="reveal d1" style={{ marginTop: "32px" }}>
                O próximo nível do seu negócio{" "}
                <em className="gold" style={{ fontStyle: "italic" }}>
                  não será alcançado
                </em>{" "}
                com estratégias genéricas.
              </h1>
              
              <p className="body-lg reveal d2" style={{
                marginTop: "28px",
                maxWidth: "680px",
                marginLeft: "auto",
                marginRight: "auto"
              }}>
                Você construiu uma empresa sólida. Mas o que trouxe você até aqui não é o que vai levá-lo ao próximo estágio. A Aurum transforma negócios consolidados em líderes absolutos através de engenharia de conversão e posicionamento de alta performance.
              </p>
              
              <div className="reveal d3" style={{
                marginTop: "36px",
                display: "flex",
                gap: "16px",
                flexWrap: "wrap",
                justifyContent: "center"
              }}>
                <button className="btn lg" onClick={onCTA}>
                  Aplicar para Auditoria Estratégica{" "}
                  <span className="arrow" aria-hidden="true">→</span>
                </button>
              </div>

              <div className="hero-meta reveal d4">
                <div className="meta-cell">
                  <span className="k">Foco</span>
                  <span className="v">High Ticket · <em>B2B</em></span>
                </div>
                <div className="meta-divider"></div>
                <div className="meta-cell">
                  <span className="k">Operação</span>
                  <span className="v"><em>7</em> a <em>8</em> dígitos</span>
                </div>
                <div className="meta-divider"></div>
                <div className="meta-cell">
                  <span className="k">Sede</span>
                  <span className="v">São Paulo · <em>SP</em></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <div style={{
        position: "absolute",
        bottom: "32px",
        left: "50%",
        transform: "translateX(-50%)",
        fontFamily: "var(--mono)",
        fontSize: "10px",
        letterSpacing: "0.22em",
        color: "var(--slate-2)",
        textTransform: "uppercase",
        display: "flex",
        alignItems: "center",
        gap: "12px",
        zIndex: 3
      }}>
        <span>Role para descer</span>
        <span style={{
          width: "1px",
          height: "24px",
          background: "var(--gold)",
          display: "inline-block"
        }}></span>
      </div>
    </div>
  );
}