// Tweaks panel

function TweaksPanel({ open, onClose, state, setState }) {
  if (!open) return null;

  const set = (k, v) => setState(s => ({ ...s, [k]: v }));

  return (
    <div className="tweaks-panel">
      <button className="tweaks-close" onClick={onClose} aria-label="Close tweaks">×</button>
      <h4>Tweaks</h4>

      <div className="tw-row">
        <label>View</label>
        <div className="tweaks-opts">
          {[['hub', 'Hub'], ['full', 'Full site']].map(([v, l]) => (
            <button key={v} className={`tweaks-opt ${state.view === v ? 'active' : ''}`} onClick={() => set('view', v)}>{l}</button>
          ))}
        </div>
      </div>

      {state.view === 'hub' && (
        <div className="tw-row">
          <label>Hub style</label>
          <div className="tweaks-opts">
            {[['editorial', 'Editorial'], ['magazine', 'Magazine'], ['monogram', 'Monogram']].map(([v, l]) => (
              <button key={v} className={`tweaks-opt ${state.hubStyle === v ? 'active' : ''}`} onClick={() => set('hubStyle', v)}>{l}</button>
            ))}
          </div>
        </div>
      )}

      {state.view === 'full' && (
        <div className="tw-row">
          <label>Hero layout</label>
          <div className="tweaks-opts">
            {[['editorial', 'Editorial'], ['split', 'Split'], ['centered', 'Centered']].map(([v, l]) => (
              <button key={v} className={`tweaks-opt ${state.heroVariant === v ? 'active' : ''}`} onClick={() => set('heroVariant', v)}>{l}</button>
            ))}
          </div>
        </div>
      )}

      <div className="tw-row">
        <label>Logo · M.</label>
        <div className="tweaks-opts">
          {[['a', 'Italic serif'], ['b', 'Circle mark'], ['c', 'Upright']].map(([v, l]) => (
            <button key={v} className={`tweaks-opt ${state.logoVariant === v ? 'active' : ''}`} onClick={() => set('logoVariant', v)}>{l}</button>
          ))}
        </div>
      </div>

      <div className="tw-row">
        <label>Accent color</label>
        <div className="tweaks-opts">
          {[
            ['#191970', 'Navy'],
            ['#8B3A3A', 'Oxblood'],
            ['#3A5A40', 'Forest'],
            ['#1B1B27', 'Ink']
          ].map(([v, l]) => (
            <button key={v}
              className={`tweaks-opt ${state.accent === v ? 'active' : ''}`}
              onClick={() => set('accent', v)}>
              <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 999, background: v, marginRight: 6, verticalAlign: 'middle' }}/>{l}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;