// Main app — composes all sections, wires Tweaks panel
const { useState: appUS, useEffect: appUE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": 0,
  "accentColor": "#0891a8",
  "showTrustBadge": true,
  "fontPair": "modern"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  modern: { sans: '"Inter Tight", system-ui, sans-serif', serif: '"Newsreader", Georgia, serif' },
  classic: { sans: '"Geist", system-ui, sans-serif', serif: '"Source Serif Pro", Georgia, serif' },
  technical: { sans: '"IBM Plex Sans", system-ui, sans-serif', serif: '"IBM Plex Serif", Georgia, serif' },
};

function Toast() {
  const [msg, setMsg] = appUS('');
  const [show, setShow] = appUS(false);
  appUE(() => {
    const handler = (e) => {
      setMsg(e.detail);
      setShow(true);
      setTimeout(() => setShow(false), 1500);
    };
    window.addEventListener('toast', handler);
    return () => window.removeEventListener('toast', handler);
  }, []);
  return <div className={`toast ${show ? 'show' : ''}`}>{msg}</div>;
}

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

  // Apply accent color
  appUE(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
    // derive related shades
    const c = tweaks.accentColor;
    document.documentElement.style.setProperty('--accent-2', shade(c, 0.15));
    document.documentElement.style.setProperty('--accent-deep', shade(c, -0.45));
    document.documentElement.style.setProperty('--accent-soft', shade(c, 0.85));
  }, [tweaks.accentColor]);

  // Apply font pair
  appUE(() => {
    const pair = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.modern;
    document.documentElement.style.setProperty('--sans', pair.sans);
    document.documentElement.style.setProperty('--serif', pair.serif);
  }, [tweaks.fontPair]);

  return (
    <>
      <Nav />
      <Hero headlineVariant={tweaks.headlineVariant} />
      <ValueProps />
      <HowItWorks />
      <Features />
      <UseCases />
      <Playground />
      <Pricing />
      <Quote />
      <Compliance />
      <FinalCTA />
      <Footer />
      <Toast />
      {/* TweaksPanel removed for production — design tokens locked in via
          TWEAK_DEFAULTS above. Re-enable by importing the panel from the
          legacy prototype if iterating on design. */}
    </>
  );
}

// Lightweight color shade helper for the live accent change
function shade(hex, amount) {
  // amount: -1..1 (negative darkens, positive lightens / desaturates toward white)
  const h = hex.replace('#', '');
  const num = parseInt(h.length === 3 ? h.split('').map(x => x + x).join('') : h, 16);
  let r = (num >> 16) & 255, g = (num >> 8) & 255, b = num & 255;
  if (amount > 0) {
    r = Math.round(r + (255 - r) * amount);
    g = Math.round(g + (255 - g) * amount);
    b = Math.round(b + (255 - b) * amount);
  } else {
    r = Math.round(r * (1 + amount));
    g = Math.round(g * (1 + amount));
    b = Math.round(b * (1 + amount));
  }
  return '#' + [r, g, b].map(x => Math.max(0, Math.min(255, x)).toString(16).padStart(2, '0')).join('');
}

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