// ============================================================
// HERO: top strip + nav + hero
// ============================================================

function TopStrip() {
  const items = [
    'Marketing digital + IA pra pequenos negócios',
    'Google Partner',
    'Kommo CRM Partner',
    'Atendendo Ribeirão Preto e região',
    'Tráfego · CRM · Automação · IA',
    'Cupom R$ 1.200 do Google Ads pra novos clientes',
  ];
  // duplicate for seamless loop
  const all = [...items, ...items];
  return (
    <div className="topstrip" data-screen-label="00 Strip">
      <div className="topstrip-track">
        {all.map((s, i) => <span className="topstrip-item" key={i}>{s}</span>)}
      </div>
    </div>
  );
}

function Nav() {
  const [openMenu, setOpenMenu] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpenMenu(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);

  return (
    <nav className="nav" data-screen-label="00 Nav">
      <div className="container nav-inner">
        <a href="#top" className="nav-logo" aria-label="Apta marketing digital">
          <img src={R('assets/logo-apta-mark.png')} alt="" width="44" height="44" decoding="async" />
          <div className="nav-logo-text">
            <span className="a">apta</span>
            <span className="b">marketing · ia</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#servicos">Serviços</a>
          <div className={`nav-drop ${openMenu ? 'open' : ''}`} ref={ref}>
            <button type="button" className="nav-drop-trigger" onClick={() => setOpenMenu(v => !v)}>
              Como funciona
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none" className="nav-drop-caret">
                <path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <div className="nav-drop-menu">
              <a href="#diagnostico"><strong>Diagnóstico</strong><small>descubra seu próximo passo</small></a>
              <a href="#processo"><strong>Como trabalhamos</strong><small>nosso método em etapas</small></a>
              <a href="#stack"><strong>O fluxo end-to-end</strong><small>do anúncio ao review</small></a>
            </div>
          </div>
          <a href="cases.html">Cases</a>
          <a href="blog.html">Blog</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="https://wa.me/5516997106682" target="_blank" rel="noreferrer">
            <Icon.whatsapp /> WhatsApp
          </a>
          <a className="btn btn-primary" href="#contato">
            Agendar diagnóstico <Icon.arrow />
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow reveal">Apta · agência AI-first em Ribeirão Preto</div>

          <h1 className="h-display reveal" style={{ marginTop: 24 }}>
            <span className="line">Mais cliente.</span>
            <span className="line"><em>Menos</em> trabalho</span>
            <span className="line">operacional.</span>
            <span className="small">
              A Apta junta tráfego pago, CRM e automação com IA pra pequenos negócios crescerem — sem virar caos.
            </span>
          </h1>

          <div className="hero-meta reveal">
            <span className="chip"><span className="dot" style={{ background: 'var(--gold)' }}></span>Google Partner</span>
            <span className="chip"><span className="dot" style={{ background: 'var(--lavender)' }}></span>Kommo CRM Partner</span>
            <span className="chip"><span className="dot" style={{ background: 'var(--sage)' }}></span>Ribeirão Preto + região</span>
          </div>

          <div className="hero-cta reveal">
            <a className="btn btn-primary" href="#contato">
              Agendar diagnóstico grátis <Icon.arrow />
            </a>
            <a className="btn btn-outline" href="#diagnostico">
              <Icon.calendar /> Descobrir meu próximo passo
            </a>
          </div>
        </div>

        <div className="hero-aside reveal">
          <div className="hero-stack">

            <div className="hero-card card-1">
              <div className="hc-label"><span className="hc-dot"></span>n8n · workflow ativo</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1.7, color: 'var(--dark-mute)' }}>
                <div>→ lead entrou via Google Ads</div>
                <div>→ IA qualificou intenção</div>
                <div>→ enviado pro Kommo</div>
                <div style={{ color: 'var(--gold)' }}>→ WhatsApp do vendedor: 14s</div>
              </div>
            </div>

            <div className="hero-card card-2">
              <div className="hc-label"><span className="hc-dot"></span>Google Ads · últimos 7 dias</div>
              <div className="hc-headline">+38% leads</div>
              <div className="hc-row" style={{ color: 'var(--ink-mute)' }}>
                <span>CPL R$ 18,40</span>
                <span style={{ color: 'var(--sage)' }}>↓ -22%</span>
              </div>
            </div>

            <div className="hero-card card-3">
              <div className="hc-label" style={{ color: 'rgba(245,240,226,0.7)' }}>
                <span className="hc-dot" style={{ background: 'var(--gold)' }}></span>
                Google Meu Negócio · 30 dias
              </div>
              <div className="hc-big">+147% <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '0.65em', color: 'var(--gold)' }}>buscas</span></div>
              <div style={{ fontSize: 12, opacity: 0.8, marginTop: 8, fontFamily: 'var(--mono)' }}>
                cliente Quintal Jardins · Ribeirão
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}

function CupomBanner() {
  return (
    <section className="cupom-banner" data-screen-label="01b Cupom">
      <div className="container">
        <div className="cupom-card reveal">
          <div className="cupom-art">
            <img src={R('assets/cupom-google-ads.png')} alt="Cupom Google Ads R$ 1.200" loading="lazy" decoding="async" />
          </div>
          <div className="cupom-body">
            <span className="eyebrow">benefício exclusivo · Google Partner</span>
            <h2 className="cupom-h">
              R$ 1.200 de <em>crédito</em><br />no Google Ads.
            </h2>
            <p className="cupom-p">
              Como agência <strong>Google Partner</strong>, a Apta libera cupom de R$ 1.200 em mídia
              pra novos anunciantes do Google Ads. Você investe R$ 1.200, o Google bonifica os R$ 1.200 — e a gente cuida da campanha desde o setup.
            </p>
            <div className="cupom-cta">
              <a className="btn btn-primary" href="#contato">
                Resgatar meu cupom <Icon.arrow />
              </a>
              <span className="cupom-fine">*Sujeito a regras do programa Google Partners. Válido pra novas contas.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnerStrip() {
  const clients = [
    { name: 'Ultragaz Franca', logo: 'assets/client-ultragaz-franca.png', h: 58, shape: 'wide' },
    { name: 'Seu Gás · Ultragaz', logo: 'assets/client-seu-gas.png', h: 60, shape: 'square' },
    { name: 'Souza Gás e Água Miguel', logo: 'assets/client-souza.png', h: 58, shape: 'wide' },
    { name: 'VIP Gás', logo: 'assets/client-vip-2.png', h: 36, shape: 'wide' },
    { name: 'Gás Bom', logo: 'assets/client-gas-bom.png', h: 40, shape: 'wide' },
    { name: 'Quintal Jardins', logo: 'assets/client-quintal.png', h: 60, shape: 'square' },
    { name: 'Moreira Caminhões', logo: 'assets/client-moreira.png', h: 44, shape: 'wide' },
    { name: 'Carla Oliveira Advocacia', logo: 'assets/client-carla.png', h: 56, shape: 'square' },
    { name: 'Instituto Pró Basquete', logo: 'assets/client-impb-2.png', h: 58, shape: 'wide' },
    { name: 'Dr. Fabrício Freitas', logo: 'assets/client-fabricio.png', h: 23, shape: 'wide' },
    { name: 'Unique Ar e Energia Solar', logo: 'assets/client-unique.png', h: 60, shape: 'square' },
  ];
  return (
    <div className="partner-strip" data-screen-label="01c Confiam">
      <div className="container">
        <div className="partner-head reveal">
          <span className="partner-strip-label">Confiam na Apta</span>
        </div>
        <div className="partner-wall reveal">
          {clients.map(c => (
            <div className={`logo-tile ${c.shape}`} key={c.name} title={c.name}>
              <img
                src={R(c.logo)}
                alt={c.name}
                loading="lazy"
                decoding="async"
                style={{ maxHeight: c.h }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopStrip, Nav, Hero, PartnerStrip, CupomBanner });