// Main app — hash routing + tweaks


const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EE7D4F",
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Plus Jakarta Sans",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#EE7D4F", // Coral (logo)
  "#D9633A", // Deep coral
  "#C44B33", // Warm terracotta
  "#3E7A6B", // Sage deep
];

const DISPLAY_FONT_OPTIONS = ["Bricolage Grotesque", "Fraunces", "Instrument Serif", "Space Grotesk"];
const BODY_FONT_OPTIONS = ["Plus Jakarta Sans", "Inter", "DM Sans", "Manrope"];

const App = () => {
  const [route, setRouteState] = React.useState(() => {
    const h = window.location.hash.replace("#", "");
    return ["home", "find", "about"].includes(h) ? h : "home";
  });
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // AJOUT ICI : Charge le script Vercel Analytics proprement sans faire planter le code
  React.useEffect(() => {
    if (window.location.hostname !== 'localhost' && !window.va) {
      window.va = function () { (window.vaq = window.vaq || []).push(arguments); };
      const script = document.createElement('script');
      script.src = '/_vercel/insights/script.js';
      script.defer = true;
      document.head.appendChild(script);
    }
  }, []);

  // Apply tweaks to root CSS variables
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--coral", t.accent);
    root.style.setProperty("--coral-dark", shade(t.accent, -0.18));
    root.style.setProperty("--coral-soft", mix(t.accent, "#FFFFFF", 0.7));
    root.style.setProperty("--coral-mist", mix(t.accent, "#FFFFFF", 0.86));
    root.style.setProperty("--font-display", `"${t.displayFont}", system-ui, sans-serif`);
    root.style.setProperty("--font-body", `"${t.bodyFont}", system-ui, sans-serif`);
  }, [t.accent, t.displayFont, t.bodyFont]);

  // Hash sync
  const setRoute = (r) => {
    setRouteState(r);
    window.history.replaceState(null, "", "#" + r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (["home", "find", "about"].includes(h)) setRouteState(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Dynamically load alternate Google Fonts if user picked one
  React.useEffect(() => {
    const want = new Set([t.displayFont, t.bodyFont]);
    want.forEach((family) => {
      const id = "gfont-" + family.replace(/\s+/g, "-");
      if (document.getElementById(id)) return;
      const link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      link.href = `https://fonts.googleapis.com/css2?family=${family.replace(/\s+/g, "+")}:wght@400;500;600;700;800&display=swap`;
      document.head.appendChild(link);
    });
  }, [t.displayFont, t.bodyFont]);

  return (
    <>
      <Nav route={route} setRoute={setRoute} />
      <main key={route} data-screen-label={"0" + (NAV_ITEMS.findIndex(n => n.id === route) + 1) + " " + NAV_ITEMS.find(n => n.id === route).label}>
        {route === "home" && <HomePage setRoute={setRoute} />}
        {route === "find" && <FindPage />}
        {route === "about" && <AboutPage setRoute={setRoute} />}
      </main>
      <Footer setRoute={setRoute} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Couleur principale"
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Typographie">
          <TweakSelect
            label="Titres"
            value={t.displayFont}
            options={DISPLAY_FONT_OPTIONS}
            onChange={(v) => setTweak("displayFont", v)}
          />
          <TweakSelect
            label="Corps"
            value={t.bodyFont}
            options={BODY_FONT_OPTIONS}
            onChange={(v) => setTweak("bodyFont", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

// ──────────────────────────────────────────────────────────────
// Color utilities (lightweight, no deps)
// ──────────────────────────────────────────────────────────────
function hexToRgb(hex) {
  const s = hex.replace("#", "");
  return [0, 2, 4].map((i) => parseInt(s.substr(i, 2), 16));
}
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")).join("");
}
function shade(hex, amount) {
  const [r, g, b] = hexToRgb(hex);
  const f = amount < 0 ? 1 + amount : 1 - amount;
  return rgbToHex(r * f, g * f, b * f);
}
function mix(a, b, t) {
  const [ar, ag, ab] = hexToRgb(a);
  const [br, bg, bb] = hexToRgb(b);
  return rgbToHex(ar * (1 - t) + br * t, ag * (1 - t) + bg * t, ab * (1 - t) + bb * t);
}

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