// Si Fashion — main app shell
const { useState: $us, useEffect: $ue, useRef: $ur } = React;

// ============== Tweak defaults — host-rewritable ==============
const SF_TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showBrandTiles": true,
  "accentPalette": ["#b88101", "#755304", "#293537", "#e4e8ec"],
  "displayFont": "Montserrat",
  "showFab": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = $us("home");
  const [enquireOpen, setEnquireOpen] = $us(false);
  const [enquireCtx, setEnquireCtx] = $us({});
  const [brand, setBrand] = $us(null);
  const [tweaks, setTweak] = (window.useTweaks
    ? window.useTweaks(SF_TWEAKS_DEFAULTS)
    : [SF_TWEAKS_DEFAULTS, () => {}]);

  // Apply palette accent + display font to CSS vars
  $ue(() => {
    if (tweaks.accentPalette && tweaks.accentPalette[0]) {
      document.documentElement.style.setProperty("--accent", tweaks.accentPalette[0]);
    }
    if (tweaks.displayFont) {
      document.documentElement.style.setProperty(
        "--font-display",
        `"${tweaks.displayFont}", "Helvetica Neue", Helvetica, Arial, sans-serif`
      );
    }
  }, [tweaks.accentPalette, tweaks.displayFont]);

  const navigate = (r) => {
    setRoute(r);
    setBrand(null);
    setTimeout(() => window.scrollTo({ top: 0, behavior: "instant" }), 10);
  };

  const openEnquire = (ctx = {}) => {
    setEnquireCtx(ctx || {});
    setEnquireOpen(true);
  };
  const closeEnquire = () => setEnquireOpen(false);
  const openBrand = (b) => setBrand(b);

  const showTiles = !!tweaks.showBrandTiles;

  const pageProps = { navigate, openEnquire, openBrand, showTiles };

  return (
    <div data-screen-label={`${route.charAt(0).toUpperCase()}${route.slice(1)}`}>
      <Navbar route={route} navigate={navigate} onEnquire={() => openEnquire({})} />
      <main>
        {route === "home" && <PageHome {...pageProps} />}
        {route === "showroom" && <PageShowroom {...pageProps} />}
        {route === "brands" && <PageBrands {...pageProps} />}
        {route === "sports" && <PageSports {...pageProps} />}
        {route === "brand-development" && <PageBrandDev {...pageProps} />}
        {route === "about" && <PageAbout {...pageProps} />}
        {route === "contact" && <PageContact {...pageProps} />}
      </main>
      <Footer navigate={navigate} onEnquire={() => openEnquire({})} />

      {tweaks.showFab && <EnquireFab onClick={() => openEnquire({})} />}

      {brand && (
        <BrandDetail
          brand={brand}
          onClose={() => setBrand(null)}
          onEnquire={(ctx) => { setBrand(null); openEnquire(ctx); }}
          showTiles={showTiles}
        />
      )}

      {enquireOpen && <EnquiryDrawer context={enquireCtx} onClose={closeEnquire} />}

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Visual">
            <window.TweakColor
              label="Accent palette"
              value={tweaks.accentPalette}
              onChange={(v) => setTweak("accentPalette", v)}
              options={[
                ["#b88101", "#755304", "#293537", "#e4e8ec"],
                ["#c2410c", "#7c2d12", "#1c1917", "#e7e5e4"],
                ["#0f766e", "#134e4a", "#1c2024", "#e4e9eb"],
                ["#a16207", "#713f12", "#0c0a09", "#eae6df"],
                ["#dc2626", "#7f1d1d", "#1a1a1a", "#e7e5e4"],
              ]}
            />
            <window.TweakRadio
              label="Display font"
              value={tweaks.displayFont}
              onChange={(v) => setTweak("displayFont", v)}
              options={["Montserrat", "DM Sans"]}
            />
          </window.TweakSection>

          <window.TweakSection label="Brand tiles">
            <window.TweakToggle
              label="Show third-party tiles"
              value={tweaks.showBrandTiles}
              onChange={(v) => setTweak("showBrandTiles", v)}
            />
          </window.TweakSection>

          <window.TweakSection label="Controls">
            <window.TweakToggle
              label="Sticky Enquire button"
              value={tweaks.showFab}
              onChange={(v) => setTweak("showFab", v)}
            />
          </window.TweakSection>

          <window.TweakSection label="Quick jump">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
              {[
                ["home","Home"], ["showroom","Showroom"], ["brands","Brands"],
                ["sports","Sports"], ["brand-development","Brand Dev"],
                ["about","About"], ["contact","Contact"]
              ].map(([r,l]) => (
                <window.TweakButton key={r} label={l} onClick={() => navigate(r)} />
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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