const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#0e3a6b",
  "accentColor": "#06b6c9",
  "heroLayout": "split",
  "density": "regular",
  "dark": false,
  "ctaLabel": "Prova la Demo"
}/*EDITMODE-END*/;

const CTA_URL = "http://controllaprezzi.smnet.it:3000/";

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scheduleOpen, setScheduleOpen] = React.useState(false);
  const openSchedule = React.useCallback(() => setScheduleOpen(true), []);

  // Apply tweakable tokens to :root
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--primary', t.primaryColor);
    // Derive a deep variant
    const deep = mixDeep(t.primaryColor, 0.18);
    root.style.setProperty('--primary-deep', deep);
    root.style.setProperty('--accent', t.accentColor);
    root.style.setProperty('--accent-soft', mixSoft(t.accentColor, 0.85));
    root.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    root.setAttribute('data-density', t.density);
  }, [t.primaryColor, t.accentColor, t.dark, t.density]);

  return (
    <>
      <Header ctaUrl={CTA_URL} ctaLabel={t.ctaLabel} />
      <main>
        <Hero layout={t.heroLayout} ctaUrl={CTA_URL} ctaLabel={t.ctaLabel} />
        <Stats />
        <Features />
        <Showcase />
        <HowItWorks />
        <CTA ctaUrl={CTA_URL} ctaLabel={t.ctaLabel} onSchedule={openSchedule} />
      </main>
      <Footer onSchedule={openSchedule} />
      <TweaksUI t={t} setTweak={setTweak} />
      <ScheduleModal open={scheduleOpen} onClose={() => setScheduleOpen(false)} />
    </>
  );
}

// Helpers — mix toward black or white via simple hex parsing
function mixDeep(hex, amt) {
  const { r, g, b } = parseHex(hex);
  const f = 1 - amt;
  return rgbToHex(Math.round(r*f), Math.round(g*f), Math.round(b*f));
}
function mixSoft(hex, amt) {
  const { r, g, b } = parseHex(hex);
  const mix = (c) => Math.round(c + (255 - c) * amt);
  return rgbToHex(mix(r), mix(g), mix(b));
}
function parseHex(hex) {
  const h = hex.replace('#','');
  return { r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16) };
}
function rgbToHex(r,g,b) {
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}

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