/* Main app */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F5C842",
  "starDensity": 80,
  "showGrid": true,
  "headlineMode": "serif"
}/*EDITMODE-END*/;

const TweaksCtx = React.createContext(TWEAK_DEFAULTS);
window.useHubTweaks = () => React.useContext(TweaksCtx);

// Hex → rgba glow utility
function hexToRgba(hex, alpha) {
  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})`;
}
// Darken hex by mixing with black
function darken(hex, ratio) {
  const h = hex.replace('#', '');
  const r = Math.round(parseInt(h.substring(0, 2), 16) * (1 - ratio));
  const g = Math.round(parseInt(h.substring(2, 4), 16) * (1 - ratio));
  const b = Math.round(parseInt(h.substring(4, 6), 16) * (1 - ratio));
  return `rgb(${r}, ${g}, ${b})`;
}

function App() {
  // Fallback if Tweaks panel removed in production
  const tweaksHook = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];
  const [tweaks, setTweak] = tweaksHook;

  // Apply accent as CSS variables on :root
  React.useEffect(() => {
    const a = tweaks.accent || '#F5C842';
    const deep = darken(a, 0.4);
    const glow = hexToRgba(a, 0.5);
    document.documentElement.style.setProperty('--gold', a);
    document.documentElement.style.setProperty('--gold-deep', deep);
    document.documentElement.style.setProperty(
      '--grad-gold',
      `linear-gradient(180deg, ${a} 0%, ${a} 45%, ${deep} 100%)`
    );
    document.documentElement.style.setProperty(
      '--shadow-gold',
      `0 0 0 1px ${glow}, 0 8px 32px -8px ${glow}, 0 1px 0 inset rgba(255,255,255,0.3)`
    );
  }, [tweaks.accent]);

  return (
    <TweaksCtx.Provider value={tweaks}>
      <Nav />
      <Hero />
      <Problems />
      <Features />
      <Platforms />
      <Dashboard />
      <Roadmap />
      <Stats />
      <Pricing />
      <FAQ />
      <CTA />
      <Footer />
    </TweaksCtx.Provider>
  );
}

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