/* ============================================================
   PAGES — Home, Buy/Rent listings, Area microsite, Agent
   microsite, Contact
   ============================================================ */

/* ---------- Listing Card (shared) ---------- */
function ListingCard({ L, t, onClick }) {
  return (
    <article className="listing" onClick={onClick}>
      <div className="listing__media">
        <img src={L.image} alt="" loading="lazy"/>
        <span className="listing__tag">{L.tag}</span>
        <button className="listing__heart" aria-label="Save"><Icon.heart/></button>
      </div>
      <div className="listing__body">
        <div className="listing__area">{L.area} · {L.type}</div>
        <h3 className="listing__title">{L.title}</h3>
        <div className="listing__specs">
          <span><Icon.bed/>{L.beds} bd</span>
          <span><Icon.bath/>{L.baths} ba</span>
          <span><Icon.area/>{L.sizeSqft ? L.sizeSqft + " sqft" : "On request"}</span>
        </div>
        <div className="listing__price">
          <span className="price-poa">{L.priceLabel}</span>
          <span className="price-cta">View detail <Icon.arrowSm/></span>
        </div>
      </div>
    </article>
  );
}

/* ============================================================
   HOME / SHELL
   ============================================================ */
function HomePage({ t, dir, onPage, openLead }) {
  return (
    <React.Fragment>
      {/* HERO ====================================== */}
      <section className="hero">
        <img className="hero__img" src="media/hero-dubai-skyline.webp" alt="" />
        <div className="hero__scrim"></div>
        <div className="hero__badge">RERA ORN 11917 · Verified</div>
        <div className="hero__content">
          <div className="wrap">
            <div className="hero__topline">
              <span className="eyebrow on-ink">{t.hero.eyebrow}<span className="dot"></span>EST 2012</span>
              <span className="eyebrow on-ink">{t.hero.forbes}</span>
            </div>

            <div className="hero__title">
              <h1 className="display">{t.hero.h1Pre} <em>{t.hero.h1Em}</em></h1>
            </div>
            <p className="hero__sub">{t.hero.sub}</p>

            <div className="hero__cta">
              <button className="btn btn--accent" onClick={() => openLead("viewing")}>
                {t.hero.bookView}<Icon.arrowSm/>
              </button>
              <button className="btn btn--ghost-light" onClick={() => openLead("valuation")}>
                {t.hero.valuation}
              </button>
              <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)" }}>
                <span className="wa-dot"></span>{t.hero.wa}
              </a>
            </div>

            <div className="hero__trust">
              {t.hero.trust.map((tt, i) => (
                <span key={i}><strong>{tt.v}</strong>{tt.k}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SEARCH BAR ====================================== */}
      <section style={{ background: "var(--paper)" }}>
        <div className="wrap">
          <SearchBar t={t} />
          <div className="fixture-note">
            <span className="dot"></span>{t.search.fixture}
          </div>
        </div>
      </section>

      {/* TRUST STRIP ====================================== */}
      <section className="section--sm">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>{t.trustStrip.eyebrow}</div>
          <div className="trust">
            {t.trustStrip.cells.map((c, i) => (
              <div className="trust__cell" key={i}>
                <span className="meta">{c.k}</span>
                <h3 className="h3" style={{ fontFamily: "var(--serif)" }}>{c.v}</h3>
                <span className="footnote">{c.sub}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AREAS ====================================== */}
      <section className="section section--paper2">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>{t.areas.eyebrow}</span>
              <h2 className="h1">{t.areas.h1} <em>{t.areas.h1Em}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">{t.areas.lede}</p>
            </div>
          </div>
          <div className="areas">
            {AREAS.map((a) => (
              <div className={"area-card " + (a.big ? "area-card--big" : "")} key={a.slug}
                   onClick={() => onPage("area")}>
                <img src={a.img} alt=""/>
                <div className="area-card__scrim"></div>
                <div className="area-card__content">
                  <span className="area-card__num">{a.meta}</span>
                  <div className="area-card__bot">
                    <span className="area-card__meta">Microsite</span>
                    <h3 className="area-card__title">{a.name}</h3>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED LISTINGS ====================================== */}
      <section className="section">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>{t.listings.eyebrow}</span>
              <h2 className="h1">{t.listings.h1} <em>{t.listings.h1Em}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">{t.listings.lede}</p>
              <button className="btn btn--ghost" style={{ marginTop: 16 }} onClick={() => onPage("buy")}>
                {t.listings.viewAll}<Icon.arrowSm/>
              </button>
            </div>
          </div>
          <div className="listings">
            {FIXTURE_LISTINGS.slice(0,3).map(L => <ListingCard key={L.ref} L={L} t={t} onClick={() => openLead("viewing", L.title)}/>)}
          </div>
          <div className="fixture-note">
            <span className="dot"></span>{t.search.fixture}
          </div>
        </div>
      </section>

      {/* WHY DRIVEN (dark editorial) ====================================== */}
      <section className="section--lg section--ink">
        <div className="wrap">
          <div className="why">
            <div>
              <span className="eyebrow on-ink"><span className="dot"></span>{t.why.eyebrow}</span>
              <h2 className="h1" style={{ marginTop: 16 }}>{t.why.h1} <em>{t.why.h1Em}</em></h2>
              <p className="lede" style={{ marginTop: 24 }}>{t.why.lede}</p>
              <div style={{ marginTop: 36 }}>
                <button className="btn btn--accent" onClick={() => openLead("talk")}>
                  Speak with a broker<Icon.arrowSm/>
                </button>
              </div>
            </div>
            <div className="why__pillars">
              {t.why.pillars.map((p, i) => (
                <div className="why__pillar" key={i}>
                  <span className="num">{p.n}</span>
                  <div>
                    <h4>{p.h}</h4>
                    <p>{p.p}</p>
                  </div>
                  <Icon.arrow className="arrow" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* AGENTS ====================================== */}
      <section className="section">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>{t.agentsSec.eyebrow}</span>
              <h2 className="h1">{t.agentsSec.h1} <em>{t.agentsSec.h1Em}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">{t.agentsSec.lede}</p>
              <button className="btn btn--ghost" style={{ marginTop: 16 }} onClick={() => onPage("agent")}>
                Browse all brokers<Icon.arrowSm/>
              </button>
            </div>
          </div>
          <div className="agents-grid">
            {AGENTS.slice(0,8).map(a => (
              <div className="agent-card" key={a.slug} onClick={() => onPage("agent")}>
                <div className="agent-card__photo">
                  <img src={a.photo} alt=""/>
                  <div className="agent-card__lang">
                    {a.langs.map(l => <span key={l}>{l}</span>)}
                  </div>
                </div>
                <div className="agent-card__name">{a.name}</div>
                <div className="agent-card__role">{a.role}</div>
                <div className="agent-card__stats">
                  <span>{a.listings} live</span>
                  <span>{a.sales}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA BAND ====================================== */}
      <section className="cta-band">
        <img className="cta-band__bg" src="media/area-downtown-skyline.webp" alt=""/>
        <div className="cta-band__scrim"></div>
        <div className="wrap">
          <div className="cta-band__c">
            <div className="cta-band__title">
              <span className="eyebrow on-ink"><span className="dot"></span>{t.finalCta.eyebrow}</span>
              <h2 className="h1" style={{ marginTop: 16 }}>
                {t.finalCta.h1} <em>{t.finalCta.h1Em}</em> {t.finalCta.h1Suf}
              </h2>
              <p className="lede" style={{ marginTop: 20, color: "rgba(255,255,255,.7)" }}>{t.finalCta.sub}</p>
            </div>
            <div className="cta-band__actions">
              <button className="btn btn--accent" onClick={() => openLead("viewing")}>Book a viewing<Icon.arrowSm/></button>
              <button className="btn btn--ghost-light" onClick={() => openLead("valuation")}>Free valuation<Icon.arrowSm/></button>
              <button className="btn btn--ghost-light" onClick={() => openLead("listProp")}>List your property<Icon.arrowSm/></button>
              <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)" }}>
                <span className="wa-dot"></span>WhatsApp · wa.me/971800776655
              </a>
              <a className="wa-chip" href={TEL} style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)" }}>
                <Icon.phone/>+971 4 245 4800
              </a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ----- Listing search bar ----- */
function SearchBar({ t }) {
  const [tab, setTab] = React.useState("buy");
  return (
    <form className="search-bar" onSubmit={(e) => e.preventDefault()}>
      <div className="search-bar__tabs">
        <button type="button" className={"search-bar__tab " + (tab==="buy"  ? "active":"")} onClick={() => setTab("buy")}>{t.search.tabBuy}</button>
        <button type="button" className={"search-bar__tab " + (tab==="rent" ? "active":"")} onClick={() => setTab("rent")}>{t.search.tabRent}</button>
      </div>
      <div className="search-bar__seg">
        <label>{t.search.area}</label>
        <select defaultValue=""><option value="">{t.search.areaPh}</option>{AREAS.map(a => <option key={a.slug}>{a.name}</option>)}</select>
      </div>
      <div className="search-bar__seg">
        <label>{t.search.type}</label>
        <select defaultValue=""><option value="">{t.search.typePh}</option><option>Apartment</option><option>Villa</option><option>Townhouse</option><option>Penthouse</option></select>
      </div>
      <div className="search-bar__seg">
        <label>{t.search.beds}</label>
        <select defaultValue=""><option value="">{t.search.bedsPh}</option><option>Studio</option><option>1</option><option>2</option><option>3</option><option>4+</option></select>
      </div>
      <div className="search-bar__seg">
        <label>{t.search.price}</label>
        <select defaultValue=""><option value="">{t.search.pricePh}</option><option>Up to AED 2m</option><option>2 – 5m</option><option>5 – 10m</option><option>10m+</option></select>
      </div>
      <button className="search-bar__go" type="submit"><Icon.search/>{t.search.cta}</button>
    </form>
  );
}

/* ============================================================
   AREA MICROSITE — Downtown Dubai
   ============================================================ */
function AreaPage({ t, onPage, openLead }) {
  const d = t.downtown;
  return (
    <React.Fragment>
      <section className="area-hero">
        <img className="area-hero__img" src="media/area-downtown-skyline.webp" alt=""/>
        <div className="area-hero__scrim"></div>
        <div className="area-hero__content">
         <div className="wrap" style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: "calc(92vh - 112px)" }}>
          <div className="area-hero__crumbs">
            <a onClick={() => onPage("home")}>Home</a>
            <span className="sep">/</span>
            <a onClick={() => onPage("home")}>{d.crumb}</a>
            <span className="sep">/</span>
            <span>{d.title1} {d.titleEm}</span>
          </div>
          <div className="area-hero__center">
            <span className="eyebrow on-ink"><span className="dot"></span>Area microsite · 01 / 06</span>
            <h1 className="display" style={{ marginTop: 20 }}>{d.title1} <em>{d.titleEm}</em></h1>
            <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn--accent" onClick={() => openLead("viewing", "Downtown Dubai")}>Book a viewing<Icon.arrowSm/></button>
              <button className="btn btn--ghost-light" onClick={() => openLead("brochure", "Downtown brochure")}>Download brochure</button>
              <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)" }}>
                <span className="wa-dot"></span>WhatsApp the Downtown desk
              </a>
            </div>
          </div>
          <div className="area-hero__cap">
            <span className="label">{d.cap.label}</span>
            {d.cap.text}
          </div>
         </div>
        </div>
      </section>

      {/* Area stats */}
      <section style={{ padding: "32px 0", background: "var(--paper)" }}>
        <div className="wrap">
          <div className="area-stats">
            {d.stats.map((s, i) => (
              <div className="area-stats__cell" key={i}>
                <span className="num">{s.num}</span>
                <span className="lbl">{s.lbl}</span>
                <span className="src">{s.src}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Editorial */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="wrap">
          <div className="editorial">
            <div className="editorial__h">{d.editorialH}</div>
            <div className="editorial__b">
              {d.editorial.map((p, i) => <p key={i} dangerouslySetInnerHTML={{ __html: p }} />)}
            </div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ padding: "0 0 96px", background: "var(--paper)" }}>
        <div className="wrap">
          <div className="gallery" style={{ gridAutoRows: "260px" }}>
            <div className="g1"><img src="media/lifestyle-living.webp" alt=""/></div>
            <div className="g2"><img src="media/interior-armchair-styled.webp" alt=""/></div>
            <div className="g3"><img src="media/lifestyle-interior.webp" alt=""/></div>
          </div>
        </div>
      </section>

      {/* Why invest */}
      <section className="section--lg section--paper2">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>Investor brief</span>
              <h2 className="h1">{d.investH} <em>{d.investEm}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">A working brief — six investor questions the Driven Downtown desk most often answers. Off-the-record figures available on request.</p>
            </div>
          </div>
          <div className="invest-grid" style={{ background: "var(--paper)" }}>
            {d.invest.map((c, i) => (
              <div className="invest-card" key={i}>
                <span className="num">{c.n}</span>
                <h4>{c.h}</h4>
                <p>{c.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured listings in this area */}
      <section className="section">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>On the market</span>
              <h2 className="h1">{d.featuredH} <em>{d.featuredEm}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">Live from the Property Finder feed — refreshed every 30 minutes. Click into any card for the live detail.</p>
            </div>
          </div>
          <div className="listings">
            {FIXTURE_LISTINGS.filter(L => L.area === "Downtown Dubai").slice(0,3).map(L => (
              <ListingCard key={L.ref} L={L} t={t} onClick={() => openLead("viewing", L.title)} />
            ))}
          </div>
          <div className="fixture-note">
            <span className="dot"></span>{t.search.fixture}
          </div>
        </div>
      </section>

      {/* Map block */}
      <section className="section--paper2 section">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>On the map</span>
              <h2 className="h1">Downtown <em>at a glance.</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">Five-minute walking radius from Burj Park. The coordinates below are placeholder — production renders the live MapTiler embed.</p>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "21/9", background: "var(--paper-3)", border: "1px solid var(--line)", overflow: "hidden" }}>
            <svg viewBox="0 0 2100 900" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(14,18,22,.08)" strokeWidth="1"/>
                </pattern>
                <pattern id="grid-big" width="200" height="200" patternUnits="userSpaceOnUse">
                  <path d="M 200 0 L 0 0 0 200" fill="none" stroke="rgba(14,18,22,.12)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="2100" height="900" fill="var(--paper-3)"/>
              <rect width="2100" height="900" fill="url(#grid)"/>
              <rect width="2100" height="900" fill="url(#grid-big)"/>
              {/* roads */}
              <path d="M0 600 Q500 500 1100 540 T2100 480" fill="none" stroke="rgba(14,18,22,.25)" strokeWidth="6"/>
              <path d="M900 0 L1050 900" fill="none" stroke="rgba(14,18,22,.18)" strokeWidth="4"/>
              <path d="M0 250 L2100 380" fill="none" stroke="rgba(14,18,22,.18)" strokeWidth="4"/>
              {/* park */}
              <ellipse cx="1280" cy="500" rx="240" ry="140" fill="rgba(176,141,79,.12)" stroke="rgba(176,141,79,.3)"/>
              {/* pins */}
              {[[1050,510,"Burj Khalifa"],[1320,460,"Dubai Mall"],[860,560,"Opera"],[1180,640,"Old Town"],[1500,420,"Boulevard"],[760,440,"Burj Park"]].map(([x,y,lbl], i) => (
                <g key={i} transform={`translate(${x} ${y})`}>
                  <circle r="10" fill="var(--accent)" stroke="var(--paper)" strokeWidth="3"/>
                  <text x="16" y="5" fontFamily="JetBrains Mono, monospace" fontSize="14" fill="var(--ink)">{lbl}</text>
                </g>
              ))}
              <text x="40" y="40" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="rgba(14,18,22,.5)" letterSpacing="2">DOWNTOWN DUBAI · APPROX. WALKING RADIUS · PLACEHOLDER MAP</text>
            </svg>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-band">
        <img className="cta-band__bg" src="media/hero-dubai-skyline.webp" alt=""/>
        <div className="cta-band__scrim"></div>
        <div className="wrap">
          <div className="cta-band__c">
            <div className="cta-band__title">
              <span className="eyebrow on-ink"><span className="dot"></span>Downtown desk</span>
              <h2 className="h1" style={{ marginTop: 16 }}>The broker who lists Downtown <em>lives in Downtown.</em></h2>
              <p className="lede" style={{ marginTop: 20, color: "rgba(255,255,255,.7)" }}>One name, one mobile number, one WhatsApp thread. The Driven Downtown team is run out of our Emaar Square HQ — five minutes from every listing on this page.</p>
            </div>
            <div className="cta-band__actions">
              <button className="btn btn--accent" onClick={() => openLead("viewing", "Downtown")}>Book a viewing<Icon.arrowSm/></button>
              <button className="btn btn--ghost-light" onClick={() => openLead("valuation", "Downtown")}>Free valuation<Icon.arrowSm/></button>
              <button className="btn btn--ghost-light" onClick={() => openLead("brochure", "Downtown brochure")}>Download brochure<Icon.arrowSm/></button>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================
   AGENT MICROSITE — Mohammed Abdulrahman
   ============================================================ */
function AgentPage({ t, onPage, openLead }) {
  const ag = AGENTS.find(a => a.slug === "mohammed-a");
  const a = t.agent;

  return (
    <React.Fragment>
      <section className="agent-hero">
        <div className="wrap">
          <div className="area-hero__crumbs" style={{ color: "var(--ink-mute)", marginBottom: 40 }}>
            <a onClick={() => onPage("home")} style={{ color: "var(--accent)" }}>Home</a>
            <span className="sep">/</span>
            <a onClick={() => onPage("home")} style={{ color: "var(--accent)" }}>{a.crumb}</a>
            <span className="sep">/</span>
            <span>{ag.name}</span>
          </div>
          <div className="agent-hero__grid">
            <div className="agent-hero__photo">
              <img src={ag.photo} alt={ag.name}/>
              <span className="tag">RERA-certified</span>
            </div>
            <div className="agent-hero__info">
              <span className="agent-hero__role">{a.role}</span>
              <h1 className="display">{ag.name}</h1>
              <p className="agent-hero__bio">{a.bio}</p>
              <dl className="agent-hero__facts">
                {a.facts.map((f, i) => (
                  <div key={i}>
                    <dt>{f.k}</dt>
                    <dd>{f.v}</dd>
                  </div>
                ))}
              </dl>
              <div className="agent-hero__cta">
                <button className="btn" onClick={() => openLead("talk", ag.name)}>{a.callMe}<Icon.arrowSm/></button>
                <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer">
                  <span className="wa-dot"></span>{a.whats}
                </a>
                <button className="btn btn--ghost" onClick={() => openLead("viewing", ag.name)}>{a.book}</button>
              </div>
              <div style={{ display: "flex", gap: 24, marginTop: 8, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", color: "var(--ink-mute)", textTransform: "uppercase" }}>
                <span>{ag.listings} live listings</span>
                <span>{ag.sales} closed (lifetime)</span>
                <span>Tap to view profile in CRM</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Live listings (filtered to area) */}
      <section className="section">
        <div className="wrap">
          <div className="s-head">
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>Live</span>
              <h2 className="h1">{a.listingsH} <em>{a.listingsEm}</em></h2>
            </div>
            <div className="s-head__right">
              <p className="lede">Pulled from Mohammed's portfolio in the Driven CRM, refreshed every 30 minutes. Cards link straight to the live detail page.</p>
            </div>
          </div>
          <div className="listings">
            {FIXTURE_LISTINGS.slice(0,3).map(L => <ListingCard key={L.ref} L={L} t={t} onClick={() => openLead("viewing", L.title + " · with " + ag.name)} />)}
          </div>
          <div className="fixture-note">
            <span className="dot"></span>{t.search.fixture}
          </div>
        </div>
      </section>

      {/* Other agents strip */}
      <section className="section--paper2 section--sm">
        <div className="wrap">
          <div className="s-head" style={{ marginBottom: 32 }}>
            <div className="s-head__left">
              <span className="eyebrow"><span className="dot"></span>Other brokers</span>
              <h2 className="h2">Or pick another <em>broker.</em></h2>
            </div>
            <div className="s-head__right"></div>
          </div>
          <div className="agents-grid">
            {AGENTS.filter(x => x.slug !== "mohammed-a").slice(0,8).map(x => (
              <div className="agent-card" key={x.slug} onClick={() => onPage("agent")}>
                <div className="agent-card__photo">
                  <img src={x.photo} alt=""/>
                  <div className="agent-card__lang">{x.langs.map(l => <span key={l}>{l}</span>)}</div>
                </div>
                <div className="agent-card__name">{x.name}</div>
                <div className="agent-card__role">{x.role}</div>
                <div className="agent-card__stats"><span>{x.listings} live</span><span>{x.sales}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-band">
        <img className="cta-band__bg" src="media/office-floor-cityview.webp" alt=""/>
        <div className="cta-band__scrim"></div>
        <div className="wrap">
          <div className="cta-band__c">
            <div className="cta-band__title">
              <span className="eyebrow on-ink"><span className="dot"></span>Start the conversation</span>
              <h2 className="h1" style={{ marginTop: 16 }}>Talk to {ag.name.split(" ")[0]} <em>directly.</em></h2>
              <p className="lede" style={{ marginTop: 20, color: "rgba(255,255,255,.7)" }}>No call-centre — your enquiry routes straight to the broker.</p>
            </div>
            <div className="cta-band__actions">
              <button className="btn btn--accent" onClick={() => openLead("talk", ag.name)}>Send a message<Icon.arrowSm/></button>
              <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)" }}>
                <span className="wa-dot"></span>WhatsApp the broker
              </a>
              <button className="btn btn--ghost-light" onClick={() => openLead("viewing", ag.name)}>Book a viewing<Icon.arrowSm/></button>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function ContactPage({ t, onPage, openLead }) {
  const c = t.contact;
  return (
    <React.Fragment>
      <section className="contact-hero">
        <div className="wrap">
          <span className="eyebrow on-ink"><span className="dot"></span>{c.eyebrow}</span>
          <h1 className="display" style={{ marginTop: 20 }}>{c.title} <em>{c.titleEm}</em></h1>
          <p className="lede">{c.lede}</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="contact-grid">
            <div>
              <div className="contact-channels">
                {c.channels.map((ch, i) => (
                  <div className="contact-channel" key={i}>
                    <span className="lbl">{ch.lbl}</span>
                    <span className="val">{ch.val}</span>
                    <span className="sub">{ch.sub}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 0, marginTop: 56 }}>
                <span className="eyebrow"><span className="dot"></span>{c.officesH}</span>
                <p className="lede" style={{ marginTop: 12 }}>{c.officesL}</p>
                <div className="offices" style={{ marginTop: 24 }}>
                  {OFFICES.map((o, i) => (
                    <div className="office" key={i}>
                      {o.hq ? <div className="office__hq">Headquarters · UAE</div> : null}
                      <div className="office__name">{o.name}</div>
                      <div className="office__addr">{o.addr.split("\n").map((l,j) => <div key={j}>{l}</div>)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ background: "var(--ink)", color: "var(--paper)", padding: 40 }}>
              <span className="eyebrow on-ink"><span className="dot"></span>Open a thread</span>
              <h3 className="h2" style={{ marginTop: 12, marginBottom: 16 }}>What would you like to do?</h3>
              <p className="lede" style={{ color: "rgba(255,255,255,.7)", marginBottom: 28 }}>Pick a channel and a broker replies — within one business day, faster on WhatsApp.</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  { k: "viewing",   l: "Book a viewing" },
                  { k: "valuation", l: "Request a free valuation" },
                  { k: "listProp",  l: "List your property" },
                  { k: "talk",      l: "Talk to a broker" },
                  { k: "brochure",  l: "Download the brochure" },
                ].map(b => (
                  <button key={b.k} className="btn btn--ghost-light" onClick={() => openLead(b.k)} style={{ justifyContent: "space-between", width: "100%" }}>
                    {b.l}<Icon.arrowSm/>
                  </button>
                ))}
                <a className="wa-chip" href={WA_URL} target="_blank" rel="noreferrer" style={{ background: "transparent", color: "#FBF9F4", borderColor: "rgba(255,255,255,.4)", justifyContent: "center", marginTop: 8 }}>
                  <span className="wa-dot"></span>Or open WhatsApp — wa.me/971800776655
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Banner */}
      <section style={{ position: "relative", height: 360, overflow: "hidden" }}>
        <img src="media/office-team-hero.webp" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(14,18,22,.85), rgba(14,18,22,.2))" }}></div>
        <div className="wrap" style={{ position: "relative", height: "100%", display: "flex", alignItems: "center", color: "var(--paper)" }}>
          <div style={{ maxWidth: "30ch" }}>
            <span className="eyebrow on-ink"><span className="dot"></span>The team</span>
            <h3 className="h2" style={{ marginTop: 12 }}>650+ professionals. <em>One conversation.</em></h3>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============================================================
   BUY / RENT — simple listings index (placeholder)
   ============================================================ */
function ListingsIndex({ t, mode, openLead }) {
  const title = mode === "rent" ? "Rentals" : "For sale";
  return (
    <React.Fragment>
      <section className="contact-hero">
        <div className="wrap">
          <span className="eyebrow on-ink"><span className="dot"></span>{title}</span>
          <h1 className="display" style={{ marginTop: 20 }}>Selected <em>{mode==="rent" ? "rentals." : "residences."}</em></h1>
          <p className="lede">A live cross-section, refreshed from the Property Finder feed. All cards link to the full detail page.</p>
        </div>
      </section>
      <section style={{ background: "var(--paper)" }}>
        <div className="wrap" style={{ padding: "32px 0" }}>
          <SearchBar t={t} />
        </div>
      </section>
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div className="listings">
            {FIXTURE_LISTINGS.map(L => <ListingCard key={L.ref} L={L} t={t} onClick={() => openLead("viewing", L.title)} />)}
          </div>
          <div className="fixture-note">
            <span className="dot"></span>{t.search.fixture}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { HomePage, AreaPage, AgentPage, ContactPage, ListingsIndex, ListingCard });