/* eslint-disable no-undef */
// app.jsx — lean

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f1eadb", "#14100c", "#d97142"],
  "theme": "light",
  "headlineFont": "Instrument Serif",
  "bodyFont": "IBM Plex Sans",
  "copy": "call",
  "formUrl": "https://forms.gle/your-form-id"
}/*EDITMODE-END*/;

const PALETTES = {
  'Magenta noc':   ["#0e0c0a", "#f5efe3", "#da29c1"],
  'Klubová noc':   ["#0e0c0a", "#f5efe3", "#d56b3e"],
  'Krémový den':   ["#f1eadb", "#14100c", "#c64a1f"],
  'Noční jantar':  ["#1f1814", "#f1e4ca", "#e8a85c"],
  'Studio papír':  ["#ede4d3", "#3a2e26", "#d97142"],
};

const HEADLINE_FONTS = {
  'Instrument Serif': "'Instrument Serif', serif",
  'Newsreader':       "'Newsreader', serif",
  'DM Serif Display': "'DM Serif Display', serif",
  'Space Grotesk':    "'Space Grotesk', sans-serif",
};

const BODY_FONTS = {
  'Geist':         "'Geist', system-ui, sans-serif",
  'IBM Plex Sans': "'IBM Plex Sans', sans-serif",
  'System':        "ui-sans-serif, system-ui, -apple-system, sans-serif",
};

(function injectExtras() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Newsreader:ital@0;1&family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap';
  document.head.appendChild(link);
})();

function hexA(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}
function shade(hex, pct) {
  const h = hex.replace('#', '');
  let r = parseInt(h.slice(0, 2), 16);
  let g = parseInt(h.slice(2, 4), 16);
  let b = parseInt(h.slice(4, 6), 16);
  const t = pct > 0 ? 255 : 0;
  const p = Math.abs(pct);
  r = Math.round(r + (t - r) * p);
  g = Math.round(g + (t - g) * p);
  b = Math.round(b + (t - b) * p);
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}

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

  React.useEffect(() => {
    const bg = t.palette[0];
    const ink = t.palette[1];
    const accent = t.palette[2];
    const light = t.theme === 'light';

    document.body.classList.toggle('theme-light', light);
    document.body.style.setProperty('--bg', bg);
    document.body.style.setProperty('--ink', ink);
    document.body.style.setProperty('--accent', accent);
    document.body.style.setProperty('--accent-glow', shade(accent, 0.18));
    document.body.style.setProperty('--bg-2', shade(bg, light ? -0.06 : 0.07));
    document.body.style.setProperty('--bg-3', shade(bg, light ? -0.12 : 0.14));
    document.body.style.setProperty('--ink-dim', hexA(ink, 0.78));
    document.body.style.setProperty('--ink-muted', hexA(ink, 0.48));
    document.body.style.setProperty('--rule', hexA(ink, 0.14));
    document.body.style.setProperty('--rule-strong', hexA(ink, 0.30));
    document.body.style.setProperty('--serif', HEADLINE_FONTS[t.headlineFont] || HEADLINE_FONTS['Instrument Serif']);
    document.body.style.setProperty('--sans', BODY_FONTS[t.bodyFont] || BODY_FONTS['Geist']);
  }, [t]);

  const currentPaletteName = Object.keys(PALETTES).find(
    name => JSON.stringify(PALETTES[name]) === JSON.stringify(t.palette)
  ) || 'Magenta noc';

  return (
    <React.Fragment>
      <Nav />
      <Hero formUrl={t.formUrl} copy={t.copy} />
      <PhotoStrip />
      <Evening formUrl={t.formUrl} copy={t.copy} />
      <WhatYouGet />
      <WhoThisIs />
      <Akrasia />
      <FAQ />
      <CTA formUrl={t.formUrl} copy={t.copy} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Copywriting" />
        <TweakRadio
          label="Onboarding"
          value={t.copy}
          options={['direct', 'call']}
          onChange={(v) => setTweak('copy', v)}
        />

        <TweakSection label="Téma" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={['dark', 'light']}
          onChange={(v) => setTweak('theme', v)}
        />

        <TweakSection label="Paleta" />
        <TweakSelect
          label="Preset"
          value={currentPaletteName}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak('palette', PALETTES[v])}
        />
        <TweakColor
          label="Akcent"
          value={t.palette[2]}
          options={['#da29c1', '#d56b3e', '#e8a85c', '#c64a1f', '#d97142', '#7a5ae0', '#2d6648']}
          onChange={(v) => setTweak('palette', [t.palette[0], t.palette[1], v])}
        />

        <TweakSection label="Typografie" />
        <TweakSelect
          label="Nadpisy"
          value={t.headlineFont}
          options={Object.keys(HEADLINE_FONTS)}
          onChange={(v) => setTweak('headlineFont', v)}
        />
        <TweakSelect
          label="Text"
          value={t.bodyFont}
          options={Object.keys(BODY_FONTS)}
          onChange={(v) => setTweak('bodyFont', v)}
        />

        <TweakSection label="Odkazy" />
        <TweakText
          label="Google Form URL"
          value={t.formUrl}
          onChange={(v) => setTweak('formUrl', v)}
        />

        <TweakSection label="Verze" />
        <TweakButton
          label="Editorial verze (v1)"
          onClick={() => window.location.href = 'v1-editorial/index.html'}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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