function Tweaks() {
  const { t, theme, setTheme, layout, setLayout, tweaksOn } = useApp();
  if (!tweaksOn) return null;

  const themeSwatches = [
    { k: "dreamnest-light", color: "linear-gradient(135deg,#1b3d8f 0 55%,#c8102e 55% 100%)" },
    { k: "dreamnest-dark",  color: "linear-gradient(135deg,#0a1830 0 55%,#85d42a 55% 100%)" },
  ];

  return (
    <div className="tweaks" role="dialog" aria-label="Tweaks">
      <h5>{t.tweaks.title}</h5>
      <div>
        <div style={{fontSize:"10px", color:"var(--ink-mute)", marginBottom:"6px", letterSpacing:"0.14em"}}>
          {t.tweaks.theme}
        </div>
        <div className="theme-row">
          {themeSwatches.map(s => (
            <button
              key={s.k}
              className={`tweak-swatch ${theme === s.k ? "is-active" : ""}`}
              onClick={() => setTheme(s.k)}
              title={t.tweaks.themes[s.k]}
            >
              <span className="chip" style={{background: s.color}} />
              {t.tweaks.themes[s.k]}
            </button>
          ))}
        </div>
      </div>
      <div style={{marginTop:"10px"}}>
        <div style={{fontSize:"10px", color:"var(--ink-mute)", marginBottom:"6px", letterSpacing:"0.14em"}}>
          {t.tweaks.layout}
        </div>
        <div className="layout-row">
          {["cozy","compact"].map(k => (
            <button
              key={k}
              className={`tweak-swatch ${layout === k ? "is-active" : ""}`}
              onClick={() => setLayout(k)}
            >
              {t.tweaks.layouts[k]}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;