/* London Free Guide — Spot detail app.
   Finds the item by ?id= (defaults to Primrose Hill), renders it, wires Tweaks. */
const { useEffect: useSpotEffect } = React;

const SPOT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E63B2E",
  "showMap": true,
  "showRelated": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

function getSpot() {
  const all = (window.LFG_CONTENT || []).concat(window.LFG_PILLARS || []);
  const id = window.LFG_FORCE_ID || new URLSearchParams(window.location.search).get("id");
  return all.find((i) => i.id === id) || all.find((i) => i.id === "primrose-hill") || all[0];
}

function SpotApp() {
  const [t, setTweak] = useTweaks(SPOT_TWEAK_DEFAULTS);
  const all = window.LFG_CONTENT || [];
  const item = getSpot();

  useSpotEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--lfg-accent", t.accent);
    document.body.classList.toggle("hide-map", !t.showMap);
    document.body.classList.toggle("hide-related", !t.showRelated);
    document.body.classList.toggle("dense", t.density === "dense");
  }, [t]);

  useSpotEffect(() => {
    if (item) document.title = item.title + " — London Free Guide";
  }, [item]);

  if (!item) return null;

  return (
    <React.Fragment>
      <SpotSchema item={item} />
      <Nav />
      <main>
        <Crumb item={item} />
        <Hero item={item} />
        <div className="wrap">
          <div className="spot-body">
            <div className="spot-main-col">
              <Lowdown item={item} />
              <SpotGetThere item={item} />
              <Gate item={item} />
            </div>
            <aside className="spot-aside">
              <FactCard item={item} />
              <MapCard item={item} />
            </aside>
          </div>
        </div>
        <Related item={item} />
        <div className="wrap spot-foot-nav">
          <a className="back-link" href="Home.html"><span aria-hidden="true">←</span> Back to Explore</a>
        </div>
        <Band />
      </main>
      <Footer />
      <GuideAgent />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent colour" value={t.accent}
          options={["#E63B2E", "#FF6A1A", "#1F8A5B", "#2A6FDB"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Spot page" />
        <TweakRadio label="Text density" value={t.density}
          options={["comfortable", "dense"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakToggle label="Show map panel" value={t.showMap}
          onChange={(v) => setTweak("showMap", v)} />
        <TweakToggle label="Show “more like this”" value={t.showRelated}
          onChange={(v) => setTweak("showRelated", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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