// Soul MVNT — app root

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "terracotta",
  "ground": "ivory",
  "displayFont": "fraunces"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  terracotta: { accent: "#B85F44", deep: "#8E4329", rose: "#D9B1A5" },
  burl:       { accent: "#7A5B3A", deep: "#574736", rose: "#C5AC8E" },
  sage:       { accent: "#6B8367", deep: "#4F6A4E", rose: "#B8C7AF" },
  noir:       { accent: "#211C16", deep: "#000000", rose: "#8C7B66" },
};
const GROUND_PALETTES = {
  ivory: { bg: "#F8F3EA", surface: "#EFE7D9", marble: "#F2ECE2", line: "#E6DCCD" },
  pearl: { bg: "#F4F2EE", surface: "#E8E3DB", marble: "#EEEAE3", line: "#DCD5C9" },
  bone:  { bg: "#EFE7D9", surface: "#E5DBCA", marble: "#E9DFCD", line: "#D6C9B3" },
};
const DISPLAY_FONTS = {
  fraunces: '"Fraunces", "Cormorant Garamond", Georgia, serif',
  syne: '"Syne", Georgia, serif',
  mont: '"Montserrat", -apple-system, sans-serif',
};

function App() {
  const [route, setRoute] = useState("home");
  const [activeFormat, setActiveFormat] = useState(null);
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Expose nav for logo / footer links
  useEffect(() => { window.__nav = setRoute; }, []);

  // Apply palette tokens
  useEffect(() => {
    const a = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.terracotta;
    const g = GROUND_PALETTES[t.ground] || GROUND_PALETTES.ivory;
    const root = document.documentElement;
    root.style.setProperty("--terracotta", a.accent);
    root.style.setProperty("--terracotta-deep", a.deep);
    root.style.setProperty("--rose", a.rose);
    root.style.setProperty("--ivory", g.bg);
    root.style.setProperty("--bone", g.surface);
    root.style.setProperty("--marble", g.marble);
    root.style.setProperty("--line", g.line);
    root.style.setProperty("--font-serif", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS.fraunces);
  }, [t.accent, t.ground, t.displayFont]);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [route]);

  const onAdd = (p) => {
    setCart(prev => {
      const ex = prev.find(x => x.id === p.id);
      if (ex) return prev.map(x => x.id === p.id ? { ...x, qty: x.qty + 1 } : x);
      return [...prev, { ...p, qty: 1 }];
    });
  };
  const onChangeQty = (id, delta) => {
    setCart(prev => prev
      .map(x => x.id === id ? { ...x, qty: x.qty + delta } : x)
      .filter(x => x.qty > 0));
  };
  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  return (
    <div data-screen-label={`01 Soul MVNT — ${route}`}>
      <Nav route={route} onNav={setRoute} cartCount={cartCount} onOpenCart={() => setCartOpen(true)} />

      {route === "home" && <HomePage onNav={setRoute} onOpenFormat={setActiveFormat} />}
      {route === "classes" && <ClassesPage onOpenFormat={setActiveFormat} />}
      {route === "schedule" && <SchedulePage />}
      {route === "pricing" && <PricingPage onNav={setRoute} />}
      {route === "trainers" && <TrainersPage />}
      {route === "studio" && <StudioPage />}
      {route === "shop" && <ShopPage onAdd={onAdd} cart={cart} />}
      {route === "faq" && <FaqPage />}

      {route !== "home" && (
        <section className="cta-band">
          <div className="container">
            <Eyebrow><span style={{ color: "rgba(248,243,234,0.5)" }}>Ready when you are</span></Eyebrow>
            <h2 style={{ marginTop: 18 }}>
              Take the first <em>step</em>.
            </h2>
            <p>Start with the Soul MVNT Starter Pack — your easiest way into every format.</p>
            <div className="btns">
              <button className="btn btn-lg btn-primary" onClick={() => setRoute("pricing")}>
                Get the Starter Pack <span className="arrow">→</span>
              </button>
              <button className="btn btn-lg btn-secondary" onClick={() => setRoute("schedule")}>
                Book a Class
              </button>
            </div>
          </div>
        </section>
      )}

      <Footer onNav={setRoute} />
      <WhatsAppFab />

      {activeFormat && (
        <FormatModal
          format={activeFormat}
          onClose={() => setActiveFormat(null)}
          onBook={() => { setActiveFormat(null); setRoute("schedule"); }}
        />
      )}
      {cartOpen && (
        <CartModal items={cart} onClose={() => setCartOpen(false)} onChange={onChangeQty} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakRadio
            label="Color"
            value={t.accent}
            options={[
              { value: "terracotta", label: "Terra" },
              { value: "burl", label: "Burl" },
              { value: "sage", label: "Sage" },
              { value: "noir", label: "Noir" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection label="Ground tone">
          <TweakRadio
            label="Ground"
            value={t.ground}
            options={[
              { value: "ivory", label: "Ivory" },
              { value: "pearl", label: "Pearl" },
              { value: "bone", label: "Bone" },
            ]}
            onChange={(v) => setTweak("ground", v)}
          />
        </TweakSection>
        <TweakSection label="Display font">
          <TweakRadio
            label="Family"
            value={t.displayFont}
            options={[
              { value: "fraunces", label: "Fraunces" },
              { value: "syne", label: "Syne" },
              { value: "mont", label: "Mont." },
            ]}
            onChange={(v) => setTweak("displayFont", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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