/* Orlina tweaks panel — exposes color/typography/layout knobs */

const ORLINA_TWEAK_DEFAULTS = window.__ORLINA_TWEAKS;

const OrlinaTweaks = () => {
  const [t, setTweak] = useTweaks(ORLINA_TWEAK_DEFAULTS);

  // apply tweaks to CSS variables
  React.useEffect(() => {
    const r = document.documentElement;
    if (t.primaryColor) {
      r.style.setProperty('--orange-500', t.primaryColor);
      const shift = (hex, amt) => {
        const n = parseInt(hex.slice(1), 16);
        let R = (n >> 16) + amt, G = ((n >> 8) & 0xff) + amt, B = (n & 0xff) + amt;
        R = Math.max(0, Math.min(255, R)); G = Math.max(0, Math.min(255, G)); B = Math.max(0, Math.min(255, B));
        return '#' + ((R << 16) | (G << 8) | B).toString(16).padStart(6, '0');
      };
      r.style.setProperty('--orange-400', shift(t.primaryColor, 30));
      r.style.setProperty('--orange-600', shift(t.primaryColor, -20));
      r.style.setProperty('--orange-700', shift(t.primaryColor, -40));
    }
    if (t.background) r.style.setProperty('--cream-50', t.background);
    if (t.displayFont) r.style.setProperty('--font-display', `'${t.displayFont}', serif`);
    if (t.bodyFont) r.style.setProperty('--font-body', `'${t.bodyFont}', system-ui, sans-serif`);
  }, [t.primaryColor, t.background, t.displayFont, t.bodyFont]);

  React.useEffect(() => {
    const sb = document.querySelector('.sticky-buy');
    if (sb) sb.style.display = t.showStickyBuy ? '' : 'none';
  }, [t.showStickyBuy]);

  React.useEffect(() => {
    document.querySelectorAll('.berry-cluster').forEach(el => {
      el.style.display = t.showBerries ? '' : 'none';
    });
  }, [t.showBerries]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor label="Primary" value={t.primaryColor}
                  options={['#E36A1F', '#C9551A', '#D97757', '#B84A1A', '#E8A33F']}
                  onChange={(v) => setTweak('primaryColor', v)} />
      <TweakColor label="Background" value={t.background}
                  options={['#FCF8EE', '#F6EEDA', '#FBF6EB', '#FFFFFF', '#F0E8D0']}
                  onChange={(v) => setTweak('background', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Display" value={t.displayFont}
                   options={['Cormorant Garamond', 'Playfair Display', 'DM Serif Display', 'Fraunces', 'Libre Caslon Text']}
                   onChange={(v) => setTweak('displayFont', v)} />
      <TweakSelect label="Body" value={t.bodyFont}
                   options={['Manrope', 'DM Sans', 'Work Sans', 'Nunito Sans', 'Karla']}
                   onChange={(v) => setTweak('bodyFont', v)} />

      <TweakSection label="Detail" />
      <TweakToggle label="Sticky buy bar" value={t.showStickyBuy}
                   onChange={(v) => setTweak('showStickyBuy', v)} />
      <TweakToggle label="Berry illustrations" value={t.showBerries}
                   onChange={(v) => setTweak('showBerries', v)} />
    </TweaksPanel>
  );
};

window.OrlinaTweaks = OrlinaTweaks;

// Inject Google Fonts for the alternative typeface options
(function () {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Serif+Display&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Libre+Caslon+Text:wght@400;700&family=DM+Sans:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&family=Karla:wght@400;500;600;700&display=swap';
  document.head.appendChild(link);
})();