// ============== Main App ==============

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#00C8E0", "#6C3AFF"],
  "headingFont": "Orbitron",
  "introIntensity": "cinematic",
  "starDensity": "rich",
  "gridOverlay": true
}/*EDITMODE-END*/;

const PALETTES = {
  "Cyan + Nova": ["#00C8E0", "#6C3AFF"],
  "Stellar Mint": ["#3FF0C5", "#7A5AE0"],
  "Solar Flare": ["#FF8A3D", "#E13DA8"],
  "Quantum Pink": ["#FF4FB5", "#5DC8FF"],
  "Plasma Gold": ["#FFD23F", "#7CFF8C"],
};

function useActiveSection(ids) {
  const [active, setActive] = React.useState(ids[0]);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      // pick the one most in view above the top half
      let best = null;
      entries.forEach(e => {
        if (e.isIntersecting) {
          if (!best || e.intersectionRatio > best.intersectionRatio) best = e;
        }
      });
      if (best) setActive(best.target.id);
    }, { threshold: [0.25, 0.5, 0.75], rootMargin: '-80px 0px -40% 0px' });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, [ids.join(',')]);
  return active;
}

function useReveal() {
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('revealed');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    // re-scan periodically because content mounts after app
    const scan = () => {
      document.querySelectorAll('.reveal:not(.revealed)').forEach(el => obs.observe(el));
    };
    scan();
    const interval = setInterval(scan, 500);
    setTimeout(() => clearInterval(interval), 5000);
    return () => { obs.disconnect(); clearInterval(interval); };
  }, []);
}

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const activeId = useActiveSection(['home', 'services', 'about', 'portfolio', 'pricing', 'contact']);
  useReveal();

  // Apply palette tweaks via CSS variable overrides
  React.useEffect(() => {
    const root = document.documentElement;
    const [a, b] = tw.palette || PALETTES["Cyan + Nova"];
    root.style.setProperty('--stellar-cyan', a);
    root.style.setProperty('--nova-purple', b);
    root.style.setProperty('--plasma-glow', a + '26');
  }, [tw.palette]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--font-heading', tw.headingFont);
    // rewrite all h1-h4 via a stylesheet
    let s = document.getElementById('__heading-font-style');
    if (!s) {
      s = document.createElement('style');
      s.id = '__heading-font-style';
      document.head.appendChild(s);
    }
    s.textContent = `
      h1, h2, h3, h4,
      .nav-brand, .intro-wordmark, .intro-chevron,
      .service-name, .step-num, .stat-num, .price-amount, .price-tier, .footer-brand, .price-card .price-tier {
        font-family: '${tw.headingFont}', sans-serif !important;
      }
    `;
  }, [tw.headingFont]);

  return (
    <React.Fragment>
      <Nav activeId={activeId} />
      <Hero />
      <IntroStrip />
      <Services />
      <About />
      <Portfolio />
      <Pricing />
      <CTABanner />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent gradient"
          value={tw.palette}
          options={Object.values(PALETTES)}
          onChange={(v) => setTweak('palette', v)}
        />

        <TweakSection label="Typography" />
        <TweakRadio
          label="Headlines"
          value={tw.headingFont}
          options={['Orbitron', 'Syne']}
          onChange={(v) => setTweak('headingFont', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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