// app-live.jsx — LIVE SITE: Direction A "Nocturne" rendered full-page (no canvas).
// Direction B is preserved in "Archive — Directions A + B (canvas).html".

const LIVE_TYPE_PAIRS = {
  editorial: { id: "editorial", label: "Editorial Serif", display: "'Cormorant Garamond', 'EB Garamond', serif", body: "'Inter', system-ui, sans-serif", note: "Cormorant + Inter" },
  field: { id: "field", label: "Field Journal", display: "'Spectral', 'Source Serif Pro', serif", body: "'IBM Plex Sans', system-ui, sans-serif", note: "Spectral + Plex" },
  expedition: { id: "expedition", label: "Expedition", display: "'Bricolage Grotesque', 'Space Grotesk', sans-serif", body: "'Space Grotesk', system-ui, sans-serif", note: "Bricolage + Space" },
};

const LIVE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d2693c",
  "typePair": "editorial",
  "heroVariant": "fullbleed",
  "lang": "en"
}/*EDITMODE-END*/;

function LiveApp() {
  const [t, setTweak] = useTweaks(LIVE_TWEAK_DEFAULTS);
  const typePair = LIVE_TYPE_PAIRS[t.typePair] || LIVE_TYPE_PAIRS.editorial;

  // EN/DE pills inside Direction A call window.__setLang.
  React.useEffect(() => {
    window.__setLang = (l) => setTweak("lang", l);
    return () => { delete window.__setLang; };
  }, [setTweak]);

  return (
    <>
      <DirectionA
        accent={t.accent}
        typePair={typePair}
        heroVariant={t.heroVariant}
        lang={t.lang}
      />

      <TweaksPanel>
        <TweakSection label="Language" />
        <TweakRadio
          label="EN / DE"
          value={t.lang}
          options={[{ value: "en", label: "English" }, { value: "de", label: "Deutsch" }]}
          onChange={(v) => setTweak("lang", v)}
        />

        <TweakSection label="Typography pairing" />
        <TweakSelect
          label="Pairing"
          value={t.typePair}
          options={[
            { value: "editorial", label: "Editorial Serif (Cormorant + Inter)" },
            { value: "field", label: "Field Journal (Spectral + Plex)" },
            { value: "expedition", label: "Expedition (Bricolage + Space)" },
          ]}
          onChange={(v) => setTweak("typePair", v)}
        />

        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={[
            { value: "fullbleed", label: "Full-bleed" },
            { value: "split", label: "Split" },
            { value: "stacked", label: "Stacked" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Accent" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#d2693c", "#c89e6a", "#a8694a", "#7a8a4a", "#4a7a8a", "#b58a3a"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </>
  );
}

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