// app.jsx — main shell, routing, tweaks integration

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "violet-indigo",
  "displayFont": "Poppins",
  "gridDensity": "comfortable",
  "headerStyle": "dark-hero",
  "showRightsBanners": true
}/*EDITMODE-END*/;

function App() {
  // route: { page, params? }
  const [route, setRoute] = useState({ page: "home", params: {} });
  const [enquireOpen, setEnquireOpen] = useState(false);
  const [enquireService, setEnquireService] = useState(null);
  const [lightboxSrc, setLightboxSrc] = useState(null);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // navigation helper
  const navigate = (page, params = {}) => {
    setRoute({ page, params });
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // apply tweaks
  useEffect(() => {
    const root = document.documentElement;

    // Palette presets
    const palettes = {
      "violet-indigo": {
        "--primary": "#6A2CB8",
        "--accent": "#7E33CB",
        "--secondary": "#303180",
        "--focus": "#7E33CB",
        "--brand-grad": "linear-gradient(120deg, #7E33CB 0%, #50329C 55%, #303180 100%)",
        "--dark": "#1B1530",
        "--text": "#1B1530",
      },
      "magenta-fuchsia": {
        "--primary": "#C42AA0",
        "--accent": "#E14BC0",
        "--secondary": "#7A1066",
        "--focus": "#E14BC0",
        "--brand-grad": "linear-gradient(120deg, #E14BC0 0%, #9B1E80 55%, #4F0A4A 100%)",
        "--dark": "#1B0820",
        "--text": "#1B0820",
      },
      "indigo-cyan": {
        "--primary": "#1E5BCF",
        "--accent": "#2A8FE3",
        "--secondary": "#0E2A6E",
        "--focus": "#2A8FE3",
        "--brand-grad": "linear-gradient(120deg, #2A8FE3 0%, #1E5BCF 55%, #0E2A6E 100%)",
        "--dark": "#0A1530",
        "--text": "#0A1530",
      },
      "amber-ink": {
        "--primary": "#9A6B0F",
        "--accent": "#E0A41A",
        "--secondary": "#3A2C0E",
        "--focus": "#E0A41A",
        "--brand-grad": "linear-gradient(120deg, #F2C04A 0%, #C58814 55%, #6B4408 100%)",
        "--dark": "#1F1A0E",
        "--text": "#1F1A0E",
      },
    };
    const p = palettes[t.palette] || palettes["violet-indigo"];
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));

    // Display font
    const fontStacks = {
      "Poppins": "'Poppins', 'Segoe UI', system-ui, sans-serif",
      "Space Grotesk": "'Space Grotesk', 'Segoe UI', system-ui, sans-serif",
      "Bricolage Grotesque": "'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif",
      "Manrope": "'Manrope', 'Segoe UI', system-ui, sans-serif",
    };
    root.style.setProperty("--font-display", fontStacks[t.displayFont] || fontStacks["Poppins"]);

    // Container width via grid density
    if (t.gridDensity === "tight") root.style.setProperty("--container", "1200px");
    else if (t.gridDensity === "loose") root.style.setProperty("--container", "1360px");
    else root.style.setProperty("--container", "1280px");
  }, [t.palette, t.displayFont, t.gridDensity]);

  const onDarkNav = route.page === "home" && t.headerStyle === "dark-hero";

  const openEnquire = (service) => {
    if (service) setEnquireService(service);
    setEnquireOpen(true);
  };

  let pageEl;
  switch (route.page) {
    case "home":        pageEl = <HomePage navigate={navigate} openEnquire={openEnquire} />; break;
    case "work":        pageEl = <WorkPage navigate={navigate} initialFilter={route.params.filter} />; break;
    case "case-study":  pageEl = <CaseStudyPage navigate={navigate} projectId={route.params.id} openLightbox={setLightboxSrc} openEnquire={openEnquire} />; break;
    case "services":    pageEl = <ServicesPage navigate={navigate} openEnquire={openEnquire} setEnquireService={setEnquireService} />; break;
    case "about":       pageEl = <AboutPage navigate={navigate} openEnquire={openEnquire} />; break;
    case "clients":     pageEl = <ClientsPage navigate={navigate} openEnquire={openEnquire} />; break;
    case "contact":     pageEl = <ContactPage openEnquire={openEnquire} />; break;
    default:            pageEl = <HomePage navigate={navigate} openEnquire={openEnquire} />;
  }

  return (
    <>
      <Navbar route={route} navigate={navigate} onDark={onDarkNav} openEnquire={() => openEnquire()} />
      <main key={route.page + (route.params.id || "")}>{pageEl}</main>
      <Footer navigate={navigate} openEnquire={() => openEnquire()} />
      <MobileBar openEnquire={() => openEnquire()} />
      <EnquireModal open={enquireOpen} onClose={() => setEnquireOpen(false)} defaultService={enquireService} />
      <Lightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Brand palette">
          <window.TweakRadio
            label="Palette"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "violet-indigo", label: "Violet" },
              { value: "magenta-fuchsia", label: "Magenta" },
              { value: "indigo-cyan", label: "Indigo" },
              { value: "amber-ink", label: "Amber" },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Typography">
          <window.TweakSelect
            label="Display font"
            value={t.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "Poppins", label: "Poppins (matches wordmark)" },
              { value: "Space Grotesk", label: "Space Grotesk" },
              { value: "Bricolage Grotesque", label: "Bricolage Grotesque" },
              { value: "Manrope", label: "Manrope" },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Layout">
          <window.TweakRadio
            label="Density"
            value={t.gridDensity}
            onChange={(v) => setTweak("gridDensity", v)}
            options={[
              { value: "tight", label: "Tight" },
              { value: "comfortable", label: "Comfy" },
              { value: "loose", label: "Loose" },
            ]}
          />
          <window.TweakRadio
            label="Home header"
            value={t.headerStyle}
            onChange={(v) => setTweak("headerStyle", v)}
            options={[
              { value: "dark-hero", label: "Over hero" },
              { value: "light", label: "Light" },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Editorial">
          <window.TweakToggle
            label="Rights banners"
            value={t.showRightsBanners}
            onChange={(v) => setTweak("showRightsBanners", v)}
          />
        </window.TweakSection>

        <window.TweakSection label="Jump to page">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, padding: "4px 0" }}>
            {[
              ["home", "Home"],
              ["work", "Work"],
              ["services", "Services"],
              ["about", "About"],
              ["clients", "Clients"],
              ["contact", "Contact"],
            ].map(([id, label]) => (
              <button key={id} className="service-tile" style={{ fontSize: 12 }} onClick={() => navigate(id)}>{label}</button>
            ))}
            <button className="service-tile" style={{ gridColumn: "1 / -1", fontSize: 12 }} onClick={() => navigate("case-study", { id: "ep-07" })}>Open case study →</button>
          </div>
        </window.TweakSection>
      </window.TweaksPanel>

      {/* hide rights banners if toggled off */}
      {!t.showRightsBanners && (
        <style>{`.note-banner { display: none !important; } .flag { display: none !important; }`}</style>
      )}
    </>
  );
}

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