// Main app
const { useState: useS, useEffect: useE } = React;

function App() {
  const [state, setState] = useS(window.TWEAK_DEFAULTS);
  const [tweaksOn, setTweaksOn] = useS(false);

  // Tweaks protocol
  useE(() => {
    const handler = (ev) => {
      const d = ev.data || {};
      if (d.type === '__activate_edit_mode') setTweaksOn(true);
      if (d.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({type:'__edit_mode_available'}, '*'); } catch(e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply darkness to body
  useE(() => {
    const bgMap = { base:'#0a0a0f', deeper:'#050507', softer:'#111118' };
    document.body.style.background = bgMap[state.darkness] || '#0a0a0f';
    document.documentElement.style.setProperty('--accent', state.accent);
  }, [state.darkness, state.accent]);

  const accent = state.accent;

  const sections = {
    problem: <Problem accent={accent} key="problem"/>,
    solution: <Solution accent={accent} key="solution"/>,
    featA: <FeatureA accent={accent} key="fa"/>,
    featB: <FeatureB accent={accent} key="fb"/>,
    featC: <FeatureC accent={accent} key="fc"/>,
    featD: <FeatureD accent={accent} key="fd"/>,
  };

  let order;
  if (state.sectionOrder === 'solutionFirst') {
    order = [sections.solution, sections.problem, sections.featA, sections.featB, sections.featC, sections.featD];
  } else if (state.sectionOrder === 'featuresFirst') {
    order = [sections.featA, sections.featB, sections.featC, sections.featD, sections.problem, sections.solution];
  } else {
    order = [sections.problem, sections.solution, sections.featA, sections.featB, sections.featC, sections.featD];
  }

  return (
    <div className={`min-h-screen text-white ${state.mockupMinimal?'minimal-mocks':''}`}>
      <Nav accent={accent} current="landing"/>
      <main>
        <Hero accent={accent} heroVariant={state.heroVariant} density={state.density}/>
        <TestimonialStrip accent={accent}/>
        <TrustBar trustVariant={state.trustVariant} accent={accent}/>
        {order}
        <Habit accent={accent}/>
        <TestimonialSpotlight accent={accent}/>
        <Pricing accent={accent}/>
        <FinalCTA accent={accent}/>
      </main>
      <Footer accent={accent}/>
      <TweaksPanel state={state} setState={setState} visible={tweaksOn} onClose={()=>setTweaksOn(false)}/>
    </div>
  );
}

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