// Tweaks panel — palette options + hero variant + factory stats toggle.

function GLITweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "navy",
    "showFactoryStats": true,
    "language": "en",
    "heroVariant": "lobby",
    "rhythm": "editorial"
  }/*EDITMODE-END*/;

  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply palette to CSS vars
  React.useEffect(() => {
    const accents = {
      navy:    { ink: "#14213F", inkAlt: "#1F2D52", green: "#2C8746", greenDeep: "#1B6A33", greenLeaf: "#5BC547" },
      forest:  { ink: "#0F2418", inkAlt: "#1A3826", green: "#2C8746", greenDeep: "#1B6A33", greenLeaf: "#5BC547" },
      ink:     { ink: "#15171C", inkAlt: "#22252E", green: "#2C8746", greenDeep: "#1B6A33", greenLeaf: "#5BC547" },
      bronze:  { ink: "#231A12", inkAlt: "#3A2A1B", green: "#A8854B", greenDeep: "#8C6A36", greenLeaf: "#D4AB6A" },
    };
    const p = accents[t.accent] || accents.navy;
    const r = document.documentElement;
    r.style.setProperty("--ink", p.ink);
    r.style.setProperty("--ink-2", p.inkAlt);
    r.style.setProperty("--green", p.green);
    r.style.setProperty("--green-deep", p.greenDeep);
    r.style.setProperty("--green-leaf", p.greenLeaf);

    const rhythm = t.rhythm === "tight" ? "64px" : "96px";
    r.style.setProperty("--section-pad", rhythm);
  }, [t.accent, t.rhythm]);

  // Expose tweaks to app via window
  React.useEffect(() => {
    window.__gliTweaks = t;
    window.dispatchEvent(new Event("gli-tweaks-change"));
  }, [t]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio
          label="Primary"
          value={t.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            { label: "Navy",   value: "navy" },
            { label: "Forest", value: "forest" },
            { label: "Ink",    value: "ink" },
          ]}
        />
        <div style={{ marginTop: 12, fontSize: 12, color: "rgba(255,255,255,0.6)", lineHeight: 1.5 }}>
          <strong style={{ color: "#fff" }}>Navy</strong> matches the literal logo wordmark.
          <strong style={{ color: "#fff" }}> Forest</strong> emphasises the green icon.
          <strong style={{ color: "#fff" }}> Ink</strong> reads as a neutral editorial publication.
        </div>
      </TweakSection>

      <TweakSection title="Hero image">
        <TweakSelect
          label="Variant"
          value={t.heroVariant}
          onChange={v => setTweak("heroVariant", v)}
          options={[
            { label: "Palace banquet hall", value: "lobby" },
            { label: "Council chamber",     value: "council" },
            { label: "Residence interior",  value: "palace" },
            { label: "Resort suite",        value: "suite" },
            { label: "Hotel atrium",        value: "atrium" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Rhythm">
        <TweakRadio
          label="Vertical pacing"
          value={t.rhythm}
          onChange={v => setTweak("rhythm", v)}
          options={[
            { label: "Editorial", value: "editorial" },
            { label: "Tight",     value: "tight" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Manufacturing">
        <TweakToggle
          label="Show factory stats bar"
          value={t.showFactoryStats}
          onChange={v => setTweak("showFactoryStats", v)}
        />
      </TweakSection>

      <TweakSection title="Language">
        <TweakRadio
          label="Locale"
          value={t.language}
          onChange={v => setTweak("language", v)}
          options={[
            { label: "EN", value: "en" },
            { label: "AR", value: "ar" },
          ]}
        />
        <div style={{ marginTop: 8, fontSize: 11, color: "rgba(255,255,255,0.5)" }}>
          AR demos the RTL switch on the nav row.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { GLITweaks });