// Main app
const { useState: useStateA, useEffect: useEffectA } = React;

// URL ↔ pagina mapping
const PAGE_TO_PATH = {
  home:    "/",
  about:   "/over-ons",
  how:     "/hoe-het-werkt",
  prices:  "/prijzen",
  contact: "/contact",
  catalog: "/modellen",
  detail:  "/modellen/motor"
};
const PATH_TO_PAGE = {
  "/":               "home",
  "/over-ons":       "about",
  "/hoe-het-werkt":  "how",
  "/prijzen":        "prices",
  "/contact":        "contact",
  "/modellen":       "catalog"
};
function pathToPage(path) {
  const clean = path.replace(/\/$/, "") || "/";
  if (PATH_TO_PAGE[clean]) return PATH_TO_PAGE[clean];
  if (clean.startsWith("/modellen/")) return "detail";
  return "home";
}

function readDefaults() {
  try {
    const el = document.getElementById("tweak-defaults");
    if (!el) return {};
    const m = el.textContent.match(/\/\*EDITMODE-BEGIN\*\/([\s\S]*?)\/\*EDITMODE-END\*\//);
    return JSON.parse(m ? m[1] : el.textContent);
  } catch { return {}; }
}

function Tweaks({ defs, onChange }) {
  const [visible, setVisible] = useStateA(false);

  useEffectA(() => {
    function onMsg(e) {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setVisible(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type: "__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  if (!visible) return null;

  function set(key, val) {
    const next = { ...defs, [key]: val };
    onChange(next);
    window.parent.postMessage({type: "__edit_mode_set_keys", edits: {[key]: val}}, "*");
  }

  const Seg = ({ k, options }) => (
    <div className="tweak-seg">
      {options.map(o => (
        <button key={o.v} className={defs[k] === o.v ? "on" : ""} onClick={() => set(k, o.v)}>{o.label}</button>
      ))}
    </div>
  );

  return (
    <div className="tweaks">
      <h6>Tweaks <span className="led"/></h6>
      <div className="tweak-row">
        <label>Thema</label>
        <Seg k="theme" options={[{v:"light",label:"Licht"},{v:"bone",label:"Bone"},{v:"dark",label:"Donker"}]} />
      </div>
      <div className="tweak-row">
        <label>Accent</label>
        <Seg k="accent" options={[{v:"red",label:"Rood"},{v:"cobalt",label:"Blauw"},{v:"lime",label:"Lime"},{v:"amber",label:"Amber"}]} />
      </div>
      <div className="tweak-row">
        <label>Typografie</label>
        <Seg k="font" options={[{v:"sans",label:"Sans"},{v:"editorial",label:"Editor"},{v:"neo",label:"Neo"}]} />
      </div>
      <div className="tweak-row">
        <label>Hero layout</label>
        <Seg k="hero" options={[{v:"bike",label:"Bike"},{v:"story",label:"Story"},{v:"split",label:"Split"}]} />
      </div>
    </div>
  );
}

function App() {
  const [page, setPage] = useStateA(() => pathToPage(window.location.pathname));
  const [selectedBike, setSelectedBike] = useStateA(window.BIKES[0]);
  const [defs, setDefs] = useStateA(() => {
    const saved = localStorage.getItem("a2-tweaks");
    const base = readDefaults();
    if (saved) return { ...base, ...JSON.parse(saved) };
    const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    return { ...base, theme: systemDark ? "dark" : "light" };
  });

  const PAGE_META = {
    home:    { title: "A2-terugvoering specialist | Motor begrenzen naar 35 kW | Vanaf €395 | A2 Motor", desc: "Motor begrenzen of terugvoeren naar 35 kW (A2)? A2 Motor plaatst een TÜV-kit, regelt de RDW-keuring én zet het op je kenteken. Vanaf €395, klaar in 5 dagen. Heel Nederland." },
    about:   { title: "Over ons | A2 Motor — A2-terugvoering specialist Voorthuizen", desc: "A2 Motor is opgericht door motorrijders uit Voorthuizen. Wij voeren motoren terug naar 35 kW via TÜV-kits — goedkoper dan een vermogensbank, altijd omkeerbaar." },
    how:     { title: "Hoe werkt A2-terugvoering? | Van kenteken tot rijden | A2 Motor", desc: "Stap voor stap: hoe voert A2 Motor jouw motor terug naar 35 kW? TÜV-kit plaatsen, RDW-keuring, kentekenwijziging — alles uitgelegd. Vanaf €395." },
    prices:  { title: "Kosten A2-terugvoering | Motor begrenzen naar 35 kW | Tarieven | A2 Motor", desc: "Wat kost motor begrenzen of terugvoeren naar 35 kW? Vanaf €395 inclusief TÜV-kit, RDW-keuring en kentekenwijziging. Goedkoper dan een dealer. A2 Motor." },
    contact: { title: "Contact & offerte aanvragen | A2 Motor Voorthuizen", desc: "Offerte aanvragen voor A2-terugvoering? Stuur je kenteken via WhatsApp of het contactformulier. Binnen 24 uur reactie. Heel Nederland." },
    catalog: { title: "A2-geschikte motoren | Modellen die wij terugvoeren | A2 Motor", desc: "Overzicht van populaire motoren die A2 Motor terugvoert naar 35 kW: Yamaha MT-07, Kawasaki Z650, Honda CB650R, KTM Duke en meer. Staat jouw model erbij?" },
    detail:  { title: "Motor terugvoeren naar A2 | A2 Motor specialist", desc: "Ontdek hoe A2 Motor dit model terugvoert naar 35 kW. Inclusief RDW-keuring, kentekenwijziging en levenslange garantie. Vraag direct een offerte aan." },
  };

  // BreadcrumbList per pagina
  function getBreadcrumbSchema(p, bike) {
    const base = "https://a2-motor.nl";
    const home = { "@type": "ListItem", "position": 1, "name": "Home", "item": base + "/" };
    if (p === "home") return null;
    if (p === "about") return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Over ons", "item": base + "/over-ons" }] };
    if (p === "how")   return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Zo werkt het", "item": base + "/hoe-het-werkt" }] };
    if (p === "prices") return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Prijzen", "item": base + "/prijzen" }] };
    if (p === "contact") return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Contact", "item": base + "/contact" }] };
    if (p === "catalog") return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Modellen", "item": base + "/modellen" }] };
    if (p === "detail" && bike) return { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [home, { "@type": "ListItem", "position": 2, "name": "Modellen", "item": base + "/modellen" }, { "@type": "ListItem", "position": 3, "name": bike.brand + " " + bike.model, "item": base + "/modellen/" + bike.id }] };
    return null;
  }

  // Navigeer naar een pagina — update URL en state
  function navigate(newPage, bikeId) {
    const path = bikeId ? `/modellen/${bikeId}` : (PAGE_TO_PATH[newPage] || "/");
    if (window.location.pathname !== path) {
      history.pushState({ page: newPage }, "", path);
    }
    setPage(newPage);
  }

  // Browser terug/vooruit knop
  useEffectA(() => {
    function onPop() { setPage(pathToPage(window.location.pathname)); }
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  useEffectA(() => {
    const meta = PAGE_META[page] || PAGE_META.home;
    const path = page === "detail" ? (selectedBike ? `/modellen/${selectedBike.id}` : "/modellen") : (PAGE_TO_PATH[page] || "/");
    const fullUrl = `https://a2-motor.nl${path}`;

    // Pas title en description aan
    document.title = page === "detail" && selectedBike
      ? `${selectedBike.brand} ${selectedBike.model} A2-terugvoering | Offerte aanvragen | A2 Motor`
      : meta.title;
    const descContent = page === "detail" && selectedBike
      ? `${selectedBike.brand} ${selectedBike.model} terugvoeren naar A2 (35 kW)? A2 Motor verzorgt de TÜV-kit, RDW-keuring en kentekenwijziging. Vraag gratis offerte aan.`
      : meta.desc;

    const setMeta = (sel, attr, val) => { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); };
    setMeta('meta[name="description"]', "content", descContent);
    setMeta('meta[property="og:title"]', "content", document.title);
    setMeta('meta[property="og:description"]', "content", descContent);
    setMeta('meta[property="og:url"]', "content", fullUrl);
    setMeta('meta[name="twitter:title"]', "content", document.title);
    setMeta('meta[name="twitter:description"]', "content", descContent);
    setMeta('link[rel="canonical"]', "href", fullUrl);

    // BreadcrumbList schema — dynamisch injecteren
    let bcEl = document.getElementById("schema-breadcrumb");
    if (!bcEl) {
      bcEl = document.createElement("script");
      bcEl.type = "application/ld+json";
      bcEl.id = "schema-breadcrumb";
      document.head.appendChild(bcEl);
    }
    const bc = getBreadcrumbSchema(page, selectedBike);
    bcEl.textContent = bc ? JSON.stringify(bc) : "";

    window.scrollTo(0, 0);
  }, [page, selectedBike]);
  useEffectA(() => { localStorage.setItem("a2-tweaks", JSON.stringify(defs)); }, [defs]);

  useEffectA(() => {
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    function onSystemChange(e) {
      if (!localStorage.getItem("a2-tweaks")) {
        setDefs(d => ({ ...d, theme: e.matches ? "dark" : "light" }));
      }
    }
    mq.addEventListener("change", onSystemChange);
    return () => mq.removeEventListener("change", onSystemChange);
  }, []);

  useEffectA(() => {
    const root = document.documentElement;
    root.dataset.theme = defs.theme === "light" ? "" : defs.theme;
    root.dataset.accent = defs.accent === "red" ? "" : defs.accent;
    root.dataset.font = defs.font === "sans" ? "" : defs.font;
  }, [defs]);

  const navProps = { page, setPage: navigate };
  const bikeProps = {
    setPage: navigate,
    setSelectedBike: (bike) => { setSelectedBike(bike); }
  };

  let content;
  if (page === "home") {
    content = (
      <>
        <Hero variant={defs.hero || "bike"} setPage={navigate} />
        <Process />
        <PhotoBand />
        <Rules />
        <Quotes />
        <ExpertiseBlock />
        <Faq />
        <CTA setPage={navigate} />
      </>
    );
  } else if (page === "about") {
    content = <About />;
  } else if (page === "how") {
    content = <HowItWorks setPage={navigate} />;
  } else if (page === "prices") {
    content = <Prices setPage={navigate} />;
  } else if (page === "contact") {
    content = <Contact setPage={navigate} />;
  } else if (page === "catalog") {
    content = <Catalog {...bikeProps} />;
  } else if (page === "detail") {
    content = <Detail bike={selectedBike} setPage={navigate} />;
  } else {
    navigate("home");
    content = null;
  }

  return (
    <>
      <Nav {...navProps} />
      {content}
      <Footer setPage={navigate} />
      <Tweaks defs={defs} onChange={setDefs} />
    </>
  );
}

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