/* app.jsx — La Signora root */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#B5482B", "#F5EBD7", "#E0A638", "#5C6B33"],
  "displayFont": "DM Serif Display",
  "scriptAccent": "Caveat",
  "tilePattern": "on"
}/*EDITMODE-END*/;

const PALETTES = [
  ["#B5482B", "#F5EBD7", "#E0A638", "#5C6B33"], // terracotta / cream / saffron / olive — default
  ["#8C341E", "#EFE0C3", "#C99749", "#3F4A21"], // sun-baked, deeper
  ["#A14A2F", "#F1E2C4", "#B07A2D", "#6B783F"], // muted earth
  ["#9B3B26", "#EADFC8", "#E2B650", "#7A8543"], // brighter saffron lean
];

const DISPLAY_FONTS = ["DM Serif Display", "Cormorant Garamond", "Playfair Display"];
const SCRIPT_FONTS  = ["Caveat", "Mrs Saint Delafield", "Pinyon Script"];

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

  // apply tweaks to root CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    const [terra, paper, saffron, olive] = t.palette || PALETTES[0];
    r.style.setProperty('--terracotta', terra);
    r.style.setProperty('--terracotta-d', shade(terra, -22));
    r.style.setProperty('--paper', paper);
    r.style.setProperty('--paper-warm', shade(paper, -6));
    r.style.setProperty('--paper-deep', shade(paper, -14));
    r.style.setProperty('--saffron', saffron);
    r.style.setProperty('--olive', olive);
    r.style.setProperty('--olive-d', shade(olive, -18));
    r.style.setProperty('--font-display', `"${t.displayFont}", "Cormorant Garamond", Georgia, serif`);
    r.style.setProperty('--font-script', `"${t.scriptAccent}", "Brush Script MT", cursive`);
    // tile pattern visibility
    document.body.classList.toggle('no-tile', t.tilePattern !== 'on');
  }, [t]);

  // Dynamically load any non-default Google fonts the user picks
  React.useEffect(() => {
    const fams = [t.displayFont, t.scriptAccent]
      .filter(Boolean)
      .map(f => f.replace(/ /g, '+'));
    const id = 'gf-extra';
    let link = document.getElementById(id);
    const href = `https://fonts.googleapis.com/css2?${fams.map(f => `family=${f}:wght@400;500;600;700`).join('&')}&display=swap`;
    if (!link) {
      link = document.createElement('link');
      link.id = id;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }
    link.href = href;
  }, [t.displayFont, t.scriptAccent]);

  const page = getPage();

  return (
    <div className="app">
      <a className="skip-link" href="#main-content">Skip to content</a>
      <Nav />
      <main id="main-content" tabIndex={-1}>
        {page === 'home' && <><Hero /><Strip /><Story /><Anatomy /><Reviews /></>}
        {page === 'menu' && <Menu />}
        {page === 'find' && <Find />}
        {page === 'catering' && <Catering />}
        {page === 'contact' && <Contact />}
        {page === 'privacy' && <PrivacyPolicy />}
        {page === 'accessibility' && <AccessibilityStatement />}
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Color story"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Type" />
        <TweakSelect
          label="Display"
          value={t.displayFont}
          options={DISPLAY_FONTS}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSelect
          label="Handwritten"
          value={t.scriptAccent}
          options={SCRIPT_FONTS}
          onChange={(v) => setTweak('scriptAccent', v)}
        />
        <TweakSection label="Surface" />
        <TweakRadio
          label="Maiolica tile"
          value={t.tilePattern}
          options={['on', 'off']}
          onChange={(v) => setTweak('tilePattern', v)}
        />
      </TweaksPanel>
    </div>
  );
}

// ── tiny color util — darken a hex by % via OKLCH-ish HSL fallback ──
function shade(hex, deltaPct) {
  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);
  const f = 1 + deltaPct / 100;
  const cl = (v) => Math.max(0, Math.min(255, Math.round(v * f)));
  return '#' + [cl(r), cl(g), cl(b)].map(v => v.toString(16).padStart(2, '0')).join('');
}

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