/* Slim app wrapper for the static content pages (About, FAQ).
   - No mystery layers, no mobile-device preview frame.
   - Reads window.AWOTOWA_PAGE to decide which direction to render.
   - Same Tweaks panel pattern as app.jsx so the lang toggle persists.
*/

const { useState: useStatePage, useEffect: useEffectPage } = React;

const BERGEN_PALETTE_PAGE = {
  red:    "#c8493a",
  orange: "#d4683a",
  ochre:  "#d4a83a",
  copper: "#4a8a7a",
  cream:  "#e8d8c0",
};

const PAGE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentKey": "red",
  "lang": "en",
  "cycleAccent": false
}/*EDITMODE-END*/;

function PageApp() {
  const [t, setTweak] = useTweaks(PAGE_TWEAK_DEFAULTS);
  const accent = BERGEN_PALETTE_PAGE[t.accentKey] || BERGEN_PALETTE_PAGE.red;
  const isProd = typeof window !== 'undefined' && window.AWOTOWA_PROD === true;
  const page = (typeof window !== 'undefined' && window.AWOTOWA_PAGE) || 'about';

  // Seed language from the site-wide awo_lang cookie (injected by PHP as
  // AWOTOWA_NAV.lang) once on mount, so the choice persists across the site.
  useEffectPage(() => {
    const c = window.AWO_LANG || (window.AWOTOWA_NAV && window.AWOTOWA_NAV.lang) || 'en';
    if (c && c !== t.lang) setTweak("lang", c);
  }, []);

  // Sync html[lang] for hreflang correctness when the user toggles.
  useEffectPage(() => {
    const map = { no: 'nb', es: 'es', en: 'en' };
    document.documentElement.lang = map[t.lang] || 'en';
  }, [t.lang]);

  // Optional click-to-cycle accent (off by default on these pages).
  const accentOrder = ["red", "orange", "ochre", "copper"];
  useEffectPage(() => {
    if (!t.cycleAccent) return;
    const onClick = () => {
      const i = accentOrder.indexOf(t.accentKey);
      const next = accentOrder[(i + 1) % accentOrder.length];
      setTweak("accentKey", next);
    };
    window.addEventListener("click", onClick, true);
    return () => window.removeEventListener("click", onClick, true);
  }, [t.cycleAccent, t.accentKey]);

  const common = {
    lang: t.lang,
    setLang: (l) => {
      try { document.cookie = 'awo_lang=' + l + ';path=/;max-age=31536000;samesite=lax'; } catch(e) {}
      location.reload();
    },
    accent,
    palette: BERGEN_PALETTE_PAGE,
    revealAll: false,
  };

  let body = null;
  if (page === 'about') {
    body = <div data-screen-label="About"><AboutDirection {...common} /></div>;
  } else if (page === 'faq') {
    body = <div data-screen-label="FAQ"><FaqDirection {...common} /></div>;
  } else if (page === 'about-faq') {
    body = (
      <div data-screen-label="About + FAQ">
        <AboutDirection {...common} noFooter />
        <FaqDirection {...common} noNav />
      </div>
    );
  }

  return (
    <>
      {body}
      {!isProd && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Bergen accent">
            <TweakColor
              label="Accent"
              value={accent}
              onChange={(v) => {
                const key = Object.keys(BERGEN_PALETTE_PAGE).find(k => BERGEN_PALETTE_PAGE[k] === v) || "red";
                setTweak("accentKey", key);
              }}
              options={[BERGEN_PALETTE_PAGE.red, BERGEN_PALETTE_PAGE.copper, BERGEN_PALETTE_PAGE.ochre, BERGEN_PALETTE_PAGE.orange]}
            />
            <TweakToggle
              label="Cycle on click"
              value={t.cycleAccent}
              onChange={(v) => setTweak("cycleAccent", v)}
            />
          </TweakSection>
          <TweakSection label="Language">
            <TweakRadio
              label="Language"
              value={t.lang}
              onChange={(v) => setTweak("lang", v)}
              options={[{ value: "en", label: "English" }, { value: "no", label: "Norsk" }, { value: "es", label: "Español" }]}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PageApp />);