// App shell: path-based routing + lang provider + Loi 25 banner + dynamic SEO meta.

const { useState: aUseState, useEffect: aUseEffect } = React;

const PAGE_META = {
  home: {
    fr: {
      title: "Zynflow — Automatisation IA Québec | Réceptionniste virtuel 24/7",
      description: "Agence IA québécoise. Vos clients reçoivent une réponse en moins de 30 secondes en français ou anglais. Conforme Loi 25. Immobilier, hypothèque, dentaire, juridique.",
      canonical: "https://zynflow.ca/"
    },
    en: {
      title: "Zynflow — AI Automation Quebec | 24/7 Virtual Receptionist",
      description: "Quebec AI agency. Clients get a response in under 30 seconds in French or English. Law 25 compliant. Real estate, mortgage, dental, legal.",
      canonical: "https://zynflow.ca/"
    }
  },
  services: {
    fr: {
      title: "Services & Tarifs IA | Zynflow — Chatbot Québec FR/EN",
      description: "4 plans d'automatisation IA pour professionnels québécois : Basic à 300$/mois, Voice + Text à 500$/mois. Bilingue FR/EN, conforme Loi 25. Immobilier, hypothèque, dentaire.",
      canonical: "https://zynflow.ca/services"
    },
    en: {
      title: "Services & Pricing | Zynflow — AI Chatbot Quebec FR/EN",
      description: "4 AI automation plans for Quebec professionals. Basic at $300/mo, Voice + Text at $500/mo. Bilingual FR/EN, Law 25 compliant. Real estate, mortgage, dental, legal.",
      canonical: "https://zynflow.ca/services"
    }
  },
  cases: {
    fr: {
      title: "Cas clients | Zynflow — Résultats IA réels Québec",
      description: "Découvrez comment Zynflow automatise les réponses pour agents immobiliers, courtiers hypothécaires et cliniques dentaires au Québec. Conformité Loi 25 incluse.",
      canonical: "https://zynflow.ca/cases"
    },
    en: {
      title: "Case Studies | Zynflow — Real AI Results Quebec",
      description: "See how Zynflow automates responses for Quebec real estate agents, mortgage brokers, dental clinics and law firms. Law 25 compliant.",
      canonical: "https://zynflow.ca/cases"
    }
  },
  blog: {
    fr: {
      title: "Blog | Zynflow — Automatisation IA Québec",
      description: "Tactiques d'automatisation IA, analyses du marché québécois et études de cas pour professionnels. Chatbot français Québec, Loi 25, voice agent bilingue.",
      canonical: "https://zynflow.ca/blog"
    },
    en: {
      title: "Blog | Zynflow — AI Automation Quebec",
      description: "AI automation tactics, Quebec market analysis and case studies for professionals who want to reclaim their time. Bilingual FR/EN chatbot, Law 25, voice agent.",
      canonical: "https://zynflow.ca/blog"
    }
  },
  contact: {
    fr: {
      title: "Contact | Zynflow — Agence IA Québec",
      description: "Réservez une consultation gratuite avec Zynflow. Appelez (438) 817-3485 ou écrivez à hamza@zynflow.ca. Réponse sous 24h. Automatisation IA Québec.",
      canonical: "https://zynflow.ca/contact"
    },
    en: {
      title: "Contact | Zynflow — Quebec AI Agency",
      description: "Book a free consultation with Zynflow. Call (438) 817-3485 or email hamza@zynflow.ca. Response within 24 hours. AI automation Quebec.",
      canonical: "https://zynflow.ca/contact"
    }
  },
  "politique-confidentialite": {
    fr: {
      title: "Politique de confidentialité | Zynflow",
      description: "Politique de confidentialité de Zynflow. Données hébergées au Canada (OVH Beauharnois), conformes à la Loi 25 du Québec sur la protection des renseignements personnels.",
      canonical: "https://zynflow.ca/politique-confidentialite"
    },
    en: {
      title: "Privacy Policy | Zynflow",
      description: "Zynflow privacy policy. Data hosted in Canada (OVH Beauharnois), compliant with Quebec Law 25 on the protection of personal information.",
      canonical: "https://zynflow.ca/politique-confidentialite"
    }
  },
  conditions: {
    fr: {
      title: "Conditions d'utilisation | Zynflow",
      description: "Conditions d'utilisation du site zynflow.ca et des services d'automatisation IA québécoise.",
      canonical: "https://zynflow.ca/conditions"
    },
    en: {
      title: "Terms of Use | Zynflow",
      description: "Terms of use for zynflow.ca and Quebec AI automation services.",
      canonical: "https://zynflow.ca/conditions"
    }
  },
  "loi-25": {
    fr: {
      title: "Conformité Loi 25 | Zynflow — IA conforme Québec",
      description: "Comment Zynflow assure la conformité à la Loi 25 sur la protection des renseignements personnels au Québec. Données au Canada, divulgation automatique, documentation CAI.",
      canonical: "https://zynflow.ca/loi-25"
    },
    en: {
      title: "Law 25 Compliance | Zynflow — Quebec Compliant AI",
      description: "How Zynflow ensures compliance with Quebec's Law 25 on the protection of personal information. Data in Canada, automatic disclosure, CAI-ready documentation.",
      canonical: "https://zynflow.ca/loi-25"
    }
  }
};

function getRouteFromPath() {
  const path = window.location.pathname.replace(/^\//, "").replace(/\/$/, "");
  return path || "home";
}

function normalizeRoute(route) {
  if (route === "privacy") return "politique-confidentialite";
  if (route === "terms") return "conditions";
  if (route === "law25") return "loi-25";
  return route;
}

// Updates <title>, <meta>, canonical, and OG tags based on current route + lang.
function MetaUpdater({ route }) {
  const { lang } = useLang();

  aUseEffect(() => {
    const key = normalizeRoute(route);
    const langKey = lang === "en" ? "en" : "fr";
    const meta = (PAGE_META[key] || PAGE_META.home)[langKey];

    document.title = meta.title;
    document.documentElement.lang = lang;

    const setMeta = (sel, attr, val) => {
      const el = document.querySelector(sel);
      if (el) el.setAttribute(attr, val);
    };

    setMeta('meta[name="description"]', "content", meta.description);
    setMeta('link[rel="canonical"]', "href", meta.canonical);
    setMeta('meta[property="og:title"]', "content", meta.title);
    setMeta('meta[property="og:description"]', "content", meta.description);
    setMeta('meta[property="og:url"]', "content", meta.canonical);
    setMeta('meta[property="og:locale"]', "content", lang === "fr" ? "fr_CA" : "en_CA");
    setMeta('meta[name="twitter:title"]', "content", meta.title);
    setMeta('meta[name="twitter:description"]', "content", meta.description);
  }, [route, lang]);

  return null;
}

function ScrollToTopOnRoute({ route }) {
  aUseEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, [route]);
  return null;
}

function App() {
  const [route, setRoute] = aUseState(getRouteFromPath);

  aUseEffect(() => {
    const onPop = () => setRoute(getRouteFromPath());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const navigate = (id) => {
    const normalized = normalizeRoute(id);
    const path = normalized === "home" ? "/" : `/${normalized}`;
    window.history.pushState(null, "", path);
    setRoute(normalized === "home" ? "home" : id);
  };

  let Page = HomePage;
  if (route === "services") Page = ServicesPage;
  else if (route === "cases") Page = CasesPage;
  else if (route === "blog") Page = BlogPage;
  else if (route === "contact") Page = ContactPage;
  else if (route === "privacy" || route === "politique-confidentialite") Page = PrivacyPage;
  else if (route === "terms" || route === "conditions") Page = TermsPage;
  else if (route === "law25" || route === "loi-25") Page = Law25Page;

  return (
    <LangProvider>
      <MetaUpdater route={route} />
      <ScrollToTopOnRoute route={route} />
      <div className="min-h-screen flex flex-col bg-bg">
        <Navbar route={route} setRoute={navigate} />
        <div className="flex-1" data-screen-label={`Zynflow · ${route}`}>
          <Page setRoute={navigate} />
        </div>
        <Footer setRoute={navigate} />
        <Loi25Banner />
      </div>
    </LangProvider>
  );
}

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