/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00b4bf",
  "navy": "#1b2d6b",
  "blue": "#4a6fca",
  "heroLayout": "split",
  "showHookBands": true,
  "darkHooks": true,
  "roundedness": "soft"
}/*EDITMODE-END*/;

function hexToRgb(h) {
  const x = h.replace('#','');
  return [parseInt(x.slice(0,2),16), parseInt(x.slice(2,4),16), parseInt(x.slice(4,6),16)];
}
function rgbToHex(r,g,b) {
  return '#' + [r,g,b].map(v => Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,'0')).join('');
}
function shade(hex, pct) {
  const [r,g,b] = hexToRgb(hex);
  const f = pct < 0 ? 0 : 255;
  const t = Math.abs(pct);
  return rgbToHex(r + (f-r)*t, g + (f-g)*t, b + (f-b)*t);
}

function applyTweaks(t) {
  const r = document.documentElement.style;
  r.setProperty('--teal', t.accent);
  r.setProperty('--teal-deep', shade(t.accent, -0.18));
  r.setProperty('--navy', t.navy);
  r.setProperty('--navy-deep', shade(t.navy, -0.22));
  r.setProperty('--blue', t.blue);
  r.setProperty('--blue-soft', shade(t.blue, 0.88));
  r.setProperty('--bg-navy', t.navy);

  const radii = {
    sharp:  { sm: '2px',  md: '4px',  lg: '8px',  xl: '12px' },
    soft:   { sm: '6px',  md: '12px', lg: '20px', xl: '28px' },
    pillowy:{ sm: '12px', md: '20px', lg: '28px', xl: '36px' }
  }[t.roundedness] || { sm: '6px', md: '12px', lg: '20px', xl: '28px' };
  r.setProperty('--r-sm', radii.sm);
  r.setProperty('--r-md', radii.md);
  r.setProperty('--r-lg', radii.lg);
  r.setProperty('--r-xl', radii.xl);

  document.querySelectorAll('.hook-band').forEach(el => {
    el.style.display = t.showHookBands ? '' : 'none';
    if (!t.darkHooks) {
      el.style.background = '#f6f8fc';
      el.querySelectorAll('h2').forEach(h => h.style.color = t.navy);
      el.querySelectorAll('.lead').forEach(p => p.style.color = '#4a5072');
    } else {
      el.style.background = '';
      el.querySelectorAll('h2').forEach(h => h.style.color = '');
      el.querySelectorAll('.lead').forEach(p => p.style.color = '');
    }
  });

  const heroInner = document.querySelector('.hero .hero-inner');
  if (heroInner) {
    if (t.heroLayout === 'stacked') {
      heroInner.style.gridTemplateColumns = '1fr';
      heroInner.style.maxWidth = '780px';
      heroInner.style.margin = '0 auto';
      const media = heroInner.querySelector('.hero-media');
      if (media) media.style.aspectRatio = '16 / 9';
    } else {
      heroInner.style.gridTemplateColumns = '';
      heroInner.style.maxWidth = '';
      heroInner.style.margin = '';
      const media = heroInner.querySelector('.hero-media');
      if (media) media.style.aspectRatio = '';
    }
  }
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand colors" />
      <TweakColor label="Accent" value={tweaks.accent}
        options={['#00b4bf', '#0fb37a', '#e07a5f', '#c9a35b']}
        onChange={v => setTweak('accent', v)} />
      <TweakColor label="Primary" value={tweaks.navy}
        options={['#1b2d6b', '#0d1430', '#2a2a3a', '#1b3a4b']}
        onChange={v => setTweak('navy', v)} />
      <TweakColor label="Secondary" value={tweaks.blue}
        options={['#4a6fca', '#5b8def', '#6b7280', '#7e8cb3']}
        onChange={v => setTweak('blue', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Layout" value={tweaks.heroLayout}
        options={['split', 'stacked']}
        onChange={v => setTweak('heroLayout', v)} />

      <TweakSection label="Hook bands" />
      <TweakToggle label="Show" value={tweaks.showHookBands}
        onChange={v => setTweak('showHookBands', v)} />
      <TweakToggle label="Dark style" value={tweaks.darkHooks}
        onChange={v => setTweak('darkHooks', v)} />

      <TweakSection label="Shape" />
      <TweakRadio label="Roundedness" value={tweaks.roundedness}
        options={['sharp', 'soft', 'pillowy']}
        onChange={v => setTweak('roundedness', v)} />
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);