/* app.jsx — root */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4b878",
  "density": "spacious",
  "grain": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#d4b878',  // champagne
  '#3a5cf0',  // royal
  '#4f9d7a',  // emerald
  '#b5544a',  // garnet
];

function hexToSoft(hex, alpha = 0.6) {
  const h = hex.replace('#','');
  const r = parseInt(h.substring(0,2),16);
  const g = parseInt(h.substring(2,4),16);
  const b = parseInt(h.substring(4,6),16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--champagne', t.accent);
    root.style.setProperty('--champagne-soft', hexToSoft(t.accent, 0.6));
  }, [t.accent]);

  return (
    <React.Fragment>
      <style>{`
        body.no-grain::before{ opacity:0 !important; }
        ${t.density === 'compact' ? `.section{ padding: clamp(56px,7vw,110px) 0; }` : ''}
      `}</style>
      {!t.grain && <style>{`body::before{ opacity:0 !important; }`}</style>}

      <Nav />
      <Hero />
      <Marquee />
      <Manifesto />
      <Pillars />
      <Members />
      <Activities />
      <Archive />
      <Patron />
      <Join />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Акцент">
          <TweakColor
            label="Цвет"
            value={t.accent}
            onChange={(v)=>setTweak('accent', v)}
            options={ACCENT_OPTIONS}
          />
        </TweakSection>
        <TweakSection label="Композиция">
          <TweakRadio
            label="Плотность"
            value={t.density}
            options={['spacious','compact']}
            onChange={(v)=>setTweak('density', v)}
          />
          <TweakToggle
            label="Зерно плёнки"
            value={t.grain}
            onChange={(v)=>setTweak('grain', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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