// Blink Experience — main app

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#faed21",
  "density": "regular",
  "scrollMarquee": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useS({ page: "home" });
  const [locale, setLocale] = useS("en");
  const [briefOpen, setBriefOpen] = useS(false);
  const [briefCategory, setBriefCategory] = useS(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // expose go() globally so deep links from inline content work
  useE(() => {
    window.go = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "instant" }); };
    window.openBrief = (cat) => { setBriefCategory(cat || null); setBriefOpen(true); };
  }, []);

  // RTL toggle
  useE(() => {
    const html = document.documentElement;
    if (locale === "ar") { html.setAttribute("dir", "rtl"); html.setAttribute("lang", "ar"); }
    else { html.setAttribute("dir", "ltr"); html.setAttribute("lang", "en"); }
  }, [locale]);

  // Apply tweaks to CSS vars
  useE(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // pick contrast — light accents get black text, dark accents get white
    const dark = ["#0a0a0c", "#16161a"].includes((t.accent || "").toLowerCase());
    document.documentElement.style.setProperty("--accent-ink", dark ? "#f6f5ef" : "#0a0a0c");
    document.documentElement.style.setProperty("--focus", t.accent);

    if (t.density === "compact") document.documentElement.style.setProperty("--pad", "clamp(16px, 3vw, 36px)");
    else if (t.density === "comfy") document.documentElement.style.setProperty("--pad", "clamp(24px, 5vw, 72px)");
    else document.documentElement.style.setProperty("--pad", "clamp(20px, 4vw, 56px)");
  }, [t.accent, t.density]);

  const go = useCB((r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "instant" }); }, []);

  const page = (() => {
    switch (route.page) {
      case "home":     return <Home go={go} />;
      case "work":     return <Work go={go} initialFilter={route.filter || "all"} />;
      case "case":     return <CaseStudy go={go} slug={route.slug} />;
      case "services": return <Services go={go} />;
      case "about":    return <About go={go} />;
      case "contact":  return <Contact go={go} />;
      default:         return <Home go={go} />;
    }
  })();

  return (
    <div className="shell">
      <Nav route={route} setRoute={go} locale={locale} setLocale={setLocale} />
      {page}
      <Footer go={go} />

      {/* Sticky Brief CTA — appears on all pages except home (hero has its own giant one) */}
      {route.page !== "home" && (
        <button className="sticky-brief" onClick={() => window.openBrief()}>
          <span className="tw-pulse-bar" style={{ marginRight: 2 }}>
            <span className="b"></span><span className="b"></span><span className="b"></span>
          </span>
          Brief us
        </button>
      )}

      <BriefModal open={briefOpen} onClose={() => setBriefOpen(false)} initialCategory={briefCategory} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#faed21", "#ff2a2a", "#ff39d6", "#1fe9ff", "#2c52ff", "#38b54a"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Density" />
        <TweakRadio
          label="Page padding"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle
          label="Marquee scroll"
          value={t.scrollMarquee}
          onChange={(v) => setTweak("scrollMarquee", v)}
        />
        <TweakSection label="Jump to" />
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", padding: "0 4px" }}>
          {NAV_ITEMS.map(n => (
            <button key={n.id} className="btn" onClick={() => go({ page: n.id })}
              style={{ padding: "6px 12px", fontSize: 12, border: "1px solid var(--twk-border, rgba(0,0,0,0.12))", background: "transparent", color: "inherit" }}>
              {n.label}
            </button>
          ))}
          <button className="btn" onClick={() => go({ page: "case", slug: "fei-world-cup-finals-2024" })}
            style={{ padding: "6px 12px", fontSize: 12, background: "var(--accent)", color: "var(--accent-ink)" }}>
            Sample case →
          </button>
        </div>
      </TweaksPanel>

      {/* Marquee scroll toggle — fail-safe override */}
      <style>{!t.scrollMarquee ? ".marquee__track { animation: none !important; }" : ""}</style>
    </div>
  );
}

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