/* Tweaks panel — palette / density / headline */

const PALETTES = [
  { k: "ink-terracotta", name: "Ink · Terracotta", swatches: ["#F4EFE6", "#0B1220", "#D97757"] },
  { k: "cream-forest",   name: "Cream · Forest",   swatches: ["#F5F3EE", "#0E1512", "#2F5D50"] },
  { k: "paper-cobalt",   name: "Paper · Cobalt",   swatches: ["#FAFAF7", "#0F172A", "#1E40AF"] },
  { k: "noir-lime",      name: "Noir · Lime",      swatches: ["#0A0A0A", "#F5F5F5", "#A3E635"] },
];

const HEADLINES = [
  "The AI partner to commercial insurance brokers.",
  "A broker-grade operating layer for commercial brokers.",
  "Ship renewals before lunch. Built for brokers.",
];

const TweaksPanel = ({ open, onClose, palette, setPalette, density, setDensity, headline, setHeadline }) => {
  return (
    <div className="tweaks" data-open={open}>
      <h6>
        Tweaks
        <button onClick={onClose} style={{background:'none', border:'none', color:'var(--muted)', fontSize:14, cursor:'pointer'}}>×</button>
      </h6>
      <div className="tweak-group">
        <div className="lbl">Palette</div>
        <div className="tweak-row">
          {PALETTES.map(p => (
            <button key={p.k}
              aria-selected={palette === p.k}
              onClick={() => setPalette(p.k)}
              style={{display:'flex', gap:6, alignItems:'center'}}
            >
              <span style={{display:'inline-flex', gap:2}}>
                {p.swatches.map((s,i) => <span key={i} className="sw" style={{background:s, width:12, height:12}}/>)}
              </span>
              {p.name}
            </button>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <div className="lbl">Density</div>
        <div className="tweak-row">
          <button aria-selected={density === "airy"} onClick={() => setDensity("airy")}>Airy</button>
          <button aria-selected={density === "compact"} onClick={() => setDensity("compact")}>Compact</button>
        </div>
      </div>
      <div className="tweak-group">
        <div className="lbl">Headline</div>
        <div className="tweak-row" style={{flexDirection:'column', alignItems:'stretch', gap:6}}>
          {HEADLINES.map((h,i) => (
            <button key={i}
              aria-selected={headline === h}
              onClick={() => setHeadline(h)}
              style={{textAlign:'left', whiteSpace:'normal', lineHeight:1.3, padding:'8px 10px'}}
            >{h}</button>
          ))}
        </div>
      </div>
      <div className="mono caps" style={{color:'var(--muted)', fontSize:10, marginTop:8}}>
        Toggle from toolbar · changes persist
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel, PALETTES, HEADLINES });