// app.jsx — Initiative root
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gold": "#b8945a",
  "mode": "light",
  "density": "regular",
  "motif": true,
  "tone": "warmer",
  "headline": "Capital, counsel,<br/>and the <em>initiative</em><br/>to ship.",
  "sub": "Initiative is a Luxembourg-based holding company. We invest in European, UK and US technology businesses—and we sit on the bench, in the room, when it is time to build them out."
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply mode + density + gold to the document root
  useEffect(() => {
    document.documentElement.dataset.mode = t.mode;
    document.documentElement.dataset.density = t.density;
    document.documentElement.style.setProperty('--gold', t.gold);
    // derive a slightly lighter variant
    document.documentElement.style.setProperty('--gold-2', t.gold);
    document.documentElement.classList.toggle('motif-off', !t.motif);
  }, [t.mode, t.density, t.gold, t.motif]);

  // Build hero copy from tone
  const headline = t.tone === 'institutional'
    ? 'Patient capital.<br/>Operating <em>counsel</em>.<br/>Built in Luxembourg.'
    : t.headline;
  const sub = t.tone === 'institutional'
    ? 'Initiative S.A. is a Luxembourg-domiciled holding pairing direct investments in European, UK and US technology businesses with senior advisory across strategy, board, AI, and execution.'
    : t.sub;

  return (
    <>
      <Nav />
      <Hero headline={headline} sub={sub} />
      <Arms tone={t.tone} />
      <Advisory />
      <Approach />
      <Portfolio />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks · Initiative">
        <TweakSection label="Palette" />
        <TweakColor label="Gold" value={t.gold} onChange={(v) => setTweak('gold', v)} />
        <TweakRadio label="Mode" value={t.mode} options={['light', 'dark']}
                    onChange={(v) => setTweak('mode', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
                    options={['compact','regular','airy']}
                    onChange={(v) => setTweak('density', v)} />
        <TweakToggle label="Motif (arrows)" value={t.motif}
                     onChange={(v) => setTweak('motif', v)} />

        <TweakSection label="Voice" />
        <TweakRadio label="Tone" value={t.tone}
                    options={[{value:'warmer',label:'Warmer'},{value:'institutional',label:'Institutional'}]}
                    onChange={(v) => setTweak('tone', v)} />

        <TweakSection label="Hero copy" />
        <TweakText label="Headline (HTML)" value={t.headline}
                   onChange={(v) => setTweak('headline', v)} />
        <TweakText label="Sub" value={t.sub}
                   onChange={(v) => setTweak('sub', v)} />
      </TweaksPanel>
    </>
  );
}

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