/* ============================================================
   APP — routing state + global controls + Tweaks
   ============================================================ */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "brass",
  "lang": "en",
  "darkNav": false
}/*EDITMODE-END*/;

function App() {
  const [tweak, setTweak] = useTweaks(DEFAULTS);
  const [page, setPage] = React.useState("home");        // home | buy | rent | area | agent | contact
  const [lead, setLead] = React.useState({ open: false, kind: "viewing", ctx: null });

  // Expose helper for Logo etc to nav home
  window.__nav = (p) => { setPage(p); scrollTo({ top: 0, behavior: "instant" }); };

  // Whenever page changes, scroll to top
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [page]);

  // Apply palette + RTL to body
  React.useEffect(() => {
    document.body.classList.toggle("palette-marine", tweak.palette === "marine");
    document.documentElement.setAttribute("dir", tweak.lang === "ar" ? "rtl" : "ltr");
    document.documentElement.setAttribute("lang", tweak.lang);
  }, [tweak.palette, tweak.lang]);

  const lang = tweak.lang;
  const t = I18N[lang] || I18N.en;

  function openLead(kind, ctx = null) { setLead({ open: true, kind, ctx }); }
  function closeLead() { setLead(l => ({ ...l, open: false })); }

  function go(p) { setPage(p); }

  // Dark nav for area and agent hero start
  const darkNav = false;

  return (
    <div id="app">
      <Nav
        page={page}
        t={t}
        lang={lang}
        setLang={(l) => setTweak("lang", l)}
        onPage={go}
        dark={darkNav}
        openLead={openLead}
      />

      <main>
        {page === "home"    && <HomePage    t={t} onPage={go} openLead={openLead} />}
        {page === "buy"     && <ListingsIndex t={t} mode="buy"  openLead={openLead} />}
        {page === "rent"    && <ListingsIndex t={t} mode="rent" openLead={openLead} />}
        {page === "area"    && <AreaPage    t={t} onPage={go} openLead={openLead} />}
        {page === "agent"   && <AgentPage   t={t} onPage={go} openLead={openLead} />}
        {page === "contact" && <ContactPage t={t} onPage={go} openLead={openLead} />}
      </main>

      <Footer t={t} onPage={go} />
      <WhatsAppFab />

      <LeadModal
        open={lead.open}
        kind={lead.kind}
        ctx={lead.ctx}
        t={t}
        onClose={closeLead}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={tweak.palette === "marine"
            ? ["#13384A", "#0E1216", "#FBF9F4"]
            : ["#B08D4F", "#0E1216", "#FBF9F4"]}
          options={[
            ["#B08D4F", "#0E1216", "#FBF9F4"],
            ["#13384A", "#0E1216", "#FBF9F4"],
          ]}
          onChange={(v) => {
            const isMarine = Array.isArray(v) && v[0] === "#13384A";
            setTweak("palette", isMarine ? "marine" : "brass");
          }}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={tweak.lang}
          options={[
            { value: "en", label: "EN" },
            { value: "ar", label: "AR" },
          ]}
          onChange={(v) => setTweak("lang", v)}
        />

        <TweakSection label="Navigate" />
        <TweakButton label="Home shell"       onClick={() => go("home")} />
        <TweakButton label="Area microsite"   onClick={() => go("area")} />
        <TweakButton label="Agent microsite"  onClick={() => go("agent")} />
        <TweakButton label="Listings index"   onClick={() => go("buy")} />
        <TweakButton label="Contact"          onClick={() => go("contact")} />

        <TweakSection label="Open lead modal" />
        <TweakButton label="Book a viewing"   onClick={() => openLead("viewing")} />
        <TweakButton label="Free valuation"   onClick={() => openLead("valuation")} secondary />
        <TweakButton label="List property"    onClick={() => openLead("listProp")} secondary />
        <TweakButton label="Talk to broker"   onClick={() => openLead("talk")} secondary />
        <TweakButton label="Brochure gate"    onClick={() => openLead("brochure")} secondary />
      </TweaksPanel>
    </div>
  );
}

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