/* global React */
// ─────────────────────────────────────────────────────────────
// Moraes Digital — landing page sections
// ─────────────────────────────────────────────────────────────

// IntersectionObserver scoped to the device viewport so each
// preview reveals independently as the user scrolls inside it.
function useReveal(rootRef) {
  React.useEffect(() => {
    const lp = rootRef.current;
    if (!lp) return;
    // Walk up to the actual scroll container.
    let vp = lp.parentElement;
    while (vp) {
      const oy = getComputedStyle(vp).overflowY;
      if (oy === 'auto' || oy === 'scroll') break;
      vp = vp.parentElement;
    }
    const allEls = Array.from(lp.querySelectorAll('.reveal'));

    // Browsers pause CSS transitions when document.hidden, leaving elements
    // stuck at opacity:0 even after .in is added. Detect that and kill
    // transitions while hidden; restore on visibilitychange.
    const handleHidden = () => {
      if (document.hidden) {
        allEls.forEach((el) => { el.style.transition = 'none'; });
      }
    };
    handleHidden();
    const onVis = () => {
      if (!document.hidden) {
        allEls.forEach((el) => { el.style.transition = ''; });
      } else {
        handleHidden();
      }
    };
    document.addEventListener('visibilitychange', onVis);

    if (!vp) {
      // No scroll container — reveal everything.
      allEls.forEach((el) => el.classList.add('in'));
      return () => document.removeEventListener('visibilitychange', onVis);
    }

    let pending = allEls.slice();
    const check = () => {
      const vRect = vp.getBoundingClientRect();
      const trigger = vRect.bottom - vRect.height * 0.08;
      const top = vRect.top;
      const next = [];
      for (const el of pending) {
        const r = el.getBoundingClientRect();
        if (r.top < trigger && r.bottom > top - 10) {
          el.classList.add('in');
        } else {
          next.push(el);
        }
      }
      pending = next;
      if (!pending.length) vp.removeEventListener('scroll', check);
    };

    check();
    requestAnimationFrame(check);
    setTimeout(check, 100);
    setTimeout(check, 400);
    // Safety net: anything still pending after 3s gets revealed anyway so
    // a hidden-tab load never shows a blank LP.
    const safety = setTimeout(() => {
      pending.forEach((el) => el.classList.add('in'));
      pending = [];
    }, 3000);

    vp.addEventListener('scroll', check, { passive: true });
    return () => {
      vp.removeEventListener('scroll', check);
      document.removeEventListener('visibilitychange', onVis);
      clearTimeout(safety);
    };
  }, []);
}

// ── tiny inline icons ────────────────────────────────────────
const I = {
  arrow: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  check: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12l5 5L20 6" />
    </svg>
  ),
  plus: (s = 14) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  pin: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7-7.5-7-12a7 7 0 0114 0c0 4.5-7 12-7 12z" />
      <circle cx="12" cy="9" r="2.5" fill="currentColor" stroke="none" />
    </svg>
  ),
  target: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="5" />
      <circle cx="12" cy="12" r="1.5" fill="currentColor" />
    </svg>
  ),
  doc: (s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 3h9l4 4v13a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z" />
      <path d="M15 3v4h4M9 13h6M9 17h4" />
    </svg>
  ),
};

// ── animated counter ─────────────────────────────────────────
function CountUp({ to, suffix = '', duration = 1400, decimals = 0 }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let vp = el.parentElement;
    while (vp) {
      const oy = getComputedStyle(vp).overflowY;
      if (oy === 'auto' || oy === 'scroll') break;
      vp = vp.parentElement;
    }
    if (!vp) return;
    const run = () => {
      if (started.current) return;
      started.current = true;
      // requestAnimationFrame is throttled when document is hidden — just
      // snap to final value so the LP doesn't look broken in background tabs.
      if (document.hidden) {
        setN(to);
        vp.removeEventListener('scroll', check);
        return;
      }
      const start = performance.now();
      const tick = (now) => {
        const t = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - t, 3);
        setN(to * eased);
        if (t < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
      vp.removeEventListener('scroll', check);
    };
    const check = () => {
      const vRect = vp.getBoundingClientRect();
      const r = el.getBoundingClientRect();
      if (r.top < vRect.bottom - 20 && r.bottom > vRect.top) run();
    };
    requestAnimationFrame(() => { check(); requestAnimationFrame(check); });
    vp.addEventListener('scroll', check, { passive: true });
    return () => vp.removeEventListener('scroll', check);
  }, [to]);
  const display = decimals ? n.toFixed(decimals) : Math.round(n);
  return <span ref={ref}>{display}{suffix}</span>;
}

// ── HERO ─────────────────────────────────────────────────────
function Hero({ headline, mobile }) {
  return (
    <section className="hero">
      <nav className="nav">
        <div className="logo">
          <span className="mark">M</span>
          <span>moraes<i style={{fontStyle:'italic',fontWeight:400,opacity:0.55}}>.digital</i></span>
        </div>
        <div className="nav-links">
          <a href="#solucao">Como funciona</a>
          <a href="#oferta">Oferta</a>
          <a href="#faq">FAQ</a>
          <a href="#contato">Contato</a>
        </div>
      </nav>

      {!mobile && (
        <div className="hero-orb">
          <div className="spin">
            <div className="ring"></div>
            <div className="ring r2"></div>
            <div className="ring r3"></div>
          </div>
          <div className="pill">★ ACEITANDO CLIENTES</div>
        </div>
      )}

      <div className="hero-grid">
        <div className="hero-eyebrow-row reveal">
          <span className="eyebrow"><span className="dot"></span>MARKETING DIGITAL · NEGÓCIO LOCAL</span>
          <span className="rule"></span>
        </div>

        <h1 className="reveal d1" dangerouslySetInnerHTML={{ __html: headline }}></h1>

        <p className="hero-sub reveal d2">
          Tráfego pago, Google Meu Negócio e landing page profissional trabalhando juntos pra transformar cliques em clientes reais no seu negócio.
        </p>

        <div className="hero-cta-row reveal d3">
          <a href="https://catalogomoraesdigital.netlify.app/" target="_blank" rel="noopener" className="btn lg">
            Quero mais clientes agora
            <span className="arr">{I.arrow(14)}</span>
          </a>
          <div className="hero-cta-meta">
            Sem contrato longo<br />
            Sem complicação · Começa rápido
          </div>
        </div>

        <div className="hero-stats reveal d4">
          <div className="stat">
            <div className="num">+<CountUp to={3} /><span className="unit">pilares</span></div>
            <div className="label">Google · Tráfego · LP</div>
          </div>
          <div className="stat">
            <div className="num"><CountUp to={72} /><span className="unit">h</span></div>
            <div className="label">Pra primeira campanha no ar</div>
          </div>
          <div className="stat">
            <div className="num"><CountUp to={100} /><span className="unit">%</span></div>
            <div className="label">Foco em negócio local</div>
          </div>
          <div className="stat">
            <div className="num"><CountUp to={0} /><span className="unit">x</span></div>
            <div className="label">De achismo na estratégia</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── MARQUEE ─────────────────────────────────────────────────
function Marquee() {
  const items = ['Tráfego Pago', 'Google Meu Negócio', 'Landing Page', 'Mais Clientes', 'Sem Achismo', 'Resultado Real'];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((s, i) => <span key={i} className="marquee-item">{s}</span>)}
      </div>
    </div>
  );
}

// ── SOLUÇÃO (3 PILARES) ──────────────────────────────────────
function Solucao() {
  const pilares = [
    {
      n: '01',
      icon: I.pin(28),
      title: 'Google Meu Negócio Otimizado',
      desc: 'Seu negócio aparecendo nas buscas do Google quando alguém perto de você procurar pelo que você oferece. Clínica, padaria, restaurante — quem está perto e procura, te acha.',
    },
    {
      n: '02',
      icon: I.target(28),
      title: 'Tráfego Pago Estratégico',
      desc: 'Anúncios no Google e no Instagram feitos pra atingir exatamente quem já tem interesse no seu serviço. Cada real investido trabalha pra trazer o cliente certo — não qualquer pessoa.',
    },
    {
      n: '03',
      icon: I.doc(28),
      title: 'Landing Page que Converte',
      desc: 'De nada adianta atrair clique se a página não convence. Uma página profissional, rápida e focada em uma coisa: transformar visita em contato, ligação ou agendamento.',
    },
  ];
  return (
    <section className="section" id="solucao">
      <div className="sec-head">
        <div className="reveal">
          <div className="eyebrow" style={{marginBottom: 22}}><span className="dot"></span>↳ COMO FUNCIONA</div>
          <h2>Os <em>3 pilares</em> que trazem clientes pro seu negócio local.</h2>
        </div>
        <div className="right reveal d2">
          A Moraes Digital trabalha com o que realmente funciona pra negócio que atende cliente na rua. Sem método mágico. Sem estratégia genérica copiada de e-commerce.
        </div>
      </div>

      <div className="pilares">
        {pilares.map((p, i) => (
          <div className="pilar reveal" key={p.n} style={{ transitionDelay: `${0.08 * i}s` }}>
            <div className="pilar-num">{p.n}</div>
            <div className="pilar-title">{p.title}</div>
            <div className="pilar-desc">{p.desc}</div>
            <div className="pilar-visual">{p.icon}</div>
          </div>
        ))}
      </div>

      <div className="flow-line reveal d3">
        <span>atrai</span>
        <span className="arrow">{I.arrow(14)}</span>
        <span>convence</span>
        <span className="arrow">{I.arrow(14)}</span>
        <span><em style={{fontStyle:'italic'}}>converte.</em></span>
      </div>
    </section>
  );
}

// ── BENEFICIOS ───────────────────────────────────────────────
function Beneficios() {
  const items = [
    'Seu negócio encontrado por quem já está procurando o que você vende',
    'Mais ligações, mensagens e agendamentos sem depender só de indicação',
    'Presença profissional no Google que passa credibilidade e confiança',
    'Anúncios gerenciados por quem entende — você foca no seu negócio',
    'Landing page que não deixa o cliente escapar: clara, rápida e com chamada pra ação',
    'Resultado consistente todo mês, não só no mês que você impulsionou um post',
  ];
  return (
    <section className="section dark">
      <div className="sec-head">
        <div className="reveal">
          <div className="eyebrow" style={{marginBottom: 22}}><span className="dot"></span>↳ O QUE MUDA</div>
          <h2>Seu negócio<br/><em><span style={{color: 'rgb(195, 239, 194)'}}>trabalhando</span></em> no digital.</h2>
        </div>
        <div className="right reveal d2" style={{color: 'rgba(241,237,227,0.7)'}}>
          Você não precisa virar especialista em marketing pra ter resultado. Precisa de quem faça certo, todo mês, sem você ter que cobrar.
        </div>
      </div>

      <div className="benefits-grid">
        {items.map((t, i) => (
          <div className="benefit reveal" key={i} style={{ transitionDelay: `${0.06 * i}s` }}>
            <div className="benefit-check">{I.check(16)}</div>
            <div className="benefit-text">{t}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── OBJEÇÕES ─────────────────────────────────────────────────
function Objections() {
  const items = [
    {
      q: 'Já tentei e não funcionou.',
      a: 'A maioria das experiências ruins com marketing digital vêm de estratégias genéricas, sem foco no negócio local. Tráfego pago mal configurado queima dinheiro. Google Meu Negócio abandonado não aparece. Landing page ruim não converte. A diferença está em fazer os três certos, juntos. É exatamente isso que a gente faz.',
    },
    {
      q: 'É caro. Não sei se o retorno vale.',
      a: 'A pergunta certa não é "quanto custa?" — é "quanto custa NÃO aparecer no Google enquanto seu concorrente aparece?". Cada cliente que chega pelo digital paga o investimento. Os próximos são lucro. Tem plano pra cada tamanho de negócio no catálogo.',
    },
    {
      q: 'Demora muito pra ver resultado.',
      a: 'Com tráfego pago, os primeiros resultados aparecem assim que a campanha entra no ar — geralmente em dias. Google Meu Negócio bem otimizado começa a aparecer em semanas. A landing page converte desde o primeiro clique. Não é mágica, mas também não é espera de meses.',
    },
  ];
  return (
    <section className="section">
      <div className="sec-head">
        <div className="reveal">
          <div className="eyebrow" style={{marginBottom: 22}}><span className="dot"></span>↳ EU SEI O QUE VOCÊ TÁ PENSANDO</div>
          <h2>As três coisas que <em>todo mundo</em> pensa antes de contratar.</h2>
        </div>
        <div className="right reveal d2">
          Respondidas sem rodeio. Se ainda ficou dúvida depois disso, melhor a gente conversar direto.
        </div>
      </div>

      <div className="objections">
        {items.map((o, i) => (
          <div className="objection reveal" key={i} style={{ transitionDelay: `${0.08 * i}s` }}>
            <div className="objection-quote">{o.q}</div>
            <div className="objection-answer">{o.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── GARANTIA ─────────────────────────────────────────────────
function Garantia() {
  return (
    <section className="section" style={{ background: 'var(--paper)' }}>
      <div className="guarantee reveal">
        <div className="guarantee-seal">
          <svg viewBox="0 0 200 200">
            <defs>
              <path id="circle" d="M 100, 100 m -76, 0 a 76,76 0 1,1 152,0 a 76,76 0 1,1 -152,0" />
            </defs>
            <text fontFamily="var(--font-mono)" fontSize="13" fontWeight="600" letterSpacing="4" fill="var(--ink)">
              <textPath href="#circle">SEM ENROLAÇÃO · COMPROMISSO COM RESULTADO · </textPath>
            </text>
            <circle cx="100" cy="100" r="48" fill="var(--ink)" />
            <path d="M 82 100 L 95 113 L 120 88" stroke="var(--accent)" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom: 18}}><span className="dot" style={{background:'var(--ink)'}}></span>GARANTIA</div>
          <h3>Não funcionou? A gente conversa.</h3>
          <p>
            Nos primeiros <strong>30 dias</strong>, se você sentir que não foi o que esperava, a gente revisa a estratégia ou ajusta o que precisar — sem briga, sem letra miúda. Nosso compromisso é com o seu resultado, não com fidelizar cliente insatisfeito.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── OFERTA ───────────────────────────────────────────────────
function Oferta() {
  const items = [
    'Gestão de Tráfego Pago (Google e/ou Meta)',
    'Otimização do Google Meu Negócio',
    'Criação de Landing Page Profissional',
  ];
  return (
    <section className="section" id="oferta">
      <div className="sec-head">
        <div className="reveal">
          <div className="eyebrow" style={{marginBottom: 22}}><span className="dot"></span>↳ A OFERTA</div>
          <h2>Tudo que <em>seu negócio</em> precisa pra aparecer e vender.</h2>
        </div>
        <div className="right reveal d2">
          Três frentes trabalhando juntas. Sem ferramenta sobrando, sem serviço inflado pra parecer mais. Só o que move a agulha.
        </div>
      </div>

      <div className="offer-card reveal">
        <div>
          <div className="eyebrow" style={{marginBottom: 18, color: 'var(--accent)'}}><span className="dot" style={{background:'var(--accent)'}}></span>O QUE VOCÊ LEVA</div>
          <h3>Pacote completo. Resultado conjunto.</h3>
          <p className="lead">
            Os três pilares contratados em conjunto, configurados, gerenciados e ajustados todo mês. Você foca em atender. A gente cuida de aparecer.
          </p>
          <a href="https://catalogomoraesdigital.netlify.app/" target="_blank" rel="noopener" className="btn invert lg">
            Ver planos e preços
            <span className="arr">{I.arrow(14)}</span>
          </a>
          <div className="offer-cta-meta">
            Catálogo completo · Falar no WhatsApp
          </div>
        </div>

        <div>
          <div className="offer-list">
            {items.map((t, i) => (
              <div className="offer-item" key={i}>
                <span className="offer-item-num">0{i+1}</span>
                <span className="offer-item-name">{t}</span>
                <span className="offer-item-check">{I.check(12)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: 'Serve pra qualquer tipo de negócio local?',
      a: 'Sim. Trabalhamos com clínicas, salões, prestadores de serviço e outros negócios que atendem cliente na região. Se você precisa que alguém perto te ache, a estratégia funciona.',
    },
    {
      q: 'Preciso entender de marketing pra contratar?',
      a: 'Não. Você cuida do seu negócio, a gente cuida do digital. Explicamos tudo de forma simples e você sempre sabe o que está sendo feito — sem termo técnico desnecessário.',
    },
    {
      q: 'Quanto tempo leva pra ver resultado?',
      a: 'Tráfego pago começa a gerar resultados nos primeiros dias. Google Meu Negócio otimizado aparece em semanas. Landing page converte desde o primeiro clique que chega. Sem espera de meses pra entender se está funcionando.',
    },
    {
      q: 'Como funcionam os planos e preços?',
      a: 'Os valores estão no nosso catálogo completo com todos os detalhes de cada plano. Acesse pelo botão de "Ver planos" ou fale direto no WhatsApp pra gente entender o que faz sentido pro seu caso.',
    },
    {
      q: 'Tem suporte? Como funciona?',
      a: 'Sim. Você tem acompanhamento direto via WhatsApp, reuniões mensais de alinhamento e um relatório claro com o que aconteceu, o que está dando certo e o que vai mudar no próximo mês.',
    },
    {
      q: 'Posso começar com apenas um dos serviços?',
      a: 'Sim, mas vale a conversa: o melhor resultado vem dos três pilares trabalhando juntos. Se for um plano de entrada, ajustamos a recomendação pro estágio do seu negócio.',
    },
  ];
  return (
    <section className="section" id="faq">
      <div className="sec-head">
        <div className="reveal">
          <div className="eyebrow" style={{marginBottom: 22}}><span className="dot"></span>↳ FAQ</div>
          <h2>Dúvidas que <em>quase todo mundo</em> tem.</h2>
        </div>
        <div className="right reveal d2">
          Respondidas direto. Se a sua não está aqui, manda um WhatsApp.
        </div>
      </div>

      <div className="faq-list reveal">
        {items.map((it, i) => (
          <div
            className={`faq-item ${open === i ? 'open' : ''}`}
            key={i}
            onClick={() => setOpen(open === i ? -1 : i)}
          >
            <div className="faq-q">
              <span>{it.q}</span>
              <span className="faq-toggle">{I.plus(14)}</span>
            </div>
            <div className="faq-a">{it.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── CTA FINAL + P.S. ─────────────────────────────────────────
function Final({ mobile }) {
  return (
    <section className="final" id="contato">
      <div className="final-bg-text">clientes.</div>
      <div className="final-grid">
        <div className="eyebrow reveal" style={{marginBottom: 24, color: 'rgba(241,237,227,0.55)'}}>
          <span className="dot"></span>↳ HORA DE COMEÇAR
        </div>
        <h2 className="reveal d1">
          Você chegou até aqui<br/>
          porque precisa de <em>mais clientes.</em>
        </h2>
        <p className="final-sub reveal d2">
          Não falta qualidade no que você faz — falta o digital trabalhar a seu favor. A gente coloca seu negócio na frente de quem já está procurando, e transforma clique em cliente.
        </p>
        <div className="reveal d3" style={{display:'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center'}}>
          <a href="https://catalogomoraesdigital.netlify.app/" target="_blank" rel="noopener" className="btn invert lg">
            Quero mais clientes — ver planos
            <span className="arr">{I.arrow(14)}</span>
          </a>
          {!mobile && (
            <a href="https://wa.me/553199639280?text=Ol%C3%A1!%20Vim%20pela%20landing%20page%20da%20Moraes%20Digital%20e%20quero%20saber%20mais%20sobre%20os%20planos." target="_blank" rel="noopener" className="btn ghost" style={{color:'var(--paper)', borderColor:'rgba(241,237,227,0.4)'}}>
              Falar no WhatsApp
              <span className="arr">{I.arrow(14)}</span>
            </a>
          )}
        </div>

        <div className="ps reveal d4">
          <span className="ps-tag">P.S.</span>
          <span className="ps-text">
            Todo dia que passa sem uma estratégia digital funcionando, é mais um dia o seu concorrente aparecendo no lugar de você. Os planos estão no catálogo. Dá uma olhada — pode ser a decisão que muda o mês do seu negócio.
          </span>
        </div>

        <div className="footer">
          <span>© 2026 Moraes Digital</span>
          <span>Tráfego · Google · LP — feito pra negócio local</span>
        </div>
      </div>
    </section>
  );
}

// ── LandingPage — composes everything ────────────────────────
function LandingPage({ device, headline }) {
  const rootRef = React.useRef(null);
  useReveal(rootRef);

  return (
    <div className={`lp ${device}`} ref={rootRef}>
      <Hero headline={headline} mobile={device === 'mobile'} />
      <Marquee />
      <Solucao />
      <Beneficios />
      <Objections />
      <Garantia />
      <Oferta />
      <FAQ />
      <Final mobile={device === 'mobile'} />
    </div>
  );
}

Object.assign(window, { LandingPage, CountUp });