/* global React */

// ===== FAQ accordion =====
function FAQ() {
  const items = [
    {
      q: 'Quanto custa fazer um app ou site com vocês?',
      a: 'O preço depende do escopo, mas trabalhamos com orçamento fixo e transparente — sem surpresa no caminho. Sites institucionais começam a partir de uma faixa acessível; apps mobile com backend são cobrados por entrega ou sprint. No briefing inicial já te passamos uma faixa realista em 48 horas.'
    },
    {
      q: 'Em quanto tempo o projeto fica pronto?',
      a: 'Sites institucionais: 2 a 4 semanas. MVPs de app mobile: 4 a 8 semanas. Produtos completos: 2 a 4 meses. A média do mercado é o dobro disso porque diluem o time em vários clientes — a gente trabalha enxuto e focado.'
    },
    {
      q: 'O código fica comigo no final?',
      a: '100% seu. Repositório no seu GitHub/GitLab, contas das lojas no seu CNPJ, infraestrutura no seu provedor. Você nunca fica refém da gente. Documentamos tudo no handover.'
    },
    {
      q: 'Vocês trabalham com LGPD e compliance?',
      a: 'Sim. Toda solução é desenhada com LGPD em mente: criptografia, consentimento explícito, logs de auditoria, política de privacidade gerada e termos de uso. Para projetos em saúde, finanças ou educação, montamos o checklist de compliance específico.'
    },
    {
      q: 'Como é a forma de pagamento?',
      a: 'Modelo padrão: 40% no início, 30% na entrega do design aprovado e 30% no go-live. Parcelamos em até 6× sem juros no boleto. Para projetos de evolução contínua, trabalhamos com mensalidade fixa por sprint.'
    },
    {
      q: 'E depois que o app vai para o ar?',
      a: 'Inclui 30 dias de suporte gratuito para ajustes, correções e dúvidas. Depois disso, você pode contratar plano de evolução (novas features) ou só manutenção (correções e atualizações de lojas/SO). Sem amarração — você cancela quando quiser.'
    },
    {
      q: 'Vocês usam IA no desenvolvimento?',
      a: 'Sim, como ferramenta — não como milagre. IA acelera código repetitivo, geração de testes e revisão. Mas decisões de arquitetura, UX e produto continuam sendo feitas por humanos seniores. O resultado é mais velocidade sem perder qualidade.'
    },
    {
      q: 'Como começo?',
      a: 'Você manda um WhatsApp ou preenche o formulário no fim da página descrevendo a ideia. A gente responde em até 48 horas com uma proposta inicial. Se fizer sentido, marcamos uma call de 30 minutos. Sem compromisso até a assinatura.'
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section faq" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal"><span className="dot"></span> 05 · Perguntas frequentes</span>
            <h2 className="reveal delay-1">
              As <span className="accent">8 dúvidas</span><br/>
              que todo cliente faz.
            </h2>
          </div>
          <p className="lede reveal delay-2">
            Respostas diretas, sem rodeio comercial. Se faltar alguma,
            é só perguntar no WhatsApp.
          </p>
        </div>

        <div className="faq-list reveal">
          {items.map((it, i) => (
            <button
              key={i}
              className={`faq-item ${open === i ? 'open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
            >
              <span className="faq-num">// {String(i + 1).padStart(2, '0')}</span>
              <span className="faq-q">{it.q}</span>
              <span className="faq-icon" aria-hidden="true">
                <span></span><span></span>
              </span>
              <div className="faq-a-wrap">
                <p className="faq-a">{it.a}</p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Sticky CTA pill =====
function StickyCTA({ onClick }) {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.body.scrollHeight - window.innerHeight - 400;
      setVisible(y > window.innerHeight * 0.8 && y < max);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      className="sticky-cta"
      onClick={onClick}
      aria-label="Solicitar orçamento"
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.96)',
        pointerEvents: visible ? 'auto' : 'none',
      }}
    >
      <span className="dot"></span>
      <span className="lab">Solicitar orçamento</span>
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M5 12h14M13 5l7 7-7 7" />
      </svg>
    </button>
  );
}

// ===== Custom Cursor =====
function CustomCursor() {
  React.useEffect(() => {
    if (window.matchMedia('(pointer: coarse)').matches) return; // skip on touch
    const dot = document.createElement('div');
    const ring = document.createElement('div');
    dot.className = 'cursor-dot';
    ring.className = 'cursor-ring';
    document.body.appendChild(dot);
    document.body.appendChild(ring);

    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rx = mx, ry = my;
    let raf;
    const move = (e) => { mx = e.clientX; my = e.clientY; };
    window.addEventListener('mousemove', move);

    const loop = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      dot.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
      ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(loop);
    };
    loop();

    const onOver = (e) => {
      const t = e.target;
      if (t.closest && t.closest('a, button, input, textarea, [data-cursor]')) {
        ring.classList.add('hover');
      } else {
        ring.classList.remove('hover');
      }
    };
    document.addEventListener('mouseover', onOver);

    const onDown = () => ring.classList.add('down');
    const onUp = () => ring.classList.remove('down');
    document.addEventListener('mousedown', onDown);
    document.addEventListener('mouseup', onUp);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', move);
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('mouseup', onUp);
      dot.remove();
      ring.remove();
    };
  }, []);
  return null;
}

// ===== Animated Counter hook =====
function useCountUp(end, duration = 1600) {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(end * eased);
            if (p < 1) requestAnimationFrame(tick);
            else setVal(end);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [end, duration]);

  return [val, ref];
}

function AnimatedNum({ value, decimals = 0, suffix = '' }) {
  const [v, ref] = useCountUp(value);
  const formatted = v.toFixed(decimals).replace('.', ',');
  return <span ref={ref}>{formatted}{suffix}</span>;
}

Object.assign(window, { FAQ, StickyCTA, CustomCursor, AnimatedNum });