// app.jsx — Main LUE landing page assembly

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryHue": 270,
  "heroGlow": "high",
  "ctaCopy": "Quero qualificar meus leads",
  "showQualifiedTag": true,
  "compactNav": false
}/*EDITMODE-END*/;

function applyHue(hue) {
  // Update CSS vars for primary palette by rotating hue around base 270
  // Base purple #7C3AED ≈ hsl(262 83% 58%); we drive new colors by hue
  const root = document.documentElement.style;
  root.setProperty('--primary', `hsl(${hue} 83% 58%)`);
  root.setProperty('--primary-2', `hsl(${hue} 75% 42%)`);
  root.setProperty('--primary-3', `hsl(${hue} 75% 32%)`);
  root.setProperty('--lavender', `hsl(${hue} 87% 90%)`);
  root.setProperty('--lavender-bg', `hsl(${hue} 90% 96%)`);
}

function ScrollReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
    return () => io.disconnect();
  });
  return null;
}

function App() {
  const t = TWEAK_DEFAULTS;

  React.useEffect(() => {
    applyHue(t.primaryHue);
  }, [t.primaryHue]);

  React.useEffect(() => {
    // Hero glow intensity
    const hero = document.querySelector('.hero');
    if (!hero) return;
    const intensities = {
      low:  '0.25', med: '0.45', high: '0.6',
    };
    const v = intensities[t.heroGlow] || '0.45';
    hero.style.setProperty('--glow', v);
  }, [t.heroGlow]);

  // Hide qualified-tag if tweak off
  React.useEffect(() => {
    const tag = document.querySelector('.qualified-tag');
    if (tag) tag.style.display = t.showQualifiedTag ? 'flex' : 'none';
  }, [t.showQualifiedTag]);

  React.useEffect(() => {
    // Update primary CTA copy in hero
    const btn = document.querySelector('.hero .btn-primary');
    if (btn) {
      const arrow = btn.querySelector('.arrow');
      btn.textContent = '';
      btn.append(t.ctaCopy + ' ');
      if (arrow) btn.append(arrow);
    }
  }, [t.ctaCopy]);

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <PainSection/>
        <SolutionSection/>
        <HowSection/>
        <FeaturesSection/>
        <CompareSection/>
        <FAQSection/>
        <FinalCTA/>
      </main>
      <Footer/>
      <ScrollReveal/>
    </>
  );
}

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