// ═══════════════════════════════════════════════════════════════════════════
//  LANDING AGÊNCIA — página de urgência pra Google Ads
//  Captura busca por "agência de marketing" e faz a virada de mesa pro MMC
// ═══════════════════════════════════════════════════════════════════════════

function LandingAgencia({ onCTA }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, []);

  return (
    <div className="agencia">
      {/* HEADER */}
      <header className="ag-hdr">
        <div className="ag-hdr__inner">
          <div className="ag-logo">
            <span style={{ color: 'var(--bac-blue)' }}>8</span>
            <span style={{ color: 'var(--bac-navy)' }}>BAC</span>
          </div>
          <a href="#" className="ag-hdr__cta" onClick={e => { e.preventDefault(); onCTA('header'); }}>
            <i data-lucide="message-circle" style={{ width: 14, height: 14 }}></i>
            <span>WhatsApp</span>
          </a>
        </div>
      </header>

      {/* HERO */}
      <section className="ag-hero">
        <div className="ag-hero__inner">
          <div className="ag-chip">
            <span className="ag-chip__dot"></span>
            ATENDIMENTO HOJE · 15 MIN NO WHATSAPP
          </div>

          <h1 className="ag-hero__title">
            Você buscou{' '}
            <span className="ag-hero__quote">agência de marketing</span>.
            <br/>
            <span style={{ color: 'var(--bac-blue)' }}>Talvez sua dor seja outra.</span>
          </h1>

          <p className="ag-hero__sub">
            Se você já investe em tráfego e sente que <strong>perde lead no caminho</strong>,
            o problema não é qual agência contratar — é a estrutura que falta rodar
            antes do anúncio.
          </p>

          <button className="ag-cta-btn" onClick={() => onCTA('hero')}>
            <i data-lucide="message-circle" style={{ width: 20, height: 20 }}></i>
            Falar com especialista agora
            <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
          </button>

          <div className="ag-hero__trust">
            <span className="ag-hero__trust-item">
              <i data-lucide="shield-check" style={{ width: 13, height: 13 }}></i>
              Diagnóstico gratuito
            </span>
            <span className="ag-hero__trust-sep">·</span>
            <span className="ag-hero__trust-item">
              <i data-lucide="clock" style={{ width: 13, height: 13 }}></i>
              15 minutos
            </span>
            <span className="ag-hero__trust-sep">·</span>
            <span className="ag-hero__trust-item">
              <i data-lucide="x-circle" style={{ width: 13, height: 13 }}></i>
              Sem compromisso
            </span>
          </div>
        </div>
      </section>

      {/* O QUE É */}
      <section className="ag-method">
        <div className="ag-method__inner">
          <div className="ag-eyebrow">O QUE É 8BAC</div>
          <h2 className="ag-method__title">
            Não somos agência de tráfego.<br/>
            <span style={{ color: 'var(--bac-blue)' }}>Somos método.</span>
          </h2>
          <p className="ag-method__sub">
            A maioria das empresas perde 70%+ dos leads que paga pra capturar.
            Liga tráfego, recebe 50 leads na semana, fecha 1 e descarta os outros 49.
            <br/><br/>
            <strong>O dinheiro fica no chão da mesa.</strong> A 8BAC vai recuperar.
          </p>

          <div className="ag-cards">
            <div className="ag-card">
              <div className="ag-card__icon"><i data-lucide="repeat" style={{ width: 24, height: 24 }}></i></div>
              <div className="ag-card__num">3·9·1</div>
              <h3 className="ag-card__title">Marketing de Consistência (MMC)</h3>
              <p className="ag-card__desc">
                Sistema que conversa com seu lead em <strong>3 dias, 9 mensagens,
                1 método</strong> — até ele virar a mesa e responder.
              </p>
            </div>

            <div className="ag-card">
              <div className="ag-card__icon"><i data-lucide="trending-up" style={{ width: 24, height: 24 }}></i></div>
              <div className="ag-card__num">TRL</div>
              <h3 className="ag-card__title">Taxa de Recuperação de Lead</h3>
              <p className="ag-card__desc">
                Métrica própria que mostra <strong>quanto dinheiro você
                recupera</strong> de lead que &quot;não respondeu&quot;.
              </p>
            </div>

            <div className="ag-card">
              <div className="ag-card__icon"><i data-lucide="zap" style={{ width: 24, height: 24 }}></i></div>
              <div className="ag-card__num">48h</div>
              <h3 className="ag-card__title">Implementação rápida</h3>
              <p className="ag-card__desc">
                Estrutura completa instalada e <strong>rodando antes do final
                da semana</strong>. Sem enrolação.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* COMO FUNCIONA */}
      <section className="ag-how">
        <div className="ag-how__inner">
          <div className="ag-eyebrow">COMO FUNCIONA O DIAGNÓSTICO</div>
          <h2 className="ag-how__title">15 minutos no WhatsApp.<br/>Sem enrolação.</h2>

          <div className="ag-steps">
            <div className="ag-step">
              <div className="ag-step__num">01</div>
              <div className="ag-step__body">
                <h3>Você manda mensagem</h3>
                <p>Conta rapidinho o que vende, quanto fatura e como chegam seus leads hoje.</p>
              </div>
            </div>
            <div className="ag-step">
              <div className="ag-step__num">02</div>
              <div className="ag-step__body">
                <h3>Eu olho seu funil</h3>
                <p>Em 15 min identifico onde está vazando lead e por que o tráfego não converte.</p>
              </div>
            </div>
            <div className="ag-step">
              <div className="ag-step__num">03</div>
              <div className="ag-step__body">
                <h3>Você sai com clareza</h3>
                <p>2-3 pontos exatos pra arrumar — com ou sem virar cliente. Sem compromisso.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="ag-final">
        <div className="ag-final__inner">
          <div className="ag-final__card">
            <div className="ag-eyebrow" style={{ color: '#fff', opacity: .7 }}>
              PRÓXIMO PASSO
            </div>
            <h2 className="ag-final__title">
              Bora descobrir quanto<br/>
              dinheiro tem no chão<br/>
              da sua empresa?
            </h2>
            <p className="ag-final__sub">
              Diagnóstico gratuito de 15 minutos no WhatsApp.
              Você sai com clareza do que precisa fazer — venha trabalhar comigo ou não.
            </p>
            <button className="ag-cta-btn ag-cta-btn--inverted" onClick={() => onCTA('final')}>
              <i data-lucide="message-circle" style={{ width: 20, height: 20 }}></i>
              Falar agora no WhatsApp
              <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
            </button>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="ag-foot">
        <div className="ag-foot__inner">
          <span className="ag-logo" style={{ fontSize: 18 }}>
            <span style={{ color: 'var(--bac-blue)' }}>8</span>
            <span style={{ color: 'var(--bac-navy)' }}>BAC</span>
          </span>
          <span className="ag-foot__meta">© 2026 8BAC · Marketing de Consistência</span>
        </div>
      </footer>

      <style>{`
        .agencia { background: #fff; }
        .ag-logo {
          font-family: var(--font-display); font-weight: 900;
          font-size: 22px; line-height: 1; letter-spacing: -0.04em;
          flex-shrink: 0;
        }
        .ag-eyebrow {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          letter-spacing: 0.08em; color: var(--bac-blue);
          margin-bottom: 14px;
        }

        /* HEADER */
        .ag-hdr {
          position: sticky; top: 0; z-index: 50;
          background: rgba(255,255,255,.94);
          backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
          border-bottom: 1px solid var(--line);
        }
        .ag-hdr__inner {
          max-width: 1100px; margin: 0 auto;
          padding: 12px 18px;
          display: flex; align-items: center; justify-content: space-between; gap: 12px;
        }
        .ag-hdr__cta {
          display: inline-flex; align-items: center; gap: 6px;
          background: var(--bac-blue); color: #fff;
          font-family: var(--font-sans); font-weight: 600; font-size: 13px;
          padding: 9px 14px; border-radius: 8px; text-decoration: none;
          transition: background .14s var(--ease-out);
          -webkit-tap-highlight-color: transparent;
        }
        .ag-hdr__cta:hover { background: var(--bac-blue-700); }

        /* CHIP */
        .ag-chip {
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          letter-spacing: 0.06em; color: var(--success);
          background: rgba(0,166,90,.1);
          padding: 8px 14px; border-radius: 999px;
          display: inline-flex; align-items: center; gap: 8px;
          margin-bottom: 22px;
        }
        .ag-chip__dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--success);
          animation: pulse 1.6s ease-in-out infinite;
        }
        @keyframes pulse {
          0%,100% { opacity: 1; transform: scale(1); }
          50%     { opacity: .5; transform: scale(.85); }
        }

        /* HERO */
        .ag-hero {
          background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%);
          padding: 36px 18px 48px;
        }
        .ag-hero__inner {
          max-width: 720px; margin: 0 auto;
          text-align: center;
          animation: agFade .42s var(--ease-out);
        }
        @keyframes agFade {
          from { opacity: 0; transform: translateY(14px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .ag-hero__title {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(32px, 8.4vw, 56px); line-height: 1.04;
          letter-spacing: -0.03em; color: var(--ink-1);
          margin: 0 0 20px 0;
        }
        .ag-hero__quote {
          background: rgba(0,102,254,.1); color: var(--bac-blue);
          padding: 0 6px; border-radius: 6px;
          white-space: nowrap;
        }
        .ag-hero__sub {
          font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
          color: var(--ink-3); margin: 0 0 32px 0;
        }
        .ag-hero__sub strong { color: var(--ink-1); font-weight: 700; }
        .ag-hero__trust {
          margin-top: 22px;
          display: inline-flex; flex-wrap: wrap; align-items: center;
          gap: 10px; justify-content: center;
          font-family: var(--font-mono); font-size: 11px; font-weight: 600;
          letter-spacing: 0.04em; color: var(--ink-4);
        }
        .ag-hero__trust-item { display: inline-flex; align-items: center; gap: 5px; }
        .ag-hero__trust-sep { color: var(--ink-5, #d1d1d6); }

        /* CTA BUTTON */
        .ag-cta-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          background: var(--bac-blue); color: #fff;
          font-family: var(--font-sans); font-weight: 700; font-size: 16px;
          padding: 18px 28px; border-radius: 14px; border: 0; cursor: pointer;
          width: 100%; max-width: 380px;
          box-shadow: 0 12px 30px rgba(0,102,254,.32);
          transition: all .16s var(--ease-out);
          -webkit-tap-highlight-color: transparent;
          min-height: 60px;
        }
        .ag-cta-btn:hover {
          background: var(--bac-blue-700); transform: translateY(-2px);
          box-shadow: 0 16px 38px rgba(0,102,254,.42);
        }
        .ag-cta-btn:active { transform: translateY(0); }
        .ag-cta-btn--inverted { background: #fff; color: var(--bac-blue); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
        .ag-cta-btn--inverted:hover { background: #fff; color: var(--bac-blue-700); transform: translateY(-2px); }

        /* MÉTODO */
        .ag-method { background: #fff; padding: 64px 18px 56px; }
        .ag-method__inner { max-width: 1080px; margin: 0 auto; text-align: center; }
        .ag-method__title {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(28px, 6vw, 44px); line-height: 1.06;
          letter-spacing: -0.025em; color: var(--ink-1);
          margin: 0 0 18px 0;
        }
        .ag-method__sub {
          font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
          color: var(--ink-3); margin: 0 auto 40px;
          max-width: 580px;
        }
        .ag-method__sub strong { color: var(--ink-1); font-weight: 700; }
        .ag-cards {
          display: grid; grid-template-columns: 1fr; gap: 16px;
          text-align: left;
        }
        .ag-card {
          background: var(--bg-alt); border: 1px solid var(--line);
          border-radius: 16px; padding: 24px;
          transition: all .2s var(--ease-out);
        }
        .ag-card:hover { border-color: var(--bac-blue); transform: translateY(-2px); }
        .ag-card__icon {
          width: 44px; height: 44px; border-radius: 10px;
          background: rgba(0,102,254,.1); color: var(--bac-blue);
          display: flex; align-items: center; justify-content: center;
          margin-bottom: 16px;
        }
        .ag-card__num {
          font-family: var(--font-mono); font-size: 11px; font-weight: 700;
          letter-spacing: 0.08em; color: var(--bac-blue);
          margin-bottom: 6px;
        }
        .ag-card__title {
          font-family: var(--font-display); font-weight: 900;
          font-size: 19px; line-height: 1.2;
          letter-spacing: -0.015em; color: var(--ink-1);
          margin: 0 0 8px 0;
        }
        .ag-card__desc {
          font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
          color: var(--ink-3); margin: 0;
        }
        .ag-card__desc strong { color: var(--ink-1); font-weight: 600; }

        /* COMO FUNCIONA */
        .ag-how { background: var(--bg-alt); padding: 60px 18px 56px; }
        .ag-how__inner { max-width: 720px; margin: 0 auto; text-align: center; }
        .ag-how__title {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(26px, 5.6vw, 38px); line-height: 1.1;
          letter-spacing: -0.025em; color: var(--ink-1);
          margin: 0 0 36px 0;
        }
        .ag-steps {
          display: flex; flex-direction: column; gap: 16px;
          text-align: left;
        }
        .ag-step {
          background: #fff; border: 1px solid var(--line);
          border-radius: 14px; padding: 20px;
          display: flex; gap: 16px; align-items: flex-start;
        }
        .ag-step__num {
          font-family: var(--font-display); font-weight: 900;
          font-size: 26px; line-height: 1;
          color: var(--bac-blue); flex-shrink: 0;
          letter-spacing: -0.04em;
        }
        .ag-step__body h3 {
          font-family: var(--font-display); font-weight: 900;
          font-size: 17px; line-height: 1.2;
          color: var(--ink-1); margin: 0 0 4px 0;
          letter-spacing: -0.015em;
        }
        .ag-step__body p {
          font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
          color: var(--ink-3); margin: 0;
        }

        /* CTA FINAL */
        .ag-final { background: #fff; padding: 56px 18px 64px; }
        .ag-final__inner { max-width: 1080px; margin: 0 auto; }
        .ag-final__card {
          background: var(--ink-1); color: #fff;
          border-radius: 20px; padding: 44px 26px;
          text-align: center;
        }
        .ag-final__title {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(28px, 7vw, 48px); line-height: 1.04;
          letter-spacing: -0.03em; color: #fff;
          margin: 0 0 16px 0;
        }
        .ag-final__sub {
          font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
          color: rgba(255,255,255,.74); margin: 0 auto 28px;
          max-width: 480px;
        }

        /* FOOTER */
        .ag-foot { background: var(--bg-alt); border-top: 1px solid var(--line); }
        .ag-foot__inner {
          max-width: 1100px; margin: 0 auto; padding: 24px 18px;
          display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
          justify-content: space-between;
        }
        .ag-foot__meta {
          font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
        }

        @media (min-width: 720px) {
          .ag-hero { padding: 56px 24px 72px; }
          .ag-hero__sub { font-size: 19px; max-width: 580px; margin-left: auto; margin-right: auto; }
          .ag-method { padding: 88px 24px; }
          .ag-method__sub { font-size: 17px; }
          .ag-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
          .ag-how { padding: 80px 24px; }
          .ag-step { padding: 24px 28px; }
          .ag-step__num { font-size: 32px; }
          .ag-step__body h3 { font-size: 19px; }
          .ag-step__body p { font-size: 15px; }
          .ag-final { padding: 80px 24px; }
          .ag-final__card { padding: 64px 48px; }
          .ag-final__sub { font-size: 18px; }
        }
      `}</style>
    </div>
  );
}