// pages/_app.js
import ConsenHead from "@/src/ConsenHead";
import Preloader from "@/src/layout/Preloader";
import "@/styles/globals.css";
import { Fragment, useEffect, useState } from "react";
//import clarity from "@microsoft/clarity"; // ✅ add this

const App = ({ Component, pageProps }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1500);
    return () => clearTimeout(timer);
  }, []);

  // ✅ Initialize Microsoft Clarity (runs once, client-side only)
  useEffect(() => {
    // guard against SSR and avoid running in dev if you prefer
    if (typeof window !== "undefined" && process.env.NODE_ENV === "production") {
      try {
        clarity.init("oivjimrnym"); // ← replace with your Clarity project ID
      } catch (e) {
        console.warn("Clarity init failed:", e);
      }
    }
  }, []);

  // ✅ accessiBe script
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://acsbapp.com/apps/app/dist/js/app.js";
    script.async = true;
    script.onload = () => {
      if (typeof window.acsbJS !== "undefined") {
        window.acsbJS.init();
      }
    };
    (document.querySelector("head") || document.body).appendChild(script);
  }, []);

  return (
    <Fragment>
      <ConsenHead />
      <Preloader />
      {!loading && <Component {...pageProps} />}
    </Fragment>
  );
};

export default App;