/* ===== App — pathname router (History API) + per-route SEO ===== */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const ROUTES = {
  "home": Home,
  "azienda": PageAzienda,
  "processo-produttivo": PageProcessoProduttivo,
  "settori": PageSettori,
  "parco-macchine": PageParcoMacchine,
  "contatti": PageContatti,
};

const BASE = "https://www.pasinitech.eu";
const OG_IMG = `${BASE}/assets/mectec-110.jpg`;

const ROUTE_SEO = {
  "home": {
    title: "Lavorazioni Meccaniche Oleodinamiche Conto Terzi | Pasini Tech Rolo (RE)",
    description: "Pasini Tech S.R.L.: distributori e blocchetti oleodinamici in alluminio, AVP e ghisa. Lavorazioni meccaniche conto terzi con oltre 40 anni di esperienza. Rolo, Reggio Emilia.",
    path: "/",
  },
  "azienda": {
    title: "Chi Siamo | Pasini Tech — Qualità, Affidabilità, Innovazione",
    description: "Pasini Tech nasce nel 2025 dall'acquisizione di Pasini F.lli snc, ereditando 40 anni di esperienza nell'oleodinamica. Qualità e affidabilità in ogni fase della produzione.",
    path: "/azienda",
  },
  "processo-produttivo": {
    title: "Processo Produttivo | Dal Preventivo alla Spedizione | Pasini Tech",
    description: "Scopri il processo produttivo di Pasini Tech: preventivo, pianificazione commessa, lavorazione CNC su alluminio S11, AVP e ghisa G25, controllo qualità e spedizione.",
    path: "/processo-produttivo",
  },
  "settori": {
    title: "Settori: Oleodinamica e Motori Elettrici | Pasini Tech",
    description: "Pasini Tech produce componenti per oleodinamica (distributori, blocchetti) e motori elettrici, su disegno del cliente. Trattamenti superficiali conto terzi disponibili.",
    path: "/settori",
  },
  "parco-macchine": {
    title: "Parco Macchine CNC | Centri Orizzontali e Verticali | Pasini Tech",
    description: "Heller MC12, Mori Seiki NHX5000, Stama MC326/S e sega MEP Shark 2500. Scopri il parco macchine CNC di Pasini Tech per lavorazioni di precisione su barra fino a Ø250mm.",
    path: "/parco-macchine",
  },
  "contatti": {
    title: "Contatti | Pasini Tech S.R.L. — Rolo (RE)",
    description: "Contatta Pasini Tech S.R.L. a Rolo (RE): +39 346 3225290, info@pasinitech.eu. Inviaci il tuo disegno tecnico per una valutazione di fattibilità e preventivo dedicato.",
    path: "/contatti",
  },
};

function applySeo(route) {
  const seo = ROUTE_SEO[route] || ROUTE_SEO["home"];
  const canonical = BASE + seo.path;

  document.title = seo.title;

  setMetaAttr("name", "description", seo.description);
  setMetaAttr("property", "og:title", seo.title);
  setMetaAttr("property", "og:description", seo.description);
  setMetaAttr("property", "og:url", canonical);
  setMetaAttr("property", "og:image", OG_IMG);
  setMetaAttr("name", "twitter:title", seo.title);
  setMetaAttr("name", "twitter:description", seo.description);
  setMetaAttr("name", "twitter:image", OG_IMG);

  let canonEl = document.querySelector('link[rel="canonical"]');
  if (!canonEl) {
    canonEl = document.createElement("link");
    canonEl.setAttribute("rel", "canonical");
    document.head.appendChild(canonEl);
  }
  canonEl.setAttribute("href", canonical);
}

function setMetaAttr(attr, name, content) {
  let el = document.querySelector(`meta[${attr}="${name}"]`);
  if (!el) {
    el = document.createElement("meta");
    el.setAttribute(attr, name);
    document.head.appendChild(el);
  }
  el.setAttribute("content", content);
}

function readRoute() {
  const r = location.pathname.replace(/^\//, "").split("/")[0].trim();
  return ROUTES[r] ? r : "home";
}

function App() {
  const [route, setRoute] = useStateApp(readRoute());

  useEffectApp(() => {
    applySeo(route);
  }, [route]);

  useEffectApp(() => {
    const onNav = () => {
      setRoute(readRoute());
      window.scrollTo({ top: 0, behavior: "auto" });
      ScrollTrigger && ScrollTrigger.refresh();
    };
    window.addEventListener("popstate", onNav);
    return () => window.removeEventListener("popstate", onNav);
  }, []);

  const Page = ROUTES[route] || Home;

  return (
    <div className="site">
      <Navbar route={route} />
      <main key={route}>
        <Page />
      </main>
      <Footer />
    </div>
  );
}

window.App = App;