// app.jsx — composes the homepage + Tweaks (hero variations, glow, motion, grain)
const { useEffect: aUseEffect, useRef: aUseRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "Orbit",
  "glow": "#e7b24e",
  "motion": "Lively",
  "grain": true
}/*EDITMODE-END*/;

// glow presets → [accent, accent-2, emberHue]
const GLOWS = {
  "#e7b24e": { a2: "#ff9d4d", hue: 36 }, // Lantern gold
  "#ff8a3d": { a2: "#ff6a2c", hue: 22 }, // Amber ember
  "#f4cf72": { a2: "#ffc24d", hue: 46 }, // Warm honey
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const variant = (t.heroLayout || 'Orbit').toLowerCase();
  const glow = GLOWS[t.glow] || GLOWS["#e7b24e"];

  // apply glow to CSS custom props
  aUseEffect(() => {
    const root = document.documentElement.style;
    root.setProperty('--accent', t.glow);
    root.setProperty('--accent-2', glow.a2);
    root.setProperty('--gold', t.glow);
    root.setProperty('--gold-bright', mix(t.glow, '#ffffff', 0.42));
    root.setProperty('--ember', glow.a2);
  }, [t.glow]);

  return (
    <React.Fragment>
      <CosmicBackground intensity={t.motion === 'Calm' ? 'calm' : 'lively'} emberHue={glow.hue}/>
      <div className={'grain' + (t.grain ? '' : ' off')}></div>

      <div className="site">
        <Nav/>
        <Hero variant={variant}/>
        <Botanitech/>
        <CastleDefender/>
        <About/>
        <Devlog/>
        <Signup/>
        <Footer/>
      </div>

      <TweaksPanel>
        <TweakSection label="Hero"/>
        <TweakRadio label="Layout" value={t.heroLayout}
          options={['Orbit', 'Editorial', 'Ember']}
          onChange={(v) => setTweak('heroLayout', v)}/>
        <TweakSection label="Atmosphere"/>
        <TweakColor label="Glow" value={t.glow}
          options={['#e7b24e', '#ff8a3d', '#f4cf72']}
          onChange={(v) => setTweak('glow', v)}/>
        <TweakRadio label="Motion" value={t.motion}
          options={['Calm', 'Lively']}
          onChange={(v) => setTweak('motion', v)}/>
        <TweakToggle label="Film grain" value={t.grain}
          onChange={(v) => setTweak('grain', v)}/>
      </TweaksPanel>
    </React.Fragment>
  );
}

// tiny hex mixer for derived bright tint
function mix(a, b, amt) {
  const pa = hx(a), pb = hx(b);
  const r = Math.round(pa[0] + (pb[0] - pa[0]) * amt);
  const g = Math.round(pa[1] + (pb[1] - pa[1]) * amt);
  const bl = Math.round(pa[2] + (pb[2] - pa[2]) * amt);
  return `#${[r, g, bl].map(n => n.toString(16).padStart(2, '0')).join('')}`;
}
function hx(c) { const n = c.replace('#', ''); return [0, 2, 4].map(i => parseInt(n.slice(i, i + 2), 16)); }

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