/* ============================================================
   GEMS Group — App shell + Tweaks (Option C only)
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPairing": "arimo",
  "pillarLayout": "columns",
  "verifyBadges": true,
  "animations": true,
  "showGrid": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useLang(); // subscribe: re-render whole tree on VI/EN switch

  React.useEffect(() => {
    document.body.classList.toggle("serif-mode", t.fontPairing === "serif");
    document.body.classList.toggle("no-anim", !t.animations);
    document.body.classList.toggle("show-grid", t.showGrid);
    document.body.classList.toggle("hide-verify", !t.verifyBadges);
  }, [t.fontPairing, t.animations, t.showGrid, t.verifyBadges]);

  return (
    <>
      {t.showGrid && <GridOverlay />}
      <OptionC pillarLayout={t.pillarLayout} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Giải pháp — layout">
          <TweakRadio
            value={t.pillarLayout}
            options={[
              { value: "columns", label: "Cards" },
              { value: "ledger", label: "Ledger" },
              { value: "visual", label: "Visual" },
            ]}
            onChange={(v) => setTweak("pillarLayout", v)}
          />
          <p style={{
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em",
            color: "rgba(255,255,255,0.5)", margin: "8px 0 0", lineHeight: 1.5,
          }}>
            Ba phương án cho section 02: thẻ đứng (Cards), danh mục biên tập (Ledger), thẻ ảnh thương hiệu (Visual).
          </p>
        </TweakSection>

        <TweakSection title="Nội dung">
          <TweakToggle
            label="Đánh dấu nội dung cần xác nhận"
            value={t.verifyBadges}
            onChange={(v) => setTweak("verifyBadges", v)}
          />
          <p style={{
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em",
            color: "rgba(255,255,255,0.5)", margin: "8px 0 0", lineHeight: 1.5,
          }}>
            Badge vàng đánh dấu số liệu / nội dung chưa có trong tài liệu GEMS Introduction 2026.
          </p>
        </TweakSection>

        <TweakSection title="Type pairing">
          <TweakRadio
            value={t.fontPairing}
            options={[
              { value: "arimo", label: "Sans only" },
              { value: "serif", label: "Sans + Serif" },
            ]}
            onChange={(v) => setTweak("fontPairing", v)}
          />
          <p style={{
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em",
            color: "rgba(255,255,255,0.5)", margin: "8px 0 0", lineHeight: 1.5,
          }}>
            "Sans only" dùng Plus Jakarta Sans cho toàn bộ. "Serif" thêm Cormorant Garamond cho display heading.
          </p>
        </TweakSection>

        <TweakSection title="Polish">
          <TweakToggle
            label="Animations on scroll"
            value={t.animations}
            onChange={(v) => setTweak("animations", v)}
          />
          <TweakToggle
            label="Show 12-col grid overlay"
            value={t.showGrid}
            onChange={(v) => setTweak("showGrid", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function GridOverlay() {
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 199, pointerEvents: "none",
      maxWidth: "var(--container)", margin: "0 auto", padding: "0 40px",
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 24,
        height: "100%",
      }}>
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} style={{
            background: "rgba(192, 5, 24, 0.06)",
            borderLeft: "1px dashed rgba(192,5,24,0.3)",
            borderRight: "1px dashed rgba(192,5,24,0.3)",
          }} />
        ))}
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);