// Main app — area microsite as default, with route switching to PD + Valuation,
// Tweaks panel for palette / locale / template variants.

function App() {
  // Tweakable defaults (editable on disk via __edit_mode_set_keys)
  const defaults = /*EDITMODE-BEGIN*/{
    "palette": "marine",
    "density": "comfortable",
    "showStats": true,
    "showMap": true,
    "showAgents": true,
    "ctaStyle": "marine",
    "heroVariant": "standard"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = window.useTweaks(defaults);
  const [route, setRoute] = React.useState({ name: "area", slug: "palm-jumeirah" });
  const [locale, setLocale] = React.useState("en");

  // Apply palette + RTL to root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
  }, [tweaks.palette]);

  React.useEffect(() => {
    document.documentElement.setAttribute("dir", locale === "ar" ? "rtl" : "ltr");
    document.documentElement.setAttribute("lang", locale);
  }, [locale]);

  const area = window.AREAS.find(a => a.slug === (route.slug || "palm-jumeirah")) || window.AREAS[0];

  return (
    <>
      <Nav route={route} setRoute={setRoute} locale={locale} setLocale={setLocale}/>

      {route.name === "area" && (
        <>
          <AreaHero area={area} locale={locale} setRoute={setRoute} />
          <TrustStrip locale={locale} />
          <AreaIntro area={area} locale={locale} />
          <Listings locale={locale} setRoute={setRoute} />
          <CommunitySpec locale={locale} />
          {tweaks.showMap && <MapBlock locale={locale} />}
          {tweaks.showAgents && <AgentsRow locale={locale} />}
          <ValuationCTA locale={locale} setRoute={setRoute} />
          <Footer locale={locale} />
        </>
      )}

      {route.name === "property" && (
        <>
          <PropertyDetail ref={route.ref} setRoute={setRoute} locale={locale}/>
          <ValuationCTA locale={locale} setRoute={setRoute} />
          <Footer locale={locale} />
        </>
      )}

      {route.name === "valuation" && (
        <>
          <ValuationFlow setRoute={setRoute} locale={locale}/>
          <Footer locale={locale} />
        </>
      )}

      <WhatsAppFab locale={locale}/>

      {/* Tweaks panel */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Visual system">
          <div style={{display:"flex", flexDirection:"column", gap:6}}>
            <div className="twk-lbl"><span>Accent palette</span></div>
            <PaletteSwatches value={tweaks.palette}
              onChange={v => setTweak("palette", v)} />
          </div>
        </window.TweakSection>

        <window.TweakSection label="Navigation">
          <window.TweakRadio
            label="Template"
            value={route.name}
            onChange={v => {
              if (v === "area") setRoute({name:"area", slug:"palm-jumeirah"});
              else if (v === "property") setRoute({name:"property", ref:"HH-21847"});
              else setRoute({name:"valuation"});
            }}
            options={[
              { value: "area", label: "Area" },
              { value: "property", label: "Property" },
              { value: "valuation", label: "Sell" },
            ]}
          />
          <window.TweakRadio
            label="Language"
            value={locale}
            onChange={setLocale}
            options={[
              { value: "en", label: "English" },
              { value: "ar", label: "العربية" },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Sections">
          <window.TweakToggle label="Map block"
            value={tweaks.showMap} onChange={v => setTweak("showMap", v)} />
          <window.TweakToggle label="Agent row"
            value={tweaks.showAgents} onChange={v => setTweak("showAgents", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

// Custom TweakColor wrapper because the starter expects flat values — we want to
// store the palette slug. Re-implement minimal: 3 swatches with palette labels.
function PaletteSwatches({ value, onChange }) {
  const opts = [
    { slug:"marine",   colors:["#1B3A4D","#0E1318","#F4F0E7"], label:"Marine"   },
    { slug:"warm",     colors:["#B5694A","#0E1318","#F4F0E7"], label:"Clay"     },
    { slug:"midnight", colors:["#C7A675","#11161C","#ECE6D8"], label:"Midnight" },
  ];
  return (
    <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:8}}>
      {opts.map(o => (
        <button key={o.slug} onClick={()=>onChange(o.slug)}
          style={{
            background:"transparent", border: value===o.slug ? "1px solid var(--accent)" : "1px solid #d9d3c4",
            padding:8, cursor:"pointer", textAlign:"left",
          }}>
          <div style={{display:"flex", gap:0, marginBottom:6}}>
            {o.colors.map((c,i)=>(
              <div key={i} style={{flex:1, height:24, background:c}}/>
            ))}
          </div>
          <div style={{fontFamily:"var(--mono)", fontSize:9, letterSpacing:"0.18em",
            textTransform:"uppercase", color:"var(--text)"}}>{o.label}</div>
        </button>
      ))}
    </div>
  );
}
window.PaletteSwatches = PaletteSwatches;

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