// TweaksPanel — edit-mode UI

function TweaksPanel({ tweaks, update, onClose }) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <span>Tweaks</span>
        <button className="tweaks-close" onClick={onClose} aria-label="Close">×</button>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Palette</div>
        <div className="tweaks-options">
          {['sandstone', 'cool', 'darker'].map(p => (
            <button
              key={p}
              className={`tweak-chip ${tweaks.palette === p ? 'active' : ''}`}
              onClick={() => update('palette', p)}
            >{p}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Density</div>
        <div className="tweaks-options">
          {['compact', 'normal', 'airy'].map(d => (
            <button
              key={d}
              className={`tweak-chip ${tweaks.density === d ? 'active' : ''}`}
              onClick={() => update('density', d)}
            >{d}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Brand "sending" animation</div>
        <div className="tweaks-options">
          {[
            ['broadcast', 'Broadcast'],
            ['paperplane', 'Paperplane'],
            ['signal', 'Signal'],
          ].map(([k, label]) => (
            <button
              key={k}
              className={`tweak-chip ${tweaks.sendStyle === k ? 'active' : ''}`}
              onClick={() => update('sendStyle', k)}
            >{label}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Hero background cycling</div>
        <div className="tweaks-options">
          <button
            className={`tweak-chip ${tweaks.heroCycle ? 'active' : ''}`}
            onClick={() => update('heroCycle', true)}
          >On</button>
          <button
            className={`tweak-chip ${!tweaks.heroCycle ? 'active' : ''}`}
            onClick={() => update('heroCycle', false)}
          >Off</button>
        </div>
      </div>

      <style>{`
        .tweaks-panel {
          position: fixed;
          right: 24px; bottom: 24px;
          width: 280px;
          background: rgba(20, 18, 15, 0.94);
          backdrop-filter: blur(16px);
          border: 1px solid var(--hairline);
          border-radius: 14px;
          padding: 16px 18px 18px;
          z-index: 1000;
          color: var(--text);
          box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        .tweaks-header {
          display: flex; justify-content: space-between; align-items: center;
          font-size: 13px; font-weight: 600;
          color: var(--sand);
          margin-bottom: 16px;
          padding-bottom: 10px;
          border-bottom: 1px solid var(--hairline);
        }
        .tweaks-close {
          background: transparent; border: none; color: var(--text-dim);
          font-size: 20px; line-height: 1; padding: 0 4px;
        }
        .tweaks-group { margin-bottom: 14px; }
        .tweaks-group:last-of-type { margin-bottom: 0; }
        .tweaks-label {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-dim);
          margin-bottom: 8px;
        }
        .tweaks-options { display: flex; gap: 6px; flex-wrap: wrap; }
        .tweak-chip {
          background: transparent;
          border: 1px solid var(--hairline);
          color: var(--text);
          padding: 6px 12px;
          border-radius: 999px;
          font-size: 11px;
          letter-spacing: 0.02em;
          transition: all 0.2s;
        }
        .tweak-chip:hover { border-color: var(--sand); }
        .tweak-chip.active { background: var(--sand); color: var(--ink); border-color: var(--sand); }
      `}</style>
    </div>
  );
}

Object.assign(window, { TweaksPanel });