/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "terminal",
  "accentColor": "#0040ff"
}/*EDITMODE-END*/;

function Nav({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" style={{
      boxShadow: scrolled ? '0 1px 0 rgba(0,0,0,0.06)' : 'none'
    }}>
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <Brand size={32} />
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#servicos">Serviços</a>
          <a className="nav-link" href="#diferenciais">Diferenciais</a>
          <a className="nav-link" href="#comparativo">Comparativo</a>
          <a className="nav-link" href="#processo">Processo</a>
          <a className="nav-link" href="#faq">FAQ</a>
          <a className="nav-link" href="#contato">Contato</a>
          <button className="nav-cta" onClick={onCta}>
            Solicitar orçamento
            <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      </div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accentColor);
    // derive a slightly lighter version
    document.documentElement.style.setProperty('--accent-2', t.accentColor === '#0040ff' ? '#0066ff' : t.accentColor);
  }, [t.accentColor]);

  // Scroll reveal — one-shot entrance animation per element.
  // Default state is visible; animation only adds polish.
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, [t.heroVariant]);

  const scrollToContato = () => {
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const Hero = t.heroVariant === 'kinetic' ? HeroKinetic
    : t.heroVariant === 'terminal' ? HeroTerminal
    : HeroMosaic;

  return (
    <div className="page" id="top">
      <Nav onCta={scrollToContato} />
      <Hero onCta={scrollToContato} />
      <Marquee />
      <Services />
      <Differentials />
      <Compare />
      <MarketStats />
      <Process />
      <FAQ />
      <Contact />
      <Footer />

      <StickyCTA onClick={scrollToContato} />
      <CustomCursor />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variação"
          value={t.heroVariant}
          options={['kinetic', 'terminal', 'mosaic']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakSection label="Cor de destaque" />
        <TweakColor
          label="Acento"
          value={t.accentColor}
          options={['#0040ff', '#0a0a0a', '#ff3d00', '#00b673', '#7c3aed']}
          onChange={(v) => setTweak('accentColor', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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