/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const BREADCRUMBS = {
  "/":          null,
  "/spanje":    [["Home","/"],["Spanje","/spanje"]],
  "/calculator":[["Home","/"],["Calculator","/calculator"]],
  "/projecten": [["Home","/"],["Projecten","/projecten"]],
  "/over-ons":  [["Home","/"],["Over ons","/over-ons"]],
  "/blog":      [["Home","/"],["Blog","/blog"]],
  "/blog/spaanse-vastgoedmarkt-loopt-voorop": [["Home","/"],["Blog","/blog"],["De Spaanse vastgoedmarkt loopt voorop","/blog/spaanse-vastgoedmarkt-loopt-voorop"]],
  "/werken-bij":[["Home","/"],["Werken bij","/werken-bij"]],
};
const REGIO_NAMEN = { andalusie:"Andalusië", murcia:"Murcia", valencia:"Valencia", catalonie:"Catalonië" };

function updateBreadcrumb(route) {
  let items = BREADCRUMBS[route] || null;
  if (!items && route.startsWith("/regio/")) {
    const id = route.replace("/regio/","");
    const naam = REGIO_NAMEN[id] || id;
    items = [["Home","/"],["Projecten","/projecten"],[naam, route]];
  }
  let el = document.getElementById("breadcrumb-schema");
  if (!items) { if (el) el.remove(); return; }
  if (!el) { el = document.createElement("script"); el.id = "breadcrumb-schema"; el.type = "application/ld+json"; document.head.appendChild(el); }
  el.textContent = JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": items.map(([name, url], i) => ({
      "@type": "ListItem",
      "position": i + 1,
      "name": name,
      "item": "https://www.viavastgoed.com" + url
    }))
  });
}


const META = {
  "/":           { title: "Vastgoed Kopen in Spanje | VIA Vastgoed — Nederlandse Specialist", desc: "VIA Vastgoed begeleidt Nederlanders van A tot Z bij het kopen van vastgoed in Spanje. Onafhankelijk advies, lokaal netwerk, één aanspreekpunt. Bekijk onze projecten." },
  "/spanje":     { title: "Vastgoed in Spanje | Regio's, Rendementen & Begeleiding — VIA Vastgoed", desc: "Ontdek de beste regio's voor vastgoedinvestering in Spanje: Andalusië, Valencia, Murcia en Catalonië. Bruto rendementen van 4–8%. VIA Vastgoed begeleidt je van A tot Z." },
  "/calculator": { title: "Rendementscalculator Vastgoed Spanje | Bereken Jouw Rendement — VIA Vastgoed", desc: "Bereken direct het rendement op vastgoed in Spanje. Voer je eigen inbreng, koopprijs en verhuurinkomsten in en zie jouw netto rendement en cashflow." },
  "/projecten":  { title: "Vastgoedprojecten in Spanje | Nieuwbouw Costa del Sol & Costa Blanca — VIA Vastgoed", desc: "Bekijk onze geselecteerde vastgoedprojecten in Spanje. Nieuwbouw op Costa del Sol, Costa Blanca en Costa Cálida. Rendementen van 5–8% bruto. Vraag de brochure aan." },
  "/over-ons":   { title: "Over VIA Vastgoed | Nederlandse Vastgoedspecialist in Spanje", desc: "VIA Vastgoed is opgericht door Nederlanders, voor Nederlanders die willen investeren in Spanje. Onafhankelijk advies, sterk lokaal netwerk, volledig ontzorgd." },
  "/blog":       { title: "Blog & Vastgoednieuws Spanje | VIA Vastgoed", desc: "Lees de laatste ontwikkelingen over de Spaanse vastgoedmarkt, rendementen, regio's en tips voor Nederlandse kopers en investeerders." },
  "/blog/spaanse-vastgoedmarkt-loopt-voorop": { title: "De Spaanse Vastgoedmarkt Loopt Voorop in Europa | VIA Vastgoed Blog", desc: "Voor 2026 wordt een prijsstijging van 9,3% verwacht — meer dan twee keer het Europese gemiddelde. Wat betekent dat voor jou als koper of investeerder in Spanje?" },
  "/werken-bij": { title: "Werken bij VIA Vastgoed | Vacatures in Vastgoed & Spanje", desc: "Werk je graag op het snijvlak van vastgoed en Spanje? Bekijk onze openstaande vacatures en bouw mee aan het leidende Nederlandse vastgoedadviesbureau voor Spanje." },
  "/regio/andalusie":  { title: "Huis Kopen op de Costa del Sol | Vastgoed Andalusië — VIA Vastgoed", desc: "Koop een huis op de Costa del Sol via VIA Vastgoed. Marbella, Estepona, Málaga en het binnenland. Sterke internationale vraag, rendementen van 4–7% en volledige begeleiding." },
  "/regio/murcia":     { title: "Huis Kopen op de Costa Cálida | Vastgoed Murcia — VIA Vastgoed", desc: "Koop een huis op de Costa Cálida in Murcia. Mar Menor, La Manga en Cartagena met lage instapprijs en hoge rendementen. VIA Vastgoed begeleidt je van A tot Z." },
  "/regio/valencia":   { title: "Huis Kopen op de Costa Blanca | Vastgoed Valencia — VIA Vastgoed", desc: "Koop een huis op de Costa Blanca via VIA Vastgoed. Noord en Zuid, van Denia tot Torrevieja. Scherp geprijsde nieuwbouw, bruto rendementen tot 7%." },
  "/regio/catalonie":  { title: "Vastgoed in Catalonië | Costa Brava & Barcelona — VIA Vastgoed", desc: "Investeer in vastgoed in Catalonië: Costa Brava, Barcelona regio en Costa Dorada. Hoogste vraagdruk van Spanje, sterk in waardestijging." },
};


function updateCanonical(route) {
  let el = document.getElementById("canonical-tag");
  if (!el) {
    el = document.createElement("link");
    el.id = "canonical-tag";
    el.rel = "canonical";
    document.head.appendChild(el);
  }
  el.href = "https://www.viavastgoed.com" + route;
}

function updateMeta(route) {
  const m = META[route] || META["/"];
  document.title = m.title;
  const el = document.querySelector('meta[name="description"]');
  if (el) el.setAttribute("content", m.desc);
}

function App() {
  const [route, setRoute] = useState(window.location.pathname || "/");
  const [globalGate, setGlobalGate] = useState(null);
  useEffect(() => { window.openLeadGate = (mode, project) => setGlobalGate({mode, project}); return () => { delete window.openLeadGate; }; }, []);
  useReveal();
  useEffect(() => {
    const onPop = () => { setRoute(window.location.pathname || "/"); window.scrollTo({ top: 0, behavior: "instant" }); };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="/"]');
      if (a && !a.target && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
        e.preventDefault();
        const path = a.getAttribute("href");
        history.pushState(null, "", path);
        setRoute(path);
        window.scrollTo({ top: 0, behavior: "instant" });
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);
  useEffect(() => {
    document.querySelectorAll("[data-route]").forEach((el) => { el.classList.toggle("active", el.getAttribute("data-route") === route); });
    const darkHeroRoutes = ["/", "/spanje", "/over-ons", "/werken-bij"];
    document.getElementById("site-header").classList.toggle("over-dark", darkHeroRoutes.includes(route));
    updateBreadcrumb(route);
    updateMeta(route);
    updateCanonical(route);
  }, [route]);
  useEffect(() => {
    const onScroll = () => { document.getElementById("site-header").classList.toggle("scrolled", window.scrollY > 100); };
    window.addEventListener("scroll", onScroll, { passive: true }); onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  let page;
  if (route === "/spanje") page = <SpanjePage key="s" />;
  else if (route === "/calculator") page = <CalculatorPage key="c" />;
  else if (route === "/projecten") page = <ProjectenPage key="p" />;
  else if (route.startsWith("/regio/")) {
    const pid = route.replace("/regio/", "");
    page = <ProvincePage key={"pr-"+pid} provinceId={pid} />;
  }
  else if (route === "/over-ons") page = <OverOnsPage key="o" />;
  else if (route === "/blog") page = <BlogPage key="b" />;
  else if (route === "/blog/spaanse-vastgoedmarkt-loopt-voorop") page = <BlogPostPage key="bp1" />;
  else if (route === "/werken-bij") page = <WerkenBijPage key="w" />;
  else if (route === "/privacy") page = <PrivacyPage key="prv" />;
  else page = <HomePage key="h" />;
  return <>{page}<LeadGate open={!!globalGate} mode={globalGate?.mode} project={globalGate?.project} onClose={()=>setGlobalGate(null)} /></>;
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "anim": 0.7, "theme": "light", "scale": 1 }/*EDITMODE-END*/;

function TweaksUI() {
  const { TweaksPanel, TweakSection, TweakSlider, TweakRadio, useTweaks } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.body.dataset.theme = t.theme;
    document.documentElement.style.setProperty("--anim-intensity", t.anim);
    document.documentElement.style.setProperty("--type-scale", t.scale);
  }, [t.theme, t.anim, t.scale]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Look"><TweakRadio label="Achtergrond" value={t.theme} options={[{ value:"light", label:"Licht" },{ value:"dark", label:"Donker" }]} onChange={(v)=>setTweak("theme",v)} /></TweakSection>
      <TweakSection title="Type"><TweakSlider label="Schaal" value={t.scale} min={0.85} max={1.2} step={0.05} onChange={(v)=>setTweak("scale",v)} format={(v)=>`${(v*100).toFixed(0)}%`} /></TweakSection>
      <TweakSection title="Beweging"><TweakSlider label="Animatie intensiteit" value={t.anim} min={0} max={1.4} step={0.1} onChange={(v)=>setTweak("anim",v)} format={(v)=>`${(v*100).toFixed(0)}%`} /></TweakSection>
    </TweaksPanel>
  );
}

// Set title + description immediately on page load (before React mount)
updateMeta(window.location.pathname || "/");
updateCanonical(window.location.pathname || "/");

ReactDOM.createRoot(document.getElementById("app")).render(<App />);
ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksUI />);