// tweaks-app.jsx — Roadrolls Tweaks island
// Three expressive controls that reshape the whole page's feel:
//   · Travel theme  — full palette (paper temperature + accent) per journey
//   · Atmosphere    — headline weight, tracking & corner geometry
//   · Pace          — vertical rhythm / type rhythm

const { useEffect } = React;

// ── Road-trip palettes ───────────────────────────────────────────────────────
// Bright, speedy themes named after iconic drives — high-chroma accents on clean
// papers so color pops. Each retones the whole page via its CSS custom properties.
const THEMES = {
  electric: {
    name: 'Electric Mile',
    vars: {
      '--ink': '#10162a', '--ink-2': '#313a55', '--ink-3': '#69718f',
      '--paper': '#f2f5fd', '--paper-2': '#e5ebf9', '--paper-3': '#d5def3',
      '--line': 'rgba(16,22,42,0.12)', '--line-soft': 'rgba(16,22,42,0.07)',
      '--accent': '#2563ff', '--accent-deep': '#1745d6', '--accent-tint': '#cfdcff',
      '--white': '#ffffff',
    },
  },
  route66: {
    name: 'Route 66',
    vars: {
      '--ink': '#1c1512', '--ink-2': '#463833', '--ink-3': '#80706a',
      '--paper': '#fbf6f0', '--paper-2': '#f4ebe1', '--paper-3': '#ece1d4',
      '--line': 'rgba(28,21,18,0.12)', '--line-soft': 'rgba(28,21,18,0.07)',
      '--accent': '#e6321d', '--accent-deep': '#bc2414', '--accent-tint': '#f9cdc6',
      '--white': '#ffffff',
    },
  },
  sunset: {
    name: 'Sunset Strip',
    vars: {
      '--ink': '#211610', '--ink-2': '#4d392c', '--ink-3': '#84705f',
      '--paper': '#fdf5ec', '--paper-2': '#f8e9d6', '--paper-3': '#f1dcbf',
      '--line': 'rgba(33,22,16,0.12)', '--line-soft': 'rgba(33,22,16,0.07)',
      '--accent': '#f1601a', '--accent-deep': '#c2440c', '--accent-tint': '#fbd8ba',
      '--white': '#fffdf9',
    },
  },
  pacific: {
    name: 'Pacific Coast',
    vars: {
      '--ink': '#0e1f22', '--ink-2': '#324a4e', '--ink-3': '#5f7b80',
      '--paper': '#f0f9fa', '--paper-2': '#e0f1f3', '--paper-3': '#cfe8eb',
      '--line': 'rgba(14,31,34,0.12)', '--line-soft': 'rgba(14,31,34,0.07)',
      '--accent': '#00a9c4', '--accent-deep': '#04829e', '--accent-tint': '#bce9f0',
      '--white': '#ffffff',
    },
  },
  plains: {
    name: 'Open Plains',
    vars: {
      '--ink': '#14201a', '--ink-2': '#38473d', '--ink-3': '#6b7c70',
      '--paper': '#f1f8f1', '--paper-2': '#e2f0e3', '--paper-3': '#d2e7d4',
      '--line': 'rgba(20,32,26,0.12)', '--line-soft': 'rgba(20,32,26,0.07)',
      '--accent': '#16a84e', '--accent-deep': '#0d7f3a', '--accent-tint': '#c5edd1',
      '--white': '#ffffff',
    },
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "electric",
  "atmos": "refined",
  "pace": "spacious"
}/*EDITMODE-END*/;

// ── Custom travel-theme picker (named rows with swatch trio) ─────────────────
function ThemePicker({ value, onChange }) {
  return (
    <TweakRow label="">
      <div className="twk-themes" role="radiogroup" aria-label="Road trip theme">
        {Object.entries(THEMES).map(([key, th]) => {
          const on = key === value;
          return (
            <button key={key} type="button" className="twk-theme" role="radio"
                    aria-checked={on} data-on={on ? '1' : '0'}
                    onClick={() => onChange(key)}>
              <span className="twk-theme-sw" aria-hidden="true">
                <i style={{ background: th.vars['--accent'] }} />
                <i style={{ background: th.vars['--paper'] }} />
                <i style={{ background: th.vars['--ink'] }} />
              </span>
              <span className="twk-theme-nm">{th.name}</span>
            </button>
          );
        })}
      </div>
    </TweakRow>
  );
}

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

  useEffect(() => {
    const th = THEMES[t.theme] || THEMES.electric;
    const r = document.documentElement;
    Object.entries(th.vars).forEach(([k, v]) => r.style.setProperty(k, v));
  }, [t.theme]);

  useEffect(() => { document.documentElement.setAttribute('data-atmos', t.atmos); }, [t.atmos]);
  useEffect(() => { document.documentElement.setAttribute('data-pace', t.pace); }, [t.pace]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Road trip theme" />
      <ThemePicker value={t.theme} onChange={(v) => setTweak('theme', v)} />

      <TweakSection label="Atmosphere" />
      <TweakRadio label="Feel" value={t.atmos}
                  options={[{ value: 'refined', label: 'Refined' },
                            { value: 'bold', label: 'Bold' },
                            { value: 'soft', label: 'Soft' }]}
                  onChange={(v) => setTweak('atmos', v)} />

      <TweakSection label="Pace" />
      <TweakRadio label="Rhythm" value={t.pace}
                  options={[{ value: 'spacious', label: 'Spacious' },
                            { value: 'compact', label: 'Compact' }]}
                  onChange={(v) => setTweak('pace', v)} />
    </TweaksPanel>
  );
}

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