// app2.jsx - corporate/startup composition, theme/accent tweaks, mount
const { useState: useA2, useEffect: useA2E } = React;

const ACCENTS2 = {
  Indigo:  { l: 0.55, c: 0.19, h: 274 },
  Violet:  { l: 0.55, c: 0.22, h: 300 },
  Blue:    { l: 0.58, c: 0.16, h: 245 },
  Emerald: { l: 0.58, c: 0.13, h: 162 },
};
const accentSwatch2 = (a) => `oklch(${a.l} ${a.c} ${a.h})`;

const DISPLAY_FONTS2 = {
  'Archivo': "'Archivo', system-ui, sans-serif",
  'Plus Jakarta Sans': "'Plus Jakarta Sans', system-ui, sans-serif",
  'Inter Tight': "'Inter Tight', system-ui, sans-serif",
  'Manrope': "'Manrope', system-ui, sans-serif",
};

const TWEAK_DEFAULTS2 = /*EDITMODE-BEGIN*/{
  "theme": "Light",
  "accent": "Indigo",
  "displayFont": "Archivo"
}/*EDITMODE-END*/;

function applyTheme2(t) {
  document.documentElement.setAttribute('data-theme', t === 'Dark' ? 'midnight' : 'light');
}
function applyAccent2(name) {
  const a = ACCENTS2[name] || ACCENTS2.Indigo;
  const isDark = document.documentElement.getAttribute('data-theme') === 'midnight';
  const L = isDark ? Math.min(a.l + 0.11, 0.74) : a.l;
  const r = document.documentElement.style;
  r.setProperty('--gold', `oklch(${L} ${a.c} ${a.h})`);
  r.setProperty('--gold-soft', `oklch(${L} ${a.c} ${a.h} / ${isDark ? 0.16 : 0.12})`);
  r.setProperty('--gold-line', `oklch(${L} ${a.c} ${a.h} / 0.4)`);
}
function applyFont2(name) {
  document.documentElement.style.setProperty('--serif-font', DISPLAY_FONTS2[name] || DISPLAY_FONTS2['Space Grotesk']);
}

function App2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS2);
  useReveal();

  // theme first, then accent (accent lightness depends on theme)
  useA2E(() => { applyTheme2(t.theme); applyAccent2(t.accent); }, [t.theme]);
  useA2E(() => { applyAccent2(t.accent); }, [t.accent]);
  useA2E(() => { applyFont2(t.displayFont); }, [t.displayFont]);

  useA2E(() => { const b = document.querySelector('.boot'); if (b) { b.style.opacity = '0'; setTimeout(() => b.remove(), 400); } }, []);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <HowItWorks />
        <Features />
        <Platforms />
        <Pricing />
        <FAQ />
      </main>
      <Footer />
      <InviteModal />

      <TweaksPanel>
        <TweakSection label="Overall style" />
        <TweakRadio label="Theme" value={t.theme} options={['Light', 'Dark']} onChange={v => setTweak('theme', v)} />
        <TweakSection label="Accent" />
        <TweakColor label="Brand color" value={accentSwatch2(ACCENTS2[t.accent])}
          options={Object.values(ACCENTS2).map(accentSwatch2)}
          onChange={(v) => { const name = Object.keys(ACCENTS2).find(k => accentSwatch2(ACCENTS2[k]) === v) || 'Indigo'; setTweak('accent', name); }} />
        <TweakSection label="Typography" />
        <TweakSelect label="Display font" value={t.displayFont} options={Object.keys(DISPLAY_FONTS2)} onChange={v => setTweak('displayFont', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

// real brand logo (transparent PNG, color + white variants)
window.LOGO_IMG = { color: 'assets/rm-logo-color.png', light: 'assets/rm-logo-white.png' };

// lazy-load optional display font (Sora; others already loaded in head / via Manrope availability)
const extraFonts2 = document.createElement('link');
extraFonts2.rel = 'stylesheet';
extraFonts2.href = 'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap';
document.head.appendChild(extraFonts2);

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