// App principal — Landing v2 · Estúdio 9J
// Monta a página, gerencia idioma, modal, tweaks e CTA do WhatsApp.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF3E8E",
  "lang": "pt",
  "showWave": true,
  "density": "cinema"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = React.useState(false);

  const accent = tweaks.accent || T.magenta;
  const lang = tweaks.lang || 'pt';
  const copy = COPY[lang] || COPY.pt;

  const waMsg = encodeURIComponent(
    lang === 'pt'
      ? 'Olá! Vim do site do Estúdio 9J e gostaria de pedir um orçamento.'
      : 'Hi! I came from Estúdio 9J\'s website and would like to request a quote.'
  );
  const waLink = `https://wa.me/5511936213170?text=${waMsg}`;

  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    <>
      <Header lang={lang} setLang={(l) => setTweak('lang', l)} accent={accent} copy={copy} onOpenModal={openModal} />

      <main>
        <Hero copy={copy} accent={accent} onOpenModal={openModal} showWave={tweaks.showWave} density={tweaks.density} />
        <EngEqEquipamentos copy={copy} accent={accent} />
        <Personalizacao copy={copy} accent={accent} waLink={waLink} />
        <Servicos copy={copy} accent={accent} />
        <ComoFunciona copy={copy} accent={accent} />
        <Segmentos copy={copy} accent={accent} />
        <Depoimentos copy={copy} accent={accent} />
        <Planos copy={copy} accent={accent} onOpenModal={openModal} />
        <FAQ copy={copy} accent={accent} />
        <Localizacao copy={copy} accent={accent} />
        <CTAFinal copy={copy} accent={accent} onOpenModal={openModal} waLink={waLink} />
      </main>

      <Footer copy={copy} accent={accent} waLink={waLink} />

      <FloatingCTA waLink={waLink} accent={accent} />

      <ContactModal open={modalOpen} onClose={closeModal} copy={copy} accent={accent} waLink={waLink} />

      <TweaksPanel>
        <TweakSection label="Idioma · Language">
          <TweakRadio
            label="Lang"
            value={tweaks.lang} onChange={(v) => setTweak('lang', v)}
            options={[{value: 'pt', label: 'PT-BR'}, {value: 'en', label: 'EN'}]}
          />
        </TweakSection>

        <TweakSection label="Cor de sinal · Accent">
          <TweakColor
            label="Acento"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[T.magenta, T.canary, T.cyan, T.sunset]}
          />
        </TweakSection>

        <TweakSection label="Densidade tipográfica">
          <TweakRadio
            label="Display"
            value={tweaks.density} onChange={(v) => setTweak('density', v)}
            options={[{value: 'compact', label: 'Compacto'}, {value: 'cinema', label: 'Cinema'}]}
          />
        </TweakSection>

        <TweakSection label="Hero waveform">
          <TweakToggle
            value={tweaks.showWave} onChange={(v) => setTweak('showWave', v)}
            label="Mostrar onda"
          />
        </TweakSection>
      </TweaksPanel>

      {/* Animações de entrada por seção (IntersectionObserver) */}
      <SectionFader />
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// SectionFader — fade + translateY entrada via IntersectionObserver
// ─────────────────────────────────────────────────────────────
function SectionFader() {
  React.useEffect(() => {
    const els = document.querySelectorAll('main > section');
    const viewportBottom = window.innerHeight;
    els.forEach((el, i) => {
      const rect = el.getBoundingClientRect();
      // Hide only sections that start BELOW the initial viewport
      if (rect.top < viewportBottom) return;
      el.style.opacity = '0';
      el.style.transform = 'translateY(24px)';
      el.style.transition = 'opacity .65s ease-out, transform .65s ease-out';
    });
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.style.opacity = '1';
          e.target.style.transform = 'translateY(0)';
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.04, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => {
      if (el.style.opacity === '0') obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);
  return null;
}

// Mount
ReactDOM.createRoot(document.getElementById('root')).render(<App />);