// App entry — composes all sections + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lavender",
  "headlineStyle": "serif",
  "background": "paper",
  "showDashboard": true
}/*EDITMODE-END*/;

const App = () => {
  const { Hero, ProcessFlow, Metrics, Simulator, Integrations,
          FounderSituation, Features, FinalCTA, Footer,
          OnboardingModal } = window;
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [showOnboarding, setShowOnboarding] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      const btn = e.target.closest('a[href="#cta-final"], button[data-cta]');
      if (btn) { e.preventDefault(); setShowOnboarding(true); }
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  // Apply theme tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement;
    const accents = {
      lavender:  ['#7a76d6', '#ecebf7', '#e1dff3', '#c8c5e9'],
      sage:      ['#5d8b6a', '#e6efe6', '#d5e3d6', '#b8d0bb'],
      slate:     ['#475275', '#e7eaf2', '#d3d8e6', '#a8b1cb'],
      rose:      ['#c87a85', '#f4e7ea', '#ecd6db', '#dbb1ba'],
    };
    const [a, l1, l2, l3] = accents[tweaks.accent] || accents.lavender;
    r.style.setProperty('--accent', a);
    r.style.setProperty('--lavender', l1);
    r.style.setProperty('--lavender-2', l2);
    r.style.setProperty('--lavender-deep', l3);

    const bgs = { paper:'#f6f3ed', cream:'#faf6ee', cool:'#f3f4f8', warm:'#f8efe5' };
    r.style.setProperty('--paper', bgs[tweaks.background] || bgs.paper);
  }, [tweaks.accent, tweaks.background]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle } = window;

  return (
    <>
      {showOnboarding && <OnboardingModal onClose={() => setShowOnboarding(false)} />}
      <Hero/>
      <ProcessFlow/>
      <Metrics/>
      <Simulator/>
      <Integrations/>
      <FounderSituation/>
      <Features/>
      <FinalCTA/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakSelect label="Accent color"
            value={tweaks.accent} onChange={v=>setTweak('accent', v)}
            options={[
              {value:'lavender', label:'Lavender (default)'},
              {value:'sage', label:'Sage green'},
              {value:'slate', label:'Slate blue'},
              {value:'rose', label:'Muted rose'},
            ]}/>
          <TweakSelect label="Background tone"
            value={tweaks.background} onChange={v=>setTweak('background', v)}
            options={[
              {value:'paper', label:'Paper (default)'},
              {value:'cream', label:'Cream'},
              {value:'cool', label:'Cool gray'},
              {value:'warm', label:'Warm sand'},
            ]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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

// Reveal-on-scroll — element level only (.ri)
(function setupReveal() {
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
    });
  }, { threshold: 0, rootMargin: '0px 0px -40px 0px' });

  const observe = () => {
    document.querySelectorAll('.ri:not([data-io])').forEach(el => {
      el.setAttribute('data-io', '1');
      io.observe(el);
    });
  };

  // React + Babel 렌더링 완료 후 관찰 시작
  setTimeout(observe, 300);
  setTimeout(observe, 800); // fallback

  // 동적으로 추가되는 요소도 감지
  new MutationObserver(observe).observe(document.body, { childList: true, subtree: true });
})();