// Tweaks panel — accent color, motion, hero headline, day/night for daynight section
function Tweaks() {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState(false);
  const [state, setState] = useState(() => window.__tweaks || {});

  // Announce availability AFTER registering listener
  useEffect(() => {
    const handler = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') { setAvailable(true); setOpen(true); }
      if (d.type === '__deactivate_edit_mode') { setOpen(false); }
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const apply = useCallback((patch) => {
    const next = { ...state, ...patch };
    setState(next);
    if (patch.accent) {
      const map = {
        blue:   { c: '#2f6aa8', deep: '#204a79', soft: '#d8e4ef', glow: '47 106 168' },
        forest: { c: '#2d6a4d', deep: '#1f4a35', soft: '#d9e7df', glow: '45 106 77' },
        copper: { c: '#b7844a', deep: '#8a5d2d', soft: '#efe1cf', glow: '183 132 74' },
        slate:  { c: '#4a5a66', deep: '#2f3c46', soft: '#dfe4e8', glow: '74 90 102' },
      };
      const v = map[patch.accent] || map.blue;
      document.documentElement.style.setProperty('--accent', v.c);
      document.documentElement.style.setProperty('--accent-deep', v.deep);
      document.documentElement.style.setProperty('--accent-soft', v.soft);
      document.documentElement.style.setProperty('--accent-glow', v.glow);
    }
    if (patch.motion) {
      const speed = patch.motion === 'calm' ? '1.4s' : '.9s';
      document.documentElement.style.setProperty('--reveal-dur', speed);
    }
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  }, [state]);

  // Apply on first paint
  useEffect(() => { apply({ accent: state.accent || 'blue', motion: state.motion || 'polished' }); }, []);

  if (!available) return null;

  return (
    <div className={`tweaks-panel glass ${open ? 'open' : ''}`}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10 }}>
        <div className="font-display" style={{ fontWeight: 600 }}>Tweaks</div>
        <button onClick={() => setOpen(false)} style={{ border:'none', background:'transparent', cursor:'pointer', color:'var(--slate-500)', fontSize: 18 }}>×</button>
      </div>

      <div className="tweak-row">
        <label>Accent</label>
        <div style={{ display:'flex', gap: 8 }}>
          {[
            { k: 'blue',   c: '#2f6aa8' },
            { k: 'forest', c: '#2d6a4d' },
            { k: 'copper', c: '#b7844a' },
            { k: 'slate',  c: '#4a5a66' },
          ].map(s => (
            <button key={s.k} aria-label={s.k} onClick={() => apply({ accent: s.k })}
              className={`tweak-swatch ${state.accent === s.k ? 'active' : ''}`}
              style={{ background: s.c }} />
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Motion</label>
        <div className="tweak-seg">
          {['calm','polished'].map(m => (
            <button key={m} className={state.motion === m ? 'active' : ''} onClick={() => apply({ motion: m })}>{m}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row" style={{ flexDirection: 'column', alignItems:'stretch', gap: 6 }}>
        <label>Hero headline</label>
        <textarea rows={3} value={state.hero_headline || ''} onChange={e => apply({ hero_headline: e.target.value })}
          style={{ font: 'inherit', borderRadius: 10, padding: 10, border: '1px solid rgba(10,24,18,.12)', resize: 'vertical' }} />
        <div style={{ fontSize: 11, color: 'var(--slate-500)' }}>Persists to the file on disk.</div>
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;