// karm.dev — Tweaks panel (theme + section visibility + hero variant)

function Switch({ on, onChange }) {
  return (
    <button
      className={`switch${on ? ' is-on' : ''}`}
      onClick={() => onChange(!on)}
      aria-pressed={on}
    />
  );
}

function TweaksPanel({
  visible, onClose,
  theme, setTheme,
  heroVariant, setHeroVariant,
  sections, setSections,
  t,
}) {
  if (!visible) return null;

  const toggleSection = (k) => setSections({ ...sections, [k]: !sections[k] });

  const variants = [
    { id: 'centered', label: 'Centered' },
    { id: 'terminal', label: 'Terminal' },
    { id: 'minimal',  label: 'Editorial' },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-panel__head">
        <h4 className="tweaks-panel__title">{t('tweaks.title')}</h4>
        <button
          onClick={onClose}
          style={{background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--fg-3)', fontSize: 18, lineHeight: 1}}
          aria-label="Close"
        >×</button>
      </div>
      <div className="tweaks-panel__body">
        <div className="tweak-row">
          <div>
            <div className="tweak-row__label">{t('tweaks.theme')}</div>
            <div className="tweak-row__hint">{theme === 'dark' ? 'ON' : 'OFF'}</div>
          </div>
          <Switch on={theme === 'dark'} onChange={(v) => setTheme(v ? 'dark' : 'light')} />
        </div>

        <div className="tweaks-panel__section">
          <p className="tweaks-panel__section-title">{t('tweaks.hero')}</p>
          <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
            {variants.map(v => (
              <button
                key={v.id}
                onClick={() => setHeroVariant(v.id)}
                style={{
                  padding: '6px 12px',
                  border: '1px solid var(--border-1)',
                  borderRadius: 6,
                  background: heroVariant === v.id ? 'var(--accent)' : 'var(--bg-2)',
                  color: heroVariant === v.id ? '#0A0F1F' : 'var(--fg-1)',
                  fontSize: 12,
                  fontFamily: 'var(--font-mono)',
                  cursor: 'pointer',
                  fontWeight: 600,
                }}
              >{v.label}</button>
            ))}
          </div>
        </div>

        <div className="tweaks-panel__section">
          <p className="tweaks-panel__section-title">{t('tweaks.sections')}</p>
          <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
            {['projects', 'experience', 'skills', 'contact'].map(k => (
              <div key={k} className="tweak-row">
                <div className="tweak-row__label">{t(`tweaks.s.${k}`)}</div>
                <Switch on={sections[k]} onChange={() => toggleSection(k)} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;