// app.jsx — entry point for Version Française Pour Elle
// Hash-route between Home / Services / Contact (other routes show a stub).
// Hosts Tweaks panel for live theming.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#F6F1EA","#FBF8F3","#E7D8CC","#C2A24A","#1C1A18"],
  "displayFont": "Cormorant Garamond",
  "heroLayout": "centered",
  "rowDensity": "airy",
  "goldIntensity": "balanced",
  "showFAB": true
}/*EDITMODE-END*/;

const PALETTES = {
  ivory:  ["#F6F1EA","#FBF8F3","#E7D8CC","#C2A24A","#1C1A18"],
  blush:  ["#F4ECE6","#FCF6F2","#E8C9BD","#C8956C","#2A201D"],
  noir:   ["#EFEAE3","#F8F4ED","#D5C2AE","#A8884A","#16140F"],
  quiet:  ["#F0EFEB","#FAF9F5","#D8D2C7","#A89A7F","#1F1E1B"],
};

function App() {
  const [route, setRoute] = React.useState(() => {
    const fallback = window.__BYTESGLUE_SHOWCASE_ROUTE || "home";
    const h = window.location.hash.replace(/^#\/?/, "") || fallback;
    return h || "home";
  });
  const [lang, setLang] = React.useState(() => {
    return localStorage.getItem("vfpe-lang") || "en";
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Persist route in URL hash so refresh keeps page.
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#\/?/, "") || (window.__BYTESGLUE_SHOWCASE_ROUTE || "home");
      setRoute(h || "home");
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  React.useEffect(() => {
    window.location.hash = "/" + route;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  React.useEffect(() => {
    localStorage.setItem("vfpe-lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);

  // Make setRoute reachable from leaf components without prop-drilling.
  React.useEffect(() => { window.__VFPE_setRoute = setRoute; }, []);

  // Apply tweaks → CSS vars on :root
  React.useEffect(() => {
    const root = document.documentElement;
    const [ivory, cream, blush, gold, noir] = t.palette;
    root.style.setProperty("--ivory", ivory);
    root.style.setProperty("--cream", cream);
    root.style.setProperty("--blush-nude", blush);
    root.style.setProperty("--champagne-gold", gold);
    root.style.setProperty("--noir", noir);
    // Gold intensity rewrites hairline opacity.
    const goldOpacity = { subtle: 0.32, balanced: 0.55, present: 0.85 }[t.goldIntensity] || 0.55;
    const goldFaint = { subtle: 0.10, balanced: 0.18, present: 0.30 }[t.goldIntensity] || 0.18;
    root.style.setProperty("--gold-hairline", hexToRgba(gold, goldOpacity));
    root.style.setProperty("--gold-faint", hexToRgba(gold, goldFaint));
    root.style.setProperty("--display", `"${t.displayFont}", "Playfair Display", serif`);
    document.body.style.paddingBottom = "";  // reset on each render so mobile bar logic is sole owner
  }, [t]);

  return (
    <>
      <Header lang={lang} setLang={setLang} route={route} setRoute={setRoute} accent={t.goldIntensity === "present"} />
      <RouteSwitch route={route} lang={lang} setRoute={setRoute} hero={t.heroLayout} density={t.rowDensity} />
      <Footer lang={lang} setRoute={setRoute} />
      <MobileBar lang={lang} />
      {t.showFAB && <WhatsAppFAB />}
      <VFPETweaks t={t} setTweak={setTweak} />
    </>
  );
}

function RouteSwitch({ route, lang, setRoute, hero, density }) {
  switch (route) {
    case "services":
      return <ServicesPage lang={lang} density={density} />;
    case "contact":
      return <ContactPage lang={lang} />;
    case "home":
      return <HomePage lang={lang} setRoute={setRoute} hero={hero} />;
    // Out-of-scope routes — friendly placeholder rather than 404.
    case "about":
    case "gallery":
    case "reviews":
    case "memberships":
      return <Stub lang={lang} route={route} setRoute={setRoute} />;
    default:
      return <HomePage lang={lang} setRoute={setRoute} hero={hero} />;
  }
}

function Stub({ lang, route, setRoute }) {
  const t = window.VFPE_DATA.t[lang];
  const label = t[route] || route;
  return (
    <main className="section" data-screen-label={`Stub / ${route}`}>
      <div className="container" style={{ textAlign: "center", padding: "80px 24px" }}>
        <Eyebrow align="center">{lang === "fr" ? "Page en préparation" : "Page in preparation"}</Eyebrow>
        <h1 className="h1 display" style={{ marginTop: 24, marginBottom: 24 }}>
          {label}
        </h1>
        <p className="lead" style={{ margin: "0 auto" }}>
          {lang === "fr"
            ? "Cette section sera publiée à l'ouverture du nouveau site. Pour l'instant, retrouvez l'essentiel sur l'accueil ou consultez la carte des prestations."
            : "This section will go live at launch. For now, the essentials live on the home page or the services menu."}
        </p>
        <div style={{ display: "inline-flex", gap: 12, marginTop: 36 }}>
          <button className="btn btn-primary" onClick={() => setRoute("home")}>← {t.home}</button>
          <button className="btn btn-ghost" onClick={() => setRoute("services")}>{t.services} →</button>
        </div>
      </div>
    </main>
  );
}

// ── Tweaks panel ─────────────────────────────────────────────────

function VFPETweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · VFPE">
      <TweakSection label="Palette" />
      <TweakColor
        label="House colours"
        value={t.palette}
        options={[
          PALETTES.ivory,
          PALETTES.blush,
          PALETTES.noir,
          PALETTES.quiet,
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSelect
        label="Gold accent"
        value={t.goldIntensity}
        options={[
          { value: "subtle", label: "Subtle · whisper" },
          { value: "balanced", label: "Balanced · hairline" },
          { value: "present", label: "Present · couture" },
        ]}
        onChange={(v) => setTweak("goldIntensity", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={[
          "Cormorant Garamond",
          "Playfair Display",
          "DM Serif Display",
          "Italiana",
          "Bodoni Moda",
        ]}
        onChange={(v) => setTweak("displayFont", v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={t.heroLayout}
        options={[
          { value: "split", label: "Split" },
          { value: "centered", label: "Centered" },
          { value: "fullbleed", label: "Bleed" },
        ]}
        onChange={(v) => setTweak("heroLayout", v)}
      />

      <TweakSection label="Services menu" />
      <TweakRadio
        label="Density"
        value={t.rowDensity}
        options={[
          { value: "airy", label: "Airy" },
          { value: "compact", label: "Compact" },
        ]}
        onChange={(v) => setTweak("rowDensity", v)}
      />

      <TweakSection label="Floating" />
      <TweakToggle
        label="WhatsApp FAB"
        value={t.showFAB}
        onChange={(v) => setTweak("showFAB", v)}
      />
    </TweaksPanel>
  );
}

// ── helpers ──────────────────────────────────────────────────────

function hexToRgba(hex, alpha) {
  const h = String(hex || "").replace("#", "");
  const v = h.length === 3 ? h.split("").map(c => c + c).join("") : h.padEnd(6, "0");
  const n = parseInt(v.slice(0, 6), 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

// ── Mount ────────────────────────────────────────────────────────

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