// Tweaks panel
function TweaksPanel({ copy, setCopy, accent, setAccent, font, setFont, visible }) {
  if (!visible) return null;
  const swatches = [
    { key: 'orange', color: '#ff6a1a' },
    { key: 'red',    color: '#ff3b3b' },
    { key: 'lime',   color: '#c8ff00' },
    { key: 'cyan',   color: '#00d4ff' },
    { key: 'purple', color: '#b46bff' },
    { key: 'yellow', color: '#ffd93b' },
  ];
  const fonts = ['Space Grotesk', 'Inter', 'Syne', 'Archivo', 'DM Sans'];
  return (
    <div className="tweaks-panel">
      <h4>TWEAKS</h4>

      <div className="tweaks-row">
        <label>COR DE DESTAQUE</label>
        <div className="tweaks-swatches">
          {swatches.map(s => (
            <button key={s.key}
              className={accent === s.color ? 'active' : ''}
              style={{background: s.color}}
              onClick={() => setAccent(s.color)}/>
          ))}
        </div>
      </div>

      <div className="tweaks-row">
        <label>TIPOGRAFIA DISPLAY</label>
        <select value={font} onChange={e => setFont(e.target.value)}>
          {fonts.map(f => <option key={f}>{f}</option>)}
        </select>
      </div>

      <div className="tweaks-row">
        <label>TÍTULO DO HERO</label>
        <input type="text" value={copy.heroTitle}
          onChange={e => setCopy({...copy, heroTitle: e.target.value})}/>
      </div>

      <div className="tweaks-row">
        <label>DATA (HERO)</label>
        <input type="text" value={copy.heroDate}
          onChange={e => setCopy({...copy, heroDate: e.target.value})}/>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });