// HelloReader — Tweaks panel & global-ambition band
const { useState: useT, useEffect: useE } = React;

// Parse tweakable defaults from the HTML (EDITMODE block)
function GlobalBand({ tweaks, t }) {
  if (!tweaks.showGlobalBand) return null;
  const ambition = {
    en: "Our ambition is global.",
    zh: "我们的目标是全球。",
    vi: "Tham vọng của chúng tôi là toàn cầu.",
    th: "เป้าหมายของเราคือระดับโลก",
    id: "Ambisi kami adalah global.",
  };
  const sub = {
    en: "Starting in SEA. Expanding worldwide. 35+ languages on the roadmap.",
    zh: "从东南亚出发，覆盖全球。路线图涵盖 35+ 语言。",
    vi: "Bắt đầu từ ĐNA. Mở rộng toàn cầu. Hơn 35 ngôn ngữ trong lộ trình.",
    th: "เริ่มต้นใน SEA ขยายทั่วโลก มากกว่า 35 ภาษาในแผน",
    id: "Dimulai di SEA. Meluas ke seluruh dunia. 35+ bahasa di peta jalan.",
  };
  const lang = window.__hr_lang || "en";
  const regions = [
    { label: "SEA", sub: "Live", status: "live" },
    { label: "East Asia", sub: "2026 Q3", status: "soon" },
    { label: "South Asia", sub: "2026 Q4", status: "soon" },
    { label: "LATAM", sub: "2027", status: "planned" },
    { label: "MENA", sub: "2027", status: "planned" },
    { label: "Europe", sub: "2027+", status: "planned" },
  ];
  return (
    <div className="global-band" style={{
      background: tweaks.accent, color: "#0A0A0A", padding: "72px 32px",
      borderTop: "1px solid rgba(0,0,0,.08)", borderBottom: "1px solid rgba(0,0,0,.08)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: "0.12em",
          textTransform: "uppercase", color: "#0A0A0A", opacity: .7,
        }}>Global Roadmap · 全球版图</div>
        <h2 className="global-band-title" style={{
          fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: 64,
          lineHeight: 1, letterSpacing: "-0.03em", margin: "14px 0 0", maxWidth: 1000,
        }}>{ambition[lang]}</h2>
        <p className="global-band-sub" style={{ fontSize: 18, fontWeight: 600, marginTop: 14, maxWidth: 760, opacity: .82 }}>
          {sub[lang]}
        </p>
        <div className="global-band-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12, marginTop: 40,
        }}>
          {regions.map((r, i) => (
            <div key={i} style={{
              background: r.status === "live" ? "#0A0A0A" : "rgba(255,255,255,.7)",
              color: r.status === "live" ? tweaks.accent : "#0A0A0A",
              border: "1.5px solid #0A0A0A",
              borderRadius: 14, padding: "18px 14px",
            }}>
              <div style={{
                fontSize: 10, fontWeight: 900, letterSpacing: ".1em",
                textTransform: "uppercase", opacity: .8,
              }}>{r.sub}</div>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: 18, marginTop: 6 }}>
                {r.label}
              </div>
              {r.status === "live" && (
                <div style={{
                  marginTop: 10, display: "inline-flex", alignItems: "center", gap: 6,
                  fontSize: 10, fontWeight: 800,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#22C55E" }} />
                  LIVE
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function TweaksPanel({ tweaks, setTweaks, active }) {
  const [open, setOpen] = useT(true);
  if (!active) return null;
  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  const Row = ({ label, children }) => (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0", borderTop: "1px solid #EFEFEF", gap: 10 }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: "#2E2E2E" }}>{label}</span>
      <span>{children}</span>
    </div>
  );
  const Swatch = ({ c }) => (
    <button onClick={() => update("accent", c)} style={{
      width: 24, height: 24, borderRadius: "50%", border: tweaks.accent === c ? "2.5px solid #0A0A0A" : "1.5px solid #D4D4D4",
      background: c, cursor: "pointer", padding: 0, marginLeft: 4,
    }} />
  );
  const Toggle = ({ k }) => (
    <button onClick={() => update(k, !tweaks[k])} style={{
      width: 36, height: 20, borderRadius: 999,
      background: tweaks[k] ? "#0A0A0A" : "#D4D4D4", border: "none",
      position: "relative", cursor: "pointer", padding: 0,
    }}>
      <span style={{
        position: "absolute", top: 2, left: tweaks[k] ? 18 : 2,
        width: 16, height: 16, borderRadius: "50%",
        background: tweaks[k] ? "#FED605" : "#fff",
        transition: "left 150ms var(--ease-out)",
      }} />
    </button>
  );
  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 200,
      background: "#fff", borderRadius: 16, boxShadow: "0 20px 50px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08)",
      border: "1px solid #EFEFEF", width: open ? 300 : 120, overflow: "hidden",
      fontFamily: "var(--font-sans)",
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "12px 16px", background: "#0A0A0A", color: "#FED605", border: "none",
        fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: 13, cursor: "pointer",
        letterSpacing: "0.04em",
      }}>
        <span>✦ Tweaks</span>
        <span>{open ? "—" : "+"}</span>
      </button>
      {open && (
        <div style={{ padding: "6px 16px 14px" }}>
          <Row label="Global band">
            <Toggle k="showGlobalBand" />
          </Row>
          <Row label="Confetti motif">
            <Toggle k="showConfetti" />
          </Row>
          <Row label="Dark hero">
            <Toggle k="darkHero" />
          </Row>
          <Row label="Accent">
            <span>
              <Swatch c="#FED605"/>
              <Swatch c="#FF7A1A"/>
              <Swatch c="#FF3E5F"/>
              <Swatch c="#22C55E"/>
            </span>
          </Row>
          <Row label="Headline mode">
            <select value={tweaks.headlineMode} onChange={(e) => update("headlineMode", e.target.value)} style={{
              border: "1.5px solid #E5E5E5", borderRadius: 8, padding: "5px 8px", fontSize: 12, fontWeight: 700,
              background: "#fff", fontFamily: "var(--font-sans)",
            }}>
              <option value="sea">SEA focus</option>
              <option value="global">Global ambition</option>
            </select>
          </Row>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { GlobalBand, TweaksPanel });