// ─── Tweaks + App Root v2 ─────────────────────────────────

function TweaksPanel({ tweaks, setTweaks }) {
  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, zIndex: 1000,
      width: 300, padding: 20,
      background: 'var(--bg-1)', border: '1px solid var(--line-strong)',
      borderRadius: 16,
      boxShadow: 'var(--shadow-lg)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--saffron)', letterSpacing: '0.15em', fontWeight: 600 }}>TWEAKS</span>
      </div>
      <div style={{ marginBottom: 14 }}>
        <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 8, textTransform: 'uppercase' }}>Accent</label>
        <div style={{ display: 'flex', gap: 6 }}>
          {[['saffron','#d97d2b'],['green','#1f6f52'],['navy','#0d1530'],['crimson','#b8314a']].map(([k, c]) => (
            <button key={k} onClick={() => {
              update('accent', k);
              document.documentElement.style.setProperty('--saffron', c);
            }} style={{
              flex: 1, padding: '8px 0', borderRadius: 6,
              border: tweaks.accent === k ? `1.5px solid ${c}` : '1px solid var(--line)',
              background: tweaks.accent === k ? 'var(--bg-2)' : 'var(--bg-1)',
              color: 'var(--ink-0)', fontSize: 11, cursor: 'pointer',
              textTransform: 'capitalize', fontWeight: 500,
            }}>
              <span style={{ display: 'inline-block', width: 8, height: 8, background: c, borderRadius: 2, marginRight: 4, verticalAlign: 'middle' }} />
              {k}
            </button>
          ))}
        </div>
      </div>
      <div>
        <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 6, textTransform: 'uppercase' }}>Hero headline</label>
        <select
          value={tweaks.heroHeadline}
          onChange={e => update('heroHeadline', e.target.value)}
          style={{ width: '100%', padding: 8, background: 'var(--bg-2)', color: 'var(--ink-0)', border: '1px solid var(--line)', borderRadius: 8, fontSize: 12, fontFamily: 'inherit' }}
        >
          <option>The quiet intelligence behind a safer, smarter school.</option>
          <option>Your school, connected. Your students, known. Your parents, calm.</option>
          <option>Built for Indian schools. Loved by Indian parents.</option>
        </select>
      </div>
    </div>
  );
}

function App() {
  const [demoOpen, setDemoOpen] = useState(false);
  const [aboutOpen, setAboutOpen] = useState(false);
  const [careersOpen, setCareersOpen] = useState(false);
  const [tweaks, setTweaks] = useState(window.__TWEAKS_V2__);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    const h = e => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', h);
    window.parent?.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', h);
  }, []);

  return (
    <div>
      <Nav onDemoClick={() => setDemoOpen(true)} />
      <Hero onDemoClick={() => setDemoOpen(true)} />
      <HowItWorksSection />
      <EvaSection />
      <SegmentedSection />
      <FeatureGrid />
      <ParentBusSection />
      <GradingRiskSection />
      <AutomationMathSection />
      <CTASection onDemoClick={() => setDemoOpen(true)} />
      <Footer 
        onDemoClick={() => setDemoOpen(true)} 
        onAboutClick={() => setAboutOpen(true)}
        onCareersClick={() => setCareersOpen(true)}
      />
      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />
      <AboutModal open={aboutOpen} onClose={() => setAboutOpen(false)} />
      <CareersModal open={careersOpen} onClose={() => setCareersOpen(false)} />
      {tweaksVisible && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />}
    </div>
  );
}

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