(() => {
  window.MamoruApp = window.MamoruApp || {};

  const { C, NS, FONTS } = window.MamoruApp;

  window.MamoruApp.TweaksPanel = function TweaksPanel({ tweaks, setTweaks, show }) {
    if (!show) return null;

    return (
      <div
        style={{
          position: "fixed",
          bottom: 24,
          right: 24,
          zIndex: 9999,
          background: C.white,
          borderRadius: 14,
          border: `1px solid ${C.border}`,
          boxShadow: "0 12px 48px rgba(0,0,0,0.14)",
          padding: "24px 22px 20px",
          width: 300,
        }}
      >
        <div style={{ fontSize: 13, fontFamily: NS, fontWeight: 700, color: C.navy, marginBottom: 20 }}>Tweaks</div>
        <div style={{ fontSize: 10, fontFamily: NS, color: C.muted, letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 12 }}>ヒーローのフォント</div>
        {Object.entries(FONTS).map(([k, f]) => (
          <label key={k} style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: 14, cursor: "pointer" }}>
            <input type="radio" name="heroFont" checked={tweaks.heroFont === k} onChange={() => setTweaks((t) => ({ ...t, heroFont: k }))} style={{ accentColor: C.accent, marginTop: 4 }} />
            <div>
              <div style={{ fontSize: 13, fontFamily: NS, color: tweaks.heroFont === k ? C.navy : C.text, fontWeight: tweaks.heroFont === k ? 600 : 400 }}>{f.label}</div>
              <div style={{ fontSize: 15, fontFamily: f.hero, color: C.accent, marginTop: 3 }}>不安があって大丈夫。</div>
            </div>
          </label>
        ))}
      </div>
    );
  };
})();