// app.jsx — main app: routing, language, modal, mobile CTA, tweaks

const { useState: useS, useEffect: useE, useMemo: useM, useCallback: useCB } = React;

const ROUTES = {
  "": "home", "home": "home",
  "packages": "packages",
  "team": "team",
  "faq": "faq",
  "contact": "contact",
};

const PAGE_LABELS = {
  home: { zh: "首页", en: "Home" },
  packages: { zh: "咨询配套", en: "Packages" },
  team: { zh: "营养师团队", en: "Team" },
  faq: { zh: "常见问题", en: "FAQ" },
  contact: { zh: "联系我们", en: "Contact" },
};

function parseHash() {
  const h = (location.hash || "#/").replace(/^#\/?/, "").replace(/\/$/, "");
  return ROUTES[h] || "home";
}

const FONT_PAIRS = {
  fraunces: { display: '"Fraunces", "Source Serif 4", "Noto Serif TC", Georgia, serif',
              body: '"Inter", "Noto Sans SC", "Noto Sans TC", -apple-system, sans-serif' },
  serifSerif: { display: '"Source Serif 4", "Noto Serif TC", Georgia, serif',
              body: '"Source Serif 4", "Noto Serif TC", Georgia, serif' },
  modernSans: { display: '"Inter", "Noto Sans SC", -apple-system, sans-serif',
              body: '"Inter", "Noto Sans SC", -apple-system, sans-serif' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  /* ── language ── */
  const [lang, setLang] = useS(() => {
    const stored = localStorage.getItem("lang");
    if (stored === "zh" || stored === "en") return stored;
    return /^zh/i.test(navigator.language || "") ? "zh" : "zh"; // brief: ZH default
  });
  useE(() => {
    localStorage.setItem("lang", lang);
    document.documentElement.lang = lang === "zh" ? "zh-CN" : "en";
  }, [lang]);
  const i18n = window.__I18N[lang];

  /* ── route ── */
  const [route, setRoute] = useS(parseHash());
  useE(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  useE(() => {
    document.title = `${PAGE_LABELS[route][lang]} · ${i18n.brand.logoTop} ${i18n.brand.logoBottom}`;
  }, [route, lang]);

  /* ── modal ── */
  const [modalOpen, setModalOpen] = useS(false);
  const [modalPrefill, setModalPrefill] = useS({});
  const onEnquire = useCB((prefill = {}) => {
    setModalPrefill(prefill);
    setModalOpen(true);
  }, []);
  const onWhatsApp = useCB(() => {
    const txt = lang === "zh"
      ? "您好，我想咨询关于营养咨询服务的资讯。"
      : "Hi, I'd like to enquire about your nutrition consultation services.";
    window.open(`https://wa.me/601121974872?text=${encodeURIComponent(txt)}`, "_blank");
  }, [lang]);

  /* ── mobile cta show after scroll ── */
  const [mobileCtaShow, setMobileCtaShow] = useS(false);
  useE(() => {
    const onScroll = () => setMobileCtaShow(window.scrollY > 480);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useE(() => {
    document.body.classList.toggle("has-mobile-cta", mobileCtaShow);
  }, [mobileCtaShow]);

  /* ── tweaks → CSS vars ── */
  useE(() => {
    const r = document.documentElement;
    // Palette
    const [primary, accent, cream] = t.palette;
    r.style.setProperty("--primary", primary);
    r.style.setProperty("--accent", accent);
    r.style.setProperty("--cream", cream);
    // Derive primary-ink (darker) and primary-soft (lighter)
    r.style.setProperty("--primary-ink", shade(primary, -0.18));
    r.style.setProperty("--primary-soft", tint(primary, 0.85));
    r.style.setProperty("--accent-soft", tint(accent, 0.5));
    r.style.setProperty("--cream-2", shade(cream, -0.04));
    r.style.setProperty("--paper", tint(cream, 0.4));

    // Fonts
    const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS.fraunces;
    r.style.setProperty("--font-display", pair.display);
    r.style.setProperty("--font-body", pair.body);

    // Density / radius
    r.classList.remove("density-compact", "density-regular", "density-comfy");
    r.classList.add("density-" + t.density);
    r.classList.remove("radius-square", "radius-soft", "radius-pill");
    r.classList.add("radius-" + t.radius);
  }, [t]);

  const PageEl = { home: HomePage, packages: PackagesPage, team: TeamPage, faq: FAQPage, contact: ContactPage }[route];

  return (
    <>
      <ScrollProgress />
      <Nav t={i18n} route={route} lang={lang} onLang={setLang} onEnquire={() => onEnquire()} />
      <PageEl key={route + lang} t={i18n} lang={lang} onEnquire={onEnquire} onWhatsApp={onWhatsApp} tweaks={t} />
      <Footer t={i18n} lang={lang} onLang={setLang} />
      <MobileCTA t={i18n} onEnquire={() => onEnquire()} onWhatsApp={onWhatsApp} show={mobileCtaShow} />
      <EnquiryModal t={i18n} open={modalOpen} onClose={() => setModalOpen(false)} prefill={modalPrefill} />

      <TweaksPanel>
        <TweakSection label={lang === "zh" ? "色彩" : "Color"} />
        <TweakColor label={lang === "zh" ? "主色调" : "Palette"} value={t.palette}
          options={[
            ["#3F7E5C", "#F2C9A5", "#FAF7F1"],
            ["#2D5F4A", "#E8B595", "#F7F3E9"],
            ["#5C6B4A", "#E8C9A5", "#FAF6EE"],
            ["#3B5C5A", "#E5B597", "#F8F4ED"],
            ["#4A4A4A", "#D4B595", "#F8F5F0"],
          ]}
          onChange={v => setTweak("palette", v)} />

        <TweakSection label={lang === "zh" ? "字体" : "Type"} />
        <TweakRadio label={lang === "zh" ? "搭配" : "Pairing"} value={t.fontPair}
          options={["fraunces", "serifSerif", "modernSans"]}
          onChange={v => setTweak("fontPair", v)} />

        <TweakSection label={lang === "zh" ? "形状" : "Shape"} />
        <TweakRadio label={lang === "zh" ? "圆角" : "Radius"} value={t.radius}
          options={["square", "soft", "pill"]}
          onChange={v => setTweak("radius", v)} />
        <TweakRadio label={lang === "zh" ? "密度" : "Density"} value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={v => setTweak("density", v)} />

        <TweakSection label={lang === "zh" ? "Hero 版型" : "Hero Layout"} />
        <TweakRadio label={lang === "zh" ? "样式" : "Variant"} value={t.heroVariant}
          options={["split", "centered", "fullbleed"]}
          onChange={v => setTweak("heroVariant", v)} />
      </TweaksPanel>
    </>
  );
}

/* ── color helpers ── */
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
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, amt) { // negative = darker
  const [r, g, b] = hexToRgb(hex);
  const f = 1 + amt;
  return rgbToHex(r * f, g * f, b * f);
}
function tint(hex, amt) { // 0..1 toward white
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex(r + (255 - r) * amt, g + (255 - g) * amt, b + (255 - b) * amt);
}

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