// Tweaks panel — lets user toggle accent color, language, river intensity
function TweaksPanel({ visible, tweaks, setTweaks }) {
  if (!visible) return null;

  const accents = [
    { k: "ocean", label: "Ocean (default)", color: "#4AA8D0", accent: "#7FC6E3" },
    { k: "deep", label: "Deep blue", color: "#2d6d94", accent: "#4AA8D0" },
    { k: "mint", label: "Mint", color: "#4AD0B8", accent: "#8EE3D0" },
    { k: "dawn", label: "Dawn", color: "#7F8FD9", accent: "#B0BEEA" },
  ];

  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 200,
      background: "rgba(15,34,56,0.96)",
      color: "#E4F2F9",
      padding: "20px 22px",
      borderRadius: 12,
      border: "1px solid rgba(127,198,227,0.24)",
      boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
      width: 280,
      fontFamily: "'Inter', sans-serif",
      backdropFilter: "blur(14px)",
    }}>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontSize: 14, letterSpacing: "0.24em", textTransform: "uppercase",
        color: "#7FC6E3", marginBottom: 18, fontWeight: 500,
      }}>Tweaks</div>

      <TwLabel>Accent palette</TwLabel>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 18 }}>
        {accents.map(a => (
          <button key={a.k} onClick={() => setTweaks({ ...tweaks, palette: a.k })}
            style={{
              display: "flex", alignItems: "center", gap: 8,
              padding: "8px 10px",
              background: tweaks.palette === a.k ? "rgba(127,198,227,0.18)" : "transparent",
              border: "1px solid " + (tweaks.palette === a.k ? "#7FC6E3" : "rgba(127,198,227,0.2)"),
              borderRadius: 6, cursor: "pointer",
              fontSize: 11, color: "#E4F2F9",
              textAlign: "left",
            }}>
            <span style={{
              width: 14, height: 14, borderRadius: 99,
              background: `linear-gradient(135deg, ${a.accent}, ${a.color})`,
            }} />
            <span style={{ fontSize: 10 }}>{a.label}</span>
          </button>
        ))}
      </div>

      <TwLabel>Language</TwLabel>
      <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
        {[["ja", "日本語"], ["en", "English"]].map(([v, l]) => (
          <button key={v} onClick={() => setTweaks({ ...tweaks, lang: v })}
            style={{
              flex: 1, padding: "8px", fontSize: 11,
              background: tweaks.lang === v ? "#7FC6E3" : "transparent",
              color: tweaks.lang === v ? "#0f2238" : "#E4F2F9",
              border: "1px solid " + (tweaks.lang === v ? "#7FC6E3" : "rgba(127,198,227,0.2)"),
              borderRadius: 6, cursor: "pointer",
              fontFamily: "'Inter', sans-serif",
            }}>{l}</button>
        ))}
      </div>

      <TwLabel>Hero headline weight</TwLabel>
      <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
        {[[200, "Thin"], [300, "Light"], [400, "Regular"]].map(([v, l]) => (
          <button key={v} onClick={() => setTweaks({ ...tweaks, heroWeight: v })}
            style={{
              flex: 1, padding: "8px", fontSize: 11,
              background: tweaks.heroWeight === v ? "#7FC6E3" : "transparent",
              color: tweaks.heroWeight === v ? "#0f2238" : "#E4F2F9",
              border: "1px solid " + (tweaks.heroWeight === v ? "#7FC6E3" : "rgba(127,198,227,0.2)"),
              borderRadius: 6, cursor: "pointer",
              fontFamily: "'Inter', sans-serif",
            }}>{l}</button>
        ))}
      </div>

      <TwLabel>Background animation</TwLabel>
      <input type="range" min="0" max="1" step="0.05"
        value={tweaks.riverIntensity}
        onChange={e => setTweaks({ ...tweaks, riverIntensity: parseFloat(e.target.value) })}
        style={{ width: "100%", accentColor: "#7FC6E3" }}
      />
    </div>
  );
}

function TwLabel({ children }) {
  return (
    <div style={{
      fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase",
      color: "#A9D9EC", marginBottom: 8, fontWeight: 500, opacity: 0.8,
    }}>{children}</div>
  );
}

Object.assign(window, { TweaksPanel });