// Hero variations
const HeroV1 = ({ onWhats, onForm }) => (
  <section className="hero hero-v1">
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="badge fade-in"><span className="pulse"></span> Agência de tráfego em Sorocaba</div>
          <h1 className="display fade-in delay-1" style={{marginTop: 24}}>
            Transformamos <em>investimento</em> em <span className="hl">faturamento previsível</span>.
          </h1>
          <p className="lede fade-in delay-2" style={{marginTop: 22}}>
            Somos uma agência do interior de São Paulo, em Sorocaba, especialista em tráfego pago para negócios locais. Estratégia aplicada com método, dados e obsessão por resultado, para escalar negócios que querem crescer com eficiência.
          </p>
          <div className="hero-stats fade-in delay-3">
            <div className="hero-stat">
              <div className="v">50<span className="accent">+</span></div>
              <div className="l">Clientes atendidos</div>
            </div>
            <div className="hero-stat">
              <div className="v">20<span className="accent">+</span></div>
              <div className="l">Nichos diferentes</div>
            </div>
            <div className="hero-stat">
              <div className="v">R$1M<span className="accent">+</span></div>
              <div className="l">Investidos em mídia</div>
            </div>
          </div>
          <div className="cta-row fade-in delay-4">
            <a className="btn btn-primary btn-lg" onClick={onWhats}>
              <IconWhatsApp/> Falar no WhatsApp <IconArrow/>
            </a>
            <a className="btn btn-ghost" onClick={onForm}>Quero um diagnóstico</a>
          </div>
          <div className="cta-hint" style={{marginTop: 18}}>// diagnóstico gratuito · sem compromisso</div>
        </div>

        <div className="hero-viz fade-in delay-2">
          <div className="viz-seal">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 1l3.09 6.26L22 8.27l-5 4.87 1.18 6.88L12 16.77l-6.18 3.25L7 13.14 2 8.27l6.91-1.01L12 1z"/>
            </svg>
            <span>Mais de 6 anos de experiência com negócios locais</span>
          </div>
          <div className="viz-header">
            <div className="title">// performance · últimos 12 meses</div>
            <div className="badge" style={{padding: '4px 10px'}}><span className="pulse"></span> LIVE</div>
          </div>
          <div className="viz-stat-label">Faturamento gerado para negócios locais</div>
          <div className="viz-stat">R$ 4.700.000 <span className="delta">+312%</span></div>

          <div style={{height: 180, margin: '20px 0 8px'}}>
            <svg viewBox="0 0 400 140" preserveAspectRatio="none" style={{width:'100%', height:'100%'}} className="perf-chart">
              <defs>
                <linearGradient id="hg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#c5f64a" stopOpacity="0.4"/>
                  <stop offset="100%" stopColor="#c5f64a" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {[0,1,2,3].map(i => (
                <line key={i} x1="0" x2="400" y1={i*35+10} y2={i*35+10} stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
              ))}
              <path d="M0 110 C 40 100, 60 95, 90 85 S 140 75, 170 60 S 220 50, 250 35 S 310 28, 340 20 L 400 12 L 400 140 L 0 140 Z" fill="url(#hg)" className="perf-area"/>
              <path d="M0 125 C 40 120, 80 115, 120 110 S 200 100, 240 95 S 320 85, 400 75" stroke="rgba(255,255,255,0.2)" strokeWidth="1.4" fill="none" strokeDasharray="3 3" className="perf-dashed"/>
              <path d="M0 110 C 40 100, 60 95, 90 85 S 140 75, 170 60 S 220 50, 250 35 S 310 28, 340 20 L 400 12" stroke="#c5f64a" strokeWidth="2" fill="none" strokeLinecap="round" className="perf-line"/>
              <circle cx="400" cy="12" r="10" fill="#c5f64a" opacity="0.25" className="perf-dot-halo"/>
              <circle cx="400" cy="12" r="5" fill="#c5f64a" className="perf-dot"/>
            </svg>
          </div>

          <div className="cta-hint" style={{marginTop: 14, fontSize: 12}}>
            // resultado consolidado de negócios locais atendidos pelo time
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HeroV2 = ({ onWhats, onForm }) => (
  <section className="hero hero-v2">
    <div className="container">
      <div className="badge fade-in"><span className="pulse"></span> Agência boutique · vagas limitadas</div>
      <h1 className="display fade-in delay-1" style={{marginTop: 28, maxWidth: '14ch', marginLeft:'auto', marginRight:'auto'}}>
        Tráfego pago que <em>não desperdiça</em> seu dinheiro.
      </h1>
      <p className="lede fade-in delay-2" style={{marginTop: 24}}>
        Agência do interior de São Paulo, em Sorocaba, especialista em tráfego pago para negócios locais. Escala com método, sem promessas vazias.
      </p>
      <div className="hero-stats fade-in delay-3">
        <div className="hero-stat">
          <div className="v">50<span className="accent">+</span></div>
          <div className="l">Clientes atendidos</div>
        </div>
        <div className="hero-stat">
          <div className="v">20<span className="accent">+</span></div>
          <div className="l">Nichos diferentes</div>
        </div>
        <div className="hero-stat">
          <div className="v">R$1M<span className="accent">+</span></div>
          <div className="l">Investidos em mídia</div>
        </div>
      </div>
      <div className="cta-row fade-in delay-4">
        <a className="btn btn-primary btn-lg" onClick={onWhats}>
          <IconWhatsApp/> Falar no WhatsApp <IconArrow/>
        </a>
        <a className="btn btn-ghost btn-lg" onClick={onForm}>Solicitar diagnóstico</a>
      </div>
    </div>
  </section>
);

const HeroV3 = ({ onWhats, onForm }) => (
  <section className="hero hero-v3">
    <div className="container">
      <div className="badge fade-in"><span className="pulse"></span> targetpro · est. 2021</div>
      <div className="mega fade-in delay-1" style={{marginTop: 32}}>
        <div>Mais <span className="hl">vendas</span>.</div>
        <div>Menos <span className="it">achismo</span>.</div>
        <div>Tráfego com <span className="hl">método</span>.</div>
      </div>
      <div className="row-bottom">
        <div className="fade-in delay-3">
          <p className="lede">
            Agência do interior de São Paulo, em Sorocaba, especialista em tráfego pago para negócios locais. Estruturamos campanhas de Google, Meta e TikTok com foco em retorno real, não em métricas de vaidade.
          </p>
          <div className="cta-row" style={{marginTop: 24}}>
            <a className="btn btn-primary btn-lg" onClick={onWhats}>
              <IconWhatsApp/> Falar no WhatsApp <IconArrow/>
            </a>
            <a className="btn btn-ghost" onClick={onForm}>Diagnóstico gratuito</a>
          </div>
        </div>
        <div className="side fade-in delay-4">
          <div className="l">// snapshot</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginTop: 12}}>
            <div>
              <div className="hero-stat">
                <div className="v" style={{fontSize: 34}}>50<span className="accent">+</span></div>
                <div className="l" style={{fontSize: 10}}>Clientes</div>
              </div>
            </div>
            <div>
              <div className="hero-stat">
                <div className="v" style={{fontSize: 34}}>20<span className="accent">+</span></div>
                <div className="l" style={{fontSize: 10}}>Nichos</div>
              </div>
            </div>
            <div style={{gridColumn:'span 2'}}>
              <div className="hero-stat">
                <div className="v" style={{fontSize: 34}}>R$1M<span className="accent">+</span></div>
                <div className="l" style={{fontSize: 10}}>Investidos em mídia</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Ticker = () => {
  const items = ["Performance", "ROI focado", "Google Ads", "Meta Ads", "TikTok Ads", "Funis de venda", "Criativos", "BI próprio", "Performance"];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {[...items, ...items].map((t, i) => <div key={i} className="ticker-item">{t}</div>)}
      </div>
    </div>
  );
};

Object.assign(window, { HeroV1, HeroV2, HeroV3, Ticker });