// Tweaks panel — floating in bottom-right, only visible when edit mode is active.
// Exposes Service section layout variant: "rule" / "tile" / "photo".
function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;

  const options = [
    { key: "rule",  label: "ボックスカード", desc: "水色ヘッダー付き・デフォルト" },
    { key: "tile",  label: "タイル型", desc: "番号付きグリッド" },
    { key: "photo", label: "写真付き", desc: "写真 + テキスト・横並び" },
  ];

  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 100,
      width: 280, padding: 20,
      background: "#fff",
      border: "1px solid var(--sky-200)",
      boxShadow: "0 10px 40px rgba(12, 37, 92, 0.18)",
      borderRadius: 4,
      fontFamily: "var(--font-sans)",
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: 14, paddingBottom: 10,
        borderBottom: "1px solid var(--hair)",
      }}>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em",
          color: "var(--navy-900)", fontWeight: 600,
        }}>
          TWEAKS
        </span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em",
          color: "var(--ink-3)",
        }}>01</span>
      </div>

      <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--navy-900)", marginBottom: 4 }}>
        Service セクション レイアウト
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 14, lineHeight: 1.6 }}>
        6枚の並べ方を切替えます
      </div>

      <div style={{ display: "grid", gap: 8 }}>
        {options.map((o) => {
          const active = tweaks.serviceLayout === o.key;
          return (
            <button
              key={o.key}
              onClick={() => setTweaks({ serviceLayout: o.key })}
              style={{
                textAlign: "left",
                padding: "10px 12px",
                border: active ? "1px solid var(--brand)" : "1px solid var(--hair)",
                background: active ? "var(--sky-50)" : "#fff",
                borderRadius: 3,
                cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 8,
              }}
            >
              <span>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--navy-900)" }}>
                  {o.label}
                </div>
                <div style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 2 }}>
                  {o.desc}
                </div>
              </span>
              <span style={{
                width: 14, height: 14, borderRadius: 999,
                border: active ? "4px solid var(--brand)" : "1px solid var(--hair)",
                background: active ? "#fff" : "transparent",
                flexShrink: 0,
              }}></span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;