/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakColor, Cursor, Nav, Footer, Home, Services, Tarifs, Realisations, Contact, MentionsLegales, Confidentialite, CGV */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#7C3AED",
  "density": "regular",
  "personality": "subtle"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState(() => {
    const h = window.location.hash.replace("#", "");
    return ["accueil", "services", "tarifs", "realisations", "contact", "mentions-legales", "confidentialite", "cgv"].includes(h) ? h : "accueil";
  });
  const [curtain, setCurtain] = useState("");

  // Apply tweaks to :root
  useEffect(() => {
    const r = document.documentElement;
    // accent — laisse l'utilisateur changer la couleur d'accent dans le panel
    r.style.setProperty("--accent", tweaks.accent);
    // ink reste blanc sur tout violet/coloré moyennement foncé
    r.style.setProperty("--accent-ink", "#FFFFFF");
    r.dataset.density = tweaks.density;
    r.dataset.personality = tweaks.personality;
  }, [tweaks]);

  const navigate = (p) => {
    if (p === page) return;
    setCurtain("is-in");
    setTimeout(() => {
      setPage(p);
      window.location.hash = p;
      window.scrollTo(0, 0);
      setCurtain("is-out");
      setTimeout(() => setCurtain(""), 500);
    }, 480);
  };

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (["accueil", "services", "tarifs", "realisations", "contact", "mentions-legales", "confidentialite", "cgv"].includes(h) && h !== page) {
        setPage(h);
        window.scrollTo(0, 0);
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, [page]);

  let Page;
  switch (page) {
    case "services": Page = Services; break;
    case "tarifs": Page = Tarifs; break;
    case "realisations": Page = Realisations; break;
    case "contact": Page = Contact; break;
    case "mentions-legales": Page = MentionsLegales; break;
    case "confidentialite": Page = Confidentialite; break;
    case "cgv": Page = CGV; break;
    default: Page = Home;
  }

  return (
    <>
      <Cursor />
      <Nav page={page} onNav={navigate} />
      <div className={`vw-page-curtain ${curtain}`} />
      <main id="main-content" key={page} data-screen-label={page}>
        <Page onNav={navigate} />
      </main>
      {page !== "contact" && <Footer onNav={navigate} />}
      {page === "contact" && (
        <div className="vw-footer__bottom" style={{ padding: "24px var(--gutter)", borderTop: "1px solid var(--rule-soft)" }}>
          <span>© {new Date().getFullYear()} Velox Web</span>
          <span>Sites qui convertissent ~ vraiment.</span>
        </div>
      )}

      <TweaksPanel title="Tweaks · Velox">
        <TweakSection label="Apparence" />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Mise en page" />
        <TweakRadio
          label="Densité"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "compact", label: "Compact" },
            { value: "regular", label: "Régulier" },
            { value: "spacious", label: "Aéré" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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