// Tweaks panel + edit-mode wiring
const { useState: useStateT, useEffect: useEffectT } = React;

function Tweaks({ tweaks, onChange, visible, onToggleVisible }){
  if(!visible) return null;
  const set = (k, v) => onChange({ ...tweaks, [k]: v });
  return (
    <div className="tweaks-panel">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 14}}>
        <h5 style={{margin:0}}>TWEAKS</h5>
        <button onClick={onToggleVisible} aria-label="閉じる" style={{color:"var(--paper)", fontSize:18, lineHeight:1}}>×</button>
      </div>
      <div className="tweak-group">
        <span className="tweak-label">Hero Variant</span>
        <div className="tweak-options">
          {["A","B","C"].map(v => (
            <button key={v} className={`tweak-btn ${tweaks.heroVariant === v ? "active" : ""}`} onClick={() => set("heroVariant", v)}>
              {v === "A" ? "フル背景" : v === "B" ? "分割" : "額縁"}
            </button>
          ))}
        </div>
      </div>
      <div className="tweak-toggle">
        <span style={{fontSize:12, letterSpacing:"0.1em"}}>写真プレースホルダー表示</span>
        <div className={`sw ${tweaks.showPlaceholders ? "on" : ""}`} onClick={() => set("showPlaceholders", !tweaks.showPlaceholders)} role="switch" aria-checked={tweaks.showPlaceholders}></div>
      </div>
      <div style={{marginTop: 14, fontSize: 11, letterSpacing: "0.1em", color: "rgba(250,250,248,0.5)", lineHeight: 1.8}}>
        ツールバーのTweaksボタンで表示/非表示を切替えできます。
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });