/* MAISON ALMA — secondary views */

const { useState: _useState } = React;

// ───────────────── DEVELOPMENT MICROSITE ─────────────────
function Development({ setRoute }) {
  return (
    <div className="page-fade">
      {/* hero */}
      <section className="dev-hero" style={{ backgroundImage: 'url(media/dev-pool.webp)' }} data-screen-label="Dev 01 Hero">
        <div className="inner">
          <div style={{ display: 'flex', justifyContent: 'space-between', color: 'rgba(244,241,235,0.7)' }}>
            <span className="label" style={{ color: 'inherit' }}>— Off-plan launch · Maison Alma Editions</span>
            <span className="label" style={{ color: 'inherit' }}>Q3 2027 · Handover</span>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <span className="label" style={{ color: 'rgba(244,241,235,0.7)', display: 'block', marginBottom: 28 }}>— Bluewaters Bay · Indicative renders</span>
            <h1>Omoria<br/><span style={{ fontStyle: 'italic' }}>Island Residences</span></h1>
            <p className="tag-line">Thirty-eight private homes on a single island. A pool that meets the Gulf at the eye-line. Pre-launch register, by enquiry.</p>
          </div>
          <div className="floor">
            <div className="factstrip">
              <div className="fact"><div className="v">38</div><div className="l">Residences</div></div>
              <div className="fact"><div className="v">3–5</div><div className="l">Bedrooms</div></div>
              <div className="fact"><div className="v">Q3 2027</div><div className="l">Handover</div></div>
              <div className="fact"><div className="v">POA</div><div className="l">From price</div></div>
            </div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <button className="btn-light">Register interest <span className="arrow">→</span></button>
              <button className="btn-light" style={{ background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(244,241,235,0.5)' }}>Download brochure</button>
            </div>
          </div>
        </div>
      </section>

      {/* intro */}
      <section className="section">
        <div className="container">
          <div className="grid-12">
            <div className="col-4">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— The proposition</span>
            </div>
            <div className="col-8">
              <p className="lead">
                A small archipelago of homes — terraces that open to the water, interiors finished in honed travertine and bleached oak, and a private clubhouse that closes the island.
              </p>
              <div style={{ marginTop: 56 }} className="tagrow">
                <span className="tg">Architecture · Foster Atelier ⁰</span>
                <span className="tg">Interiors · Studio Vincent</span>
                <span className="tg">Landscape · Gustafson Porter</span>
                <span className="tg">Private clubhouse</span>
                <span className="tg">Beach club</span>
                <span className="tg">Marina berths</span>
              </div>
              <p className="body" style={{ marginTop: 32, color: 'var(--muted)', fontSize: 12 }}>⁰ Renders are indicative · Subjects, credits, materials and finishes to be confirmed at handover.</p>
            </div>
          </div>
        </div>
      </section>

      {/* location & architecture split */}
      <section className="section dark">
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'center', rowGap: 56 }}>
            <div className="col-6">
              <div style={{ backgroundImage: 'url(media/dev-amenity.webp)', backgroundSize: 'cover', backgroundPosition: 'center', aspectRatio: '4/5' }} />
            </div>
            <div className="col-6" style={{ paddingLeft: 40 }}>
              <span className="label">— Location</span>
              <h2 className="display-2" style={{ marginTop: 18, color: 'var(--paper)' }}>An island,<br /><span className="italic-flex">eight minutes from Marina.</span></h2>
              <p className="body body-dark" style={{ marginTop: 28 }}>Bluewaters Bay sits at the western edge of the city — a private causeway, two restaurants by invitation, and a horizon that is, in the literal sense, uninterrupted. The site is a fifteen-minute drive from DIFC and the airport.</p>
              <div className="kpi-row" style={{ marginTop: 48 }}>
                <div className="kpi"><div className="v">8 min</div><div className="l">to Marina</div></div>
                <div className="kpi"><div className="v">15 min</div><div className="l">to DIFC</div></div>
                <div className="kpi"><div className="v">22 min</div><div className="l">to DXB</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* residences */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Residences</span>
              <h2 className="display-2">Three configurations.<br /><span className="italic-flex">No two are identical.</span></h2>
            </div>
          </div>
          <div className="grid-12" style={{ gap: 24 }}>
            {[
              { name: 'Garden Villa', beds: '3 bed', sqft: '5,200 sqft', tag: '8 of 38', img: 'media/villa-pool.webp' },
              { name: 'Sky Residence', beds: '4 bed', sqft: '6,800 sqft', tag: '24 of 38', img: 'media/listing-piano.webp' },
              { name: 'Island Penthouse', beds: '5 bed', sqft: '11,400 sqft', tag: '6 of 38', img: 'media/hero-penthouse.webp' },
            ].map(r => (
              <div key={r.name} className="col-4">
                <div style={{ aspectRatio: '4/5', backgroundImage: `url(${r.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                <div style={{ paddingTop: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', color: 'var(--accent)', textTransform: 'uppercase' }}>— {r.tag}</span>
                  <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, letterSpacing: '-0.01em' }}>{r.name}</h3>
                  <div style={{ display: 'flex', gap: 18, color: 'var(--muted)', fontSize: 14, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                    <span>{r.beds}</span><span>·</span><span>{r.sqft}</span><span style={{ marginLeft: 'auto', fontStyle: 'italic' }}>Price on application</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* register form */}
      <section className="section dark">
        <div className="container">
          <div className="grid-12" style={{ gap: 80 }}>
            <div className="col-5">
              <span className="label">— Pre-launch register</span>
              <h2 className="display-2" style={{ marginTop: 18, color: 'var(--paper)' }}>The first allocations<br /><span className="italic-flex">go to the register.</span></h2>
              <p className="body body-dark" style={{ marginTop: 28 }}>An advisor will be in touch within twenty-four hours with the priced brochure, a floorplan pack, and a private viewing of the model residence.</p>
              <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 14, color: 'rgba(244,241,235,0.78)', fontSize: 14 }}>
                <div style={{ display: 'flex', gap: 14 }}><span style={{ color: 'var(--accent-soft)' }}>—</span> Priced brochure · within 24h</div>
                <div style={{ display: 'flex', gap: 14 }}><span style={{ color: 'var(--accent-soft)' }}>—</span> Floorplan pack · all configurations</div>
                <div style={{ display: 'flex', gap: 14 }}><span style={{ color: 'var(--accent-soft)' }}>—</span> Private viewing · model residence</div>
              </div>
            </div>
            <div className="col-7">
              <RegisterForm />
            </div>
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

function RegisterForm() {
  const [sent, setSent] = _useState(false);
  const [unit, setUnit] = _useState('Sky Residence');
  if (sent) {
    return (
      <div className="success-msg">
        <span className="italic-flex">Thank you.</span> Your enquiry is in the hands of an advisor. We will be in touch shortly with the brochure pack and a proposed time for a private viewing.
      </div>
    );
  }
  return (
    <form className="form-grid" onSubmit={e => { e.preventDefault(); setSent(true); }}>
      <div className="field">
        <label>First name</label>
        <input required />
      </div>
      <div className="field">
        <label>Surname</label>
        <input required />
      </div>
      <div className="field">
        <label>Email</label>
        <input type="email" required />
      </div>
      <div className="field">
        <label>Phone (with country code)</label>
        <input required placeholder="+971…" />
      </div>
      <div className="field full">
        <label>Configuration of interest</label>
        <div className="opt-row">
          {['Garden Villa','Sky Residence','Island Penthouse','Undecided'].map(u => (
            <button type="button" key={u} className={`opt ${unit === u ? 'active' : ''}`} onClick={() => setUnit(u)}>{u}</button>
          ))}
        </div>
      </div>
      <div className="field full">
        <label>Notes (optional)</label>
        <textarea placeholder="Anything we should know — timing, preferred floor, current Dubai address…" />
      </div>
      <div className="full" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(244,241,235,0.5)' }}>
          We respond within 24 hours · Discreetly
        </span>
        <button type="submit" className="btn-light">Submit register <span className="arrow">→</span></button>
      </div>
    </form>
  );
}

// ───────────────── AREA GUIDE ─────────────────
function Area({ setRoute }) {
  return (
    <div className="page-fade">
      <section style={{ paddingTop: 160, paddingBottom: 80 }}>
        <div className="container">
          <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Area guide</span>
          <div className="grid-12" style={{ marginTop: 28, alignItems: 'end' }}>
            <div className="col-8">
              <h1 className="display-1" style={{ fontSize: 'clamp(56px, 7vw, 120px)' }}>Palm<br /><span className="italic-flex">Jumeirah.</span></h1>
            </div>
            <div className="col-4">
              <p className="body" style={{ fontSize: 16, lineHeight: 1.7 }}>
                A man-made archipelago that has, in twenty years, become the city's most quietly traded prime address. We have 142 active mandates here and a private register of homes that never list.
              </p>
            </div>
          </div>
        </div>
      </section>

      <div className="container" style={{ marginBottom: 0 }}>
        <div style={{ height: '60vh', minHeight: 460, backgroundImage: 'url(media/area-palm.webp)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
      </div>

      <section className="section-tight">
        <div className="container">
          <div className="kpi-row">
            <div className="kpi"><div className="v">142</div><div className="l">Active mandates</div></div>
            <div className="kpi"><div className="v">2009</div><div className="l">First mandate</div></div>
            <div className="kpi"><div className="v">31%</div><div className="l">Of our Dubai book</div></div>
            <div className="kpi"><div className="v">€8.2M</div><div className="l">Median trade ⁰</div></div>
          </div>
          <p className="body" style={{ marginTop: 18, color: 'var(--muted)', fontSize: 12 }}>⁰ Sample figures · production data is sourced from completed transactions in the live feed.</p>
        </div>
      </section>

      {/* lifestyle editorial */}
      <section className="section">
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'start', gap: 56 }}>
            <div className="col-5">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Lifestyle</span>
              <h2 className="display-2" style={{ marginTop: 18 }}>A frond,<br /><span className="italic-flex">a beach, a private gate.</span></h2>
            </div>
            <div className="col-7">
              <p className="lead">The Palm rewards a particular kind of resident. Sixteen fronds, each a small village, each closed off by a single road and a single sea.</p>
              <p className="body" style={{ marginTop: 28 }}>
                Buyers come for the beach, the boats, the relative quiet — three signature hotels, two private clubs, and a register of trophy villas that almost never come to market. Listings here change hands quickly and privately; an advisor relationship matters more than a portal.
              </p>
              <div className="tagrow" style={{ marginTop: 32 }}>
                <span className="tg">16 fronds · Private beaches</span>
                <span className="tg">3 signature hotels</span>
                <span className="tg">Two private clubs</span>
                <span className="tg">Frequent record sales</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* listings */}
      <section className="section dark">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="label">— Available · Sample feed</span>
              <h2 className="display-2" style={{ color: 'var(--paper)' }}>Current Palm mandates</h2>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', color: 'var(--muted-dark)' }}>
              <span className="label label-dark">Filter</span>
              <div className="row-gap-lg" style={{ gap: 8 }}>
                {['All', 'Villa', 'Penthouse', 'Apartment'].map((t, i) => (
                  <button key={t} className="opt" style={{ borderColor: 'rgba(244,241,235,0.25)', color: 'var(--paper)', background: i === 0 ? 'var(--paper)' : 'transparent', ...(i === 0 ? { color: 'var(--noir)' } : {}) }}>{t}</button>
                ))}
              </div>
            </div>
          </div>
          <div className="grid-12">
            {FEATURED_LISTINGS.map(l => (
              <div key={l.ref} className="col-6">
                <PropCard listing={l} onClick={() => setRoute('listing')} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* book viewing */}
      <section className="section">
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'center', gap: 64 }}>
            <div className="col-5">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Book a private viewing</span>
              <h2 className="display-2" style={{ marginTop: 18 }}>Walk a few<br /><span className="italic-flex">in one afternoon.</span></h2>
              <p className="body" style={{ marginTop: 24 }}>An advisor will assemble a shortlist from current mandates and the private register — three to five homes, by car, in a half-day.</p>
            </div>
            <div className="col-7">
              <ViewingForm />
            </div>
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

function ViewingForm() {
  const [sent, setSent] = _useState(false);
  const [date, setDate] = _useState('This weekend');
  if (sent) return <div className="success-msg"><span className="italic-flex">Booked.</span> An advisor will confirm a time and a shortlist of homes within a few hours.</div>;
  return (
    <form className="form-grid" onSubmit={e => { e.preventDefault(); setSent(true); }}>
      <div className="field"><label>Name</label><input required /></div>
      <div className="field"><label>Phone</label><input required /></div>
      <div className="field"><label>Email</label><input type="email" required /></div>
      <div className="field"><label>Budget (AED)</label>
        <select defaultValue="">
          <option value="">— Select</option>
          <option>30M – 60M</option>
          <option>60M – 120M</option>
          <option>120M+</option>
          <option>Open</option>
        </select>
      </div>
      <div className="field full">
        <label>Preferred date</label>
        <div className="opt-row">
          {['This weekend','Next week','This month','Flexible'].map(d => (
            <button type="button" key={d} className={`opt ${date === d ? 'active' : ''}`} onClick={() => setDate(d)}>{d}</button>
          ))}
        </div>
      </div>
      <div className="field full"><label>Notes</label><textarea placeholder="Briefly: lifestyle, must-haves, do-without…" /></div>
      <div className="full"><button type="submit" className="btn-primary">Book a viewing <span className="arrow">→</span></button></div>
    </form>
  );
}

// ───────────────── SIGNATURE LISTING (PDP) ─────────────────
function Listing({ setRoute }) {
  const [tab, setTab] = _useState('overview');
  return (
    <div className="page-fade">
      <section className="pdp-hero" style={{ backgroundImage: 'url(media/listing-piano.webp)' }} data-screen-label="PDP 01 Hero">
        <div className="label-overlay">
          <div className="ref">ALM-2607 · Maison Alma Signature · Palm Jumeirah</div>
          <h1>The Penthouse<br /><span style={{ fontStyle: 'italic', fontWeight: 300 }}>at Frond G.</span></h1>
          <div className="area">— Half-floor · West & East · Skyline and sea</div>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="pdp-specs">
            <div className="pdp-spec"><div className="v">5</div><div className="l">Bedrooms</div></div>
            <div className="pdp-spec"><div className="v">6</div><div className="l">Bathrooms</div></div>
            <div className="pdp-spec"><div className="v">9,420</div><div className="l">Sqft interior</div></div>
            <div className="pdp-spec"><div className="v"><span className="italic-flex">POA</span></div><div className="l">Price on application</div></div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="grid-12" style={{ gap: 64 }}>
            <div className="col-8">
              <div style={{ display: 'flex', gap: 28, borderBottom: '1px solid var(--line)', paddingBottom: 16, marginBottom: 40 }}>
                {['overview','features','floorplan','location'].map(t => (
                  <button key={t} onClick={() => setTab(t)} style={{
                    background: 'transparent', border: 0, padding: '6px 0',
                    fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                    cursor: 'pointer', color: tab === t ? 'var(--ink)' : 'var(--muted)',
                    borderBottom: tab === t ? '1px solid var(--ink)' : '1px solid transparent',
                    marginBottom: -17, paddingBottom: 17, fontWeight: 500,
                  }}>{t}</button>
                ))}
              </div>
              {tab === 'overview' && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                  <p className="lead">An unobstructed half-floor on one of the Palm's most private fronds — corner views west to the Marina, east to the city.</p>
                  <p className="body">Interiors by Studio Vincent: honed travertine throughout, an open-plan kitchen by Boffi, and a primary suite with a private terrace and plunge pool. The residence trades as a turn-key sale with all furniture, the existing art programme, and a deeded berth at the Palm marina.</p>
                  <p className="body">Currently held by the original owner. Sale is by private appointment only — viewings are pre-vetted and accompanied by a Maison Alma advisor.</p>
                </div>
              )}
              {tab === 'features' && (
                <div className="grid-12" style={{ gap: 18 }}>
                  {[
                    'Half-floor · 9,420 sqft','Corner aspect · East & West','Private terrace · 1,180 sqft',
                    'Plunge pool · primary suite','Kitchen · Boffi','Bathrooms · honed travertine',
                    'Cinema room','Staff quarters · 2 rooms','Smart home · Crestron',
                    'Deeded berth · Palm marina','Furniture · turn-key','24-hour security'
                  ].map(f => <div key={f} className="col-6" style={{ paddingLeft: 24, position: 'relative', fontSize: 15, lineHeight: 1.7 }}>
                    <span style={{ position: 'absolute', left: 0, top: 12, width: 12, height: 1, background: 'var(--accent)' }} />{f}
                  </div>)}
                </div>
              )}
              {tab === 'floorplan' && (
                <div style={{ aspectRatio: '4/3', background: 'var(--stone)', display: 'grid', placeItems: 'center', color: 'var(--muted)', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.16em' }}>
                  — Floorplan available on request
                </div>
              )}
              {tab === 'location' && (
                <div style={{ aspectRatio: '5/3', backgroundImage: 'url(media/area-palm.webp)', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(13,14,16,0.1), rgba(13,14,16,0.5))' }} />
                  <div style={{ position: 'absolute', bottom: 24, left: 24, color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }}>— Frond G · Palm Jumeirah</div>
                </div>
              )}

              {/* gallery */}
              <div className="pdp-gallery" style={{ marginTop: 56 }}>
                <div className="lg" style={{ backgroundImage: 'url(media/listing-piano.webp)' }} />
                <div className="sm" style={{ backgroundImage: 'url(media/hero-marina.webp)' }} />
                <div className="sm" style={{ backgroundImage: 'url(media/dev-pool.webp)' }} />
              </div>
            </div>
            <div className="col-4">
              <div className="advisor">
                <div className="top">
                  <div className="ava">A</div>
                  <div>
                    <div className="nm">Amira Saleh</div>
                    <div className="ti">Senior Advisor · Palm Practice</div>
                  </div>
                </div>
                <div className="ln">
                  <div><strong>Languages</strong> EN · AR · FR</div>
                  <div><strong>RERA BRN</strong> 00000 (TBC)</div>
                  <div><strong>With the House</strong> Since 2014</div>
                </div>
                <div className="ctas">
                  <button className="btn-primary" onClick={() => setRoute('valuation')}>Book a private viewing <span className="arrow">→</span></button>
                  <button className="btn-ghost">Message on WhatsApp <span>→</span></button>
                  <button className="btn-ghost">Request price disclosure <span>→</span></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* similar */}
      <section className="section dark">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="label">— You may also consider</span>
              <h2 className="display-2" style={{ color: 'var(--paper)' }}>Other signature mandates</h2>
            </div>
          </div>
          <div className="grid-12">
            {FEATURED_LISTINGS.slice(1, 4).map(l => (
              <div key={l.ref} className="col-4"><PropCard listing={l} onClick={() => window.scrollTo({top: 0})} /></div>
            ))}
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

// ───────────────── VALUATION / LIST WITH US ─────────────────
function Valuation({ setRoute }) {
  const [mode, setMode] = _useState('valuation');
  const [sent, setSent] = _useState(false);
  const [propType, setPropType] = _useState('Apartment');
  const [purpose, setPurpose] = _useState('Sell');

  return (
    <div className="page-fade">
      <section style={{ paddingTop: 140 }}>
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'end' }}>
            <div className="col-7">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— For sellers & landlords</span>
              <h1 className="display-1" style={{ marginTop: 28, fontSize: 'clamp(56px, 6.5vw, 110px)' }}>A considered<br /><span className="italic-flex">valuation,</span> never<br />a generated number.</h1>
            </div>
            <div className="col-5">
              <p className="lead">An advisor will walk your home, read its market, and come back with a price you can act on — and a route to the right buyer, openly listed or held on the private register.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div style={{ height: '50vh', minHeight: 380, backgroundImage: 'url(media/about-list.webp)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="grid-12" style={{ gap: 80 }}>
            <div className="col-5">
              <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--line)', marginBottom: 40 }}>
                {[['valuation', 'Valuation'], ['list', 'List with us']].map(([id, lbl]) => (
                  <button key={id} onClick={() => { setMode(id); setSent(false); }} style={{
                    background: 'transparent', border: 0,
                    padding: '14px 0', marginRight: 40,
                    fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500,
                    color: mode === id ? 'var(--ink)' : 'var(--muted)',
                    borderBottom: mode === id ? '2px solid var(--accent)' : '2px solid transparent',
                    marginBottom: -1, cursor: 'pointer',
                  }}>{lbl}</button>
                ))}
              </div>
              <h2 className="display-2" style={{ fontSize: 'clamp(32px, 3.4vw, 52px)' }}>
                {mode === 'valuation' ? (<><span>How it works</span></>) : (<><span>Working with us</span></>)}
              </h2>
              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
                {(mode === 'valuation' ? [
                  ['01', 'Brief', 'Tell us about the home — community, configuration, condition.'],
                  ['02', 'Visit', 'An advisor walks the property within 72 hours, discreetly.'],
                  ['03', 'Figure', 'A considered range, comparables, and a recommended strategy.'],
                  ['04', 'Path', 'Open market listing, the private register, or a single approach.'],
                ] : [
                  ['01', 'Mandate', 'Sole or co-agency. We work narrow by design.'],
                  ['02', 'Marketing', 'Editorial copy, architectural photography, film if warranted.'],
                  ['03', 'Audience', 'A private register first; open market second.'],
                  ['04', 'Close', 'A single advisor, your single point of contact, end-to-end.'],
                ]).map(([n, t, d]) => (
                  <div key={n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 22, alignItems: 'baseline', paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
                    <span className="serif" style={{ fontSize: 36, fontWeight: 300, color: 'var(--accent)' }}>{n}</span>
                    <div>
                      <h4 className="serif" style={{ fontSize: 22, fontWeight: 400 }}>{t}</h4>
                      <p style={{ fontSize: 14, color: 'var(--muted)', marginTop: 6 }}>{d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="col-7">
              {sent ? (
                <div className="success-msg">
                  <span className="italic-flex">In good hands.</span> An advisor for your community has been notified and will be in touch within twenty-four hours.
                </div>
              ) : (
                <form className="form-grid" onSubmit={e => { e.preventDefault(); setSent(true); }}>
                  <div className="field"><label>Name</label><input required /></div>
                  <div className="field"><label>Phone</label><input required /></div>
                  <div className="field"><label>Email</label><input type="email" required /></div>
                  <div className="field"><label>Community</label><input required placeholder="Palm Jumeirah, Emirates Hills…" /></div>
                  <div className="field full">
                    <label>Property type</label>
                    <div className="opt-row">
                      {['Apartment','Villa','Mansion','Penthouse','Plot'].map(t => (
                        <button type="button" key={t} className={`opt ${propType === t ? 'active' : ''}`} onClick={() => setPropType(t)}>{t}</button>
                      ))}
                    </div>
                  </div>
                  <div className="field"><label>Bedrooms</label>
                    <select defaultValue=""><option value="">—</option>{[1,2,3,4,5,6,'7+'].map(n => <option key={n}>{n}</option>)}</select>
                  </div>
                  <div className="field"><label>Approx. size (sqft)</label><input /></div>
                  <div className="field full">
                    <label>Purpose</label>
                    <div className="opt-row">
                      {['Sell','Let','Just curious'].map(p => (
                        <button type="button" key={p} className={`opt ${purpose === p ? 'active' : ''}`} onClick={() => setPurpose(p)}>{p}</button>
                      ))}
                    </div>
                  </div>
                  <div className="field full"><label>Notes</label><textarea placeholder="Anything we should know — recent renovations, target timeline, current advisor…" /></div>
                  <div className="full" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
                    <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
                      Confidential · An advisor responds within 24h
                    </span>
                    <button type="submit" className="btn-primary">{mode === 'valuation' ? 'Request a valuation' : 'Begin a mandate'} <span className="arrow">→</span></button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

// ───────────────── JOURNAL ─────────────────
function Journal({ setRoute }) {
  const all = [...JOURNAL, ...JOURNAL_MORE];
  return (
    <div className="page-fade">
      <section style={{ paddingTop: 160, paddingBottom: 56 }}>
        <div className="container">
          <span className="eyebrow" style={{ color: 'var(--accent)' }}>— The Journal</span>
          <div className="grid-12" style={{ alignItems: 'end', marginTop: 28 }}>
            <div className="col-8">
              <h1 className="display-1" style={{ fontSize: 'clamp(56px, 6.5vw, 110px)' }}>
                What we know,<br /><span className="italic-flex">written down.</span>
              </h1>
            </div>
            <div className="col-4">
              <p className="body">A long-running editorial practice — market reports, neighbourhood studies, and the architectural notes our advisors keep on the city.</p>
            </div>
          </div>
        </div>
      </section>

      {/* featured */}
      <section className="section-tight" style={{ paddingTop: 24 }}>
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'center', gap: 56 }}>
            <div className="col-7">
              <div style={{ aspectRatio: '5/3', backgroundImage: `url(${all[0].img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            </div>
            <div className="col-5">
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', textTransform: 'uppercase' }}>— Cover story · {all[0].cat}</span>
              <h2 className="display-2" style={{ marginTop: 18, fontSize: 'clamp(36px, 4vw, 56px)' }}>{all[0].title}</h2>
              <p className="body" style={{ marginTop: 24 }}>
                A study of the city's prime market across the past five quarters — supply, absorption, where the median has settled, and what we expect of the off-plan pipeline through 2027.
              </p>
              <button className="btn-primary" style={{ marginTop: 32 }}>Download the report (gated) <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <hr className="divider-rule" style={{ marginBottom: 56 }} />
          <div className="sec-head">
            <div className="lhs">
              <span className="label">— Recent</span>
              <h2 className="display-2" style={{ fontSize: 'clamp(32px, 3.4vw, 48px)' }}>Latest dispatches</h2>
            </div>
            <div className="row-gap-lg" style={{ gap: 8 }}>
              {['All','Market','Neighbourhood','Architecture','Investment'].map((t, i) => (
                <button key={t} className="opt" style={{
                  background: i === 0 ? 'var(--ink)' : 'transparent',
                  color: i === 0 ? 'var(--paper)' : 'var(--ink)',
                  borderColor: i === 0 ? 'var(--ink)' : 'var(--line-dark)',
                }}>{t}</button>
              ))}
            </div>
          </div>
          <div className="journal-grid">
            {all.slice(1).map((j, i) => (
              <div key={i} className="journal-card">
                <div className="img" style={{ backgroundImage: `url(${j.img})` }} />
                <div className="cat">— {j.cat}</div>
                <h4>{j.title}</h4>
                <div className="read">{j.read}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

// ───────────────── ABOUT ─────────────────
function About({ setRoute }) {
  return (
    <div className="page-fade">
      <section style={{ paddingTop: 140, paddingBottom: 56 }}>
        <div className="container">
          <span className="eyebrow" style={{ color: 'var(--accent)' }}>— The House</span>
          <h1 className="display-1" style={{ marginTop: 28, fontSize: 'clamp(56px, 6.5vw, 120px)' }}>
            A small house<br />
            of advisors,<br />
            <span className="italic-flex">since 2009.</span>
          </h1>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ height: '70vh', minHeight: 480, backgroundImage: 'url(media/about-hero.webp)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid-12" style={{ gap: 56 }}>
            <div className="col-5">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Practice</span>
              <h2 className="display-2" style={{ marginTop: 18 }}>Narrow,<br /><span className="italic-flex">on purpose.</span></h2>
            </div>
            <div className="col-7">
              <p className="lead">Maison Alma was founded in 2009 to do one thing well — represent Dubai's most considered residences, openly listed or otherwise. We have thirty-four advisors, twelve communities, and a single point of contact for every mandate.</p>
              <p className="body" style={{ marginTop: 28 }}>
                The house is led by its founding partners and operates as a single practice — not a network of franchises. Our work is editorial: long-form market reports, architectural photography, and films that take the time a building actually deserves.
              </p>
              <div className="kpi-row" style={{ marginTop: 56 }}>
                <div className="kpi"><div className="v">2009</div><div className="l">Established</div></div>
                <div className="kpi"><div className="v">34</div><div className="l">Advisors</div></div>
                <div className="kpi"><div className="v">12</div><div className="l">Communities</div></div>
                <div className="kpi"><div className="v">438</div><div className="l">Mandates</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="container">
          <span className="label">— Milestones</span>
          <h2 className="display-2" style={{ color: 'var(--paper)', marginTop: 18, marginBottom: 56 }}>A short history.</h2>
          <div className="timeline">
            {[
              { yr: '2009', title: 'Founded in Dubai', body: 'The house opens with a single advisor and a single mandate on Emirates Hills.' },
              { yr: '2015', title: 'The Journal begins', body: 'A long-form editorial practice — market reports and neighbourhood studies — is set in motion.' },
              { yr: '2023', title: 'Private register', body: 'A discreet, by-invitation register of off-market homes opens to the house\u2019s introduced clients.' },
            ].map(m => (
              <div key={m.yr} className="timeline-item">
                <span className="yr">{m.yr}</span>
                <h4>{m.title}</h4>
                <p>{m.body}</p>
              </div>
            ))}
          </div>
          <div className="grid-12" style={{ marginTop: 80, gap: 24 }}>
            {['media/about-timeline-1.webp','media/about-timeline-2.webp','media/about-timeline-3.webp'].map((src, i) => (
              <div key={i} className="col-4" style={{ aspectRatio: '4/5', backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid-12" style={{ alignItems: 'center', gap: 56 }}>
            <div className="col-6">
              <div className="bigquote">
                "We try to leave a home in the kind of hands that suit it.
                <span className="cite">— Founding Partner · Maison Alma</span>
              </div>
            </div>
            <div className="col-6">
              <div style={{ aspectRatio: '5/4', backgroundImage: 'url(media/brand-section.webp)', backgroundSize: 'cover', backgroundPosition: 'center' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="container">
          <div className="grid-12" style={{ gap: 56, alignItems: 'center' }}>
            <div className="col-6">
              <h2 className="display-2" style={{ color: 'var(--paper)' }}>Speak to<br/><span className="italic-flex">an advisor.</span></h2>
              <p className="body body-dark" style={{ marginTop: 24, fontSize: 17 }}>An introduction is the easiest beginning. Tell us a little, and the right advisor will be in touch — privately, by phone or by WhatsApp.</p>
            </div>
            <div className="col-6">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <button className="btn-light" onClick={() => setRoute('valuation')}>Speak with an advisor <span className="arrow">→</span></button>
                <button className="btn-light" style={{ background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(244,241,235,0.4)' }} onClick={() => setRoute('valuation')}>Book a private viewing</button>
                <button className="btn-light" style={{ background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(244,241,235,0.4)' }}>Message on WhatsApp</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { Development, Area, Listing, Valuation, Journal, About, RegisterForm, ViewingForm });
