// MAIN APP — wires sections + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "animIntensity": 30,
  "accentHue": 16,
  "heroVariant": "transformation",
  "navStyle": "dark-recolor"
}/*EDITMODE-END*/;

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

  // dynamically rotate accent across burnt-orange family
  React.useEffect(() => {
    const root = document.documentElement;
    // hue 0..40 maps -> ~5..30 degrees (warmer -> cooler)
    const h = tweaks.accentHue;
    // Build rgb from oklch via canvas? Simpler: blend between 3 known colors
    // 0 = deep ember #B85440, 16 = burnt orange #E8705A, 32 = warm rose #F0926D, 40 = amber #F2A66E
    const stops = [
      { p: 0, c: [184, 84, 64] },
      { p: 16, c: [232, 112, 90] },
      { p: 28, c: [240, 146, 109] },
      { p: 40, c: [242, 166, 110] },
    ];
    let lo = stops[0], hi = stops[stops.length - 1];
    for (let i = 0; i < stops.length - 1; i++) {
      if (h >= stops[i].p && h <= stops[i + 1].p) { lo = stops[i]; hi = stops[i + 1]; break; }
    }
    const t = (h - lo.p) / Math.max(1, hi.p - lo.p);
    const r = Math.round(lo.c[0] + (hi.c[0] - lo.c[0]) * t);
    const g = Math.round(lo.c[1] + (hi.c[1] - lo.c[1]) * t);
    const b = Math.round(lo.c[2] + (hi.c[2] - lo.c[2]) * t);
    root.style.setProperty('--accent', `rgb(${r},${g},${b})`);
    // warm + deep variants
    const warm = `rgb(${Math.min(255, r + 14)},${Math.min(255, g + 22)},${Math.min(255, b + 18)})`;
    const deep = `rgb(${Math.max(0, r - 50)},${Math.max(0, g - 28)},${Math.max(0, b - 24)})`;
    root.style.setProperty('--accent-warm', warm);
    root.style.setProperty('--accent-deep', deep);
  }, [tweaks.accentHue]);

  const ctxValue = React.useMemo(() => ({
    animIntensity: tweaks.animIntensity,
    accentHue: tweaks.accentHue,
    heroVariant: tweaks.heroVariant,
    navStyle: tweaks.navStyle,
  }), [tweaks]);

  return (
    <TweakCtx.Provider value={ctxValue}>
      <HeroNav />
      <Hero />
      <Shift />
      <Bento />
      <WhatsApp />
      <HowItWorks />
      <Privacy />
      <FAQ />
      <CTA />
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Animation" />
        <window.TweakSlider
          label="Intensity"
          value={tweaks.animIntensity}
          min={0} max={100} step={5}
          onChange={v => setTweak('animIntensity', v)}
        />
        <window.TweakSection label="Accent hue" />
        <window.TweakSlider
          label="Ember → amber"
          value={tweaks.accentHue}
          min={0} max={40} step={2}
          onChange={v => setTweak('accentHue', v)}
        />
        <window.TweakSection label="Hero centerpiece" />
        <window.TweakRadio
          label="Variant"
          value={tweaks.heroVariant}
          options={['transformation', 'phone', 'typecloud']}
          onChange={v => setTweak('heroVariant', v)}
        />
        <window.TweakSection label="Top bar" />
        <window.TweakRadio
          label="Style"
          value={tweaks.navStyle}
          options={['dark-recolor', 'light']}
          onChange={v => setTweak('navStyle', v)}
        />
      </window.TweaksPanel>
    </TweakCtx.Provider>
  );
}

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