const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c9a96e",
  "layout": "split"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const tm = setTimeout(() => {
      document.getElementById('loader')?.classList.add('lift');
    }, 2200);
    const tm2 = setTimeout(() => {
      const el = document.getElementById('loader');
      if (el) el.style.display = 'none';
    }, 3400);
    return () => { clearTimeout(tm); clearTimeout(tm2); };
  }, []);

  // Apply accent to CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // Compute lighter accent
    document.documentElement.style.setProperty('--accent-2', lighten(t.accent, 0.08));
  }, [t.accent]);

  const accentOptions = ['#c9a96e', '#b8956a', '#d4af37', '#8b6f47', '#a89070'];

  return (
    <React.Fragment>
      <Nav accent={t.accent} />
      <Hero accent={t.accent} />
      <About accent={t.accent} />
      <Companies accent={t.accent} layout={t.layout} />
      <CTA accent={t.accent} />
      <Footer accent={t.accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Look & feel">
          <TweakColor label="Accent kleur" value={t.accent} options={accentOptions}
            onChange={v => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection title="Bedrijfskaarten">
          <TweakRadio label="Layout" value={t.layout}
            options={[{value:'split', label:'Split'}, {value:'stacked', label:'Stacked'}]}
            onChange={v => setTweak('layout', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

function lighten(hex, amount) {
  // Simple hex lighten
  const c = hex.replace('#','');
  const r = Math.min(255, parseInt(c.substr(0,2),16) + Math.round(255*amount));
  const g = Math.min(255, parseInt(c.substr(2,2),16) + Math.round(255*amount));
  const b = Math.min(255, parseInt(c.substr(4,2),16) + Math.round(255*amount));
  return '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('');
}

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