/* MAISON ALMA — main app
   Original brand. Fictional ultra-prime Dubai brokerage.
   Sample listings clearly labelled. No real prices/addresses. */

const { useState, useEffect, useRef, useMemo } = React;

// ───────────────── data ─────────────────
const ROUTES = ['home', 'development', 'area', 'listing', 'valuation', 'journal', 'about'];

const HERO_IMAGES = [
  { src: 'media/hero-marina.webp', ref: 'PALM HARBOUR · 04', loc: 'Palm Jumeirah' },
  { src: 'media/hero-penthouse.webp', ref: 'DOWNTOWN VIEWS · 11', loc: 'Downtown Dubai' },
  { src: 'media/dev-pool.webp', ref: 'OMORIA RESIDENCES · 02', loc: 'Bluewaters Bay' },
];

const FEATURED_LISTINGS = [
  {
    ref: 'ALM-2607',
    title: 'Penthouse with Sky Terrace',
    area: 'Palm Jumeirah',
    type: 'sale',
    beds: 5, baths: 6, sqft: 9420,
    price: 'Price on application',
    img: 'media/listing-piano.webp',
    tag: 'Signature',
  },
  {
    ref: 'ALM-2611',
    title: 'Beachfront Mansion',
    area: 'Emirates Hills',
    type: 'sale',
    beds: 7, baths: 9, sqft: 18200,
    price: 'Price on application',
    img: 'media/villa-pool.webp',
    tag: 'Mansion',
  },
  {
    ref: 'ALM-2614',
    title: 'Marina Apartment',
    area: 'Dubai Harbour',
    type: 'sale',
    beds: 3, baths: 4, sqft: 3680,
    price: 'Price on application',
    img: 'media/hero-marina.webp',
    tag: 'New',
  },
  {
    ref: 'ALM-2619',
    title: 'Coastal Residence',
    area: 'Jumeirah Bay Island',
    type: 'sale',
    beds: 4, baths: 5, sqft: 6200,
    price: 'Price on application',
    img: 'media/dev-pool.webp',
    tag: 'Off-plan',
  },
];

const AREAS = [
  { name: 'Palm Jumeirah', count: 142, img: 'media/area-palm.webp' },
  { name: 'Emirates Hills', count: 38, img: 'media/villa-pool.webp' },
  { name: 'DIFC & Zabeel', count: 86, img: 'media/area-difc.webp' },
  { name: 'Dubai Harbour', count: 64, img: 'media/hero-marina.webp' },
  { name: 'Jumeirah Bay Island', count: 21, img: 'media/journal-beach.webp' },
  { name: 'Downtown Dubai', count: 117, img: 'media/journal-skyline.webp' },
];

const JOURNAL = [
  { cat: 'Market Insight', title: 'Dubai\u2019s prime market enters a mature phase', img: 'media/journal-skyline.webp', read: '8 min read' },
  { cat: 'Neighbourhood', title: 'Inside the next chapter of the Palm', img: 'media/journal-penthouses.webp', read: '6 min read' },
  { cat: 'Investment', title: 'The 2026 off-plan playbook', img: 'media/journal-offplan.webp', read: '11 min read' },
];

const JOURNAL_MORE = [
  { cat: 'Architecture', title: 'A masterpiece in the sky: Wedyan', img: 'media/journal-wedyan.webp', read: '7 min read' },
  { cat: 'Coastal', title: 'Beachfront communities to watch', img: 'media/journal-beach.webp', read: '5 min read' },
  { cat: 'Policy', title: 'The investor visa, explained', img: 'media/journal-investor.webp', read: '4 min read' },
  { cat: 'International', title: 'Marbella meets the Gulf', img: 'media/journal-coast.webp', read: '6 min read' },
  { cat: 'Design', title: 'The new architectural language of Dubai', img: 'media/journal-masterpiece.webp', read: '9 min read' },
  { cat: 'Lifestyle', title: 'Reading a city from its terraces', img: 'media/hero-penthouse.webp', read: '5 min read' },
];

// ───────────────── nav + shell ─────────────────
function Nav({ route, setRoute, tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [locale, setLocale] = useState('EN');
  const dark = route === 'home' || route === 'development' || route === 'listing';

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'home', label: 'Buy' },
    { id: 'area', label: 'Areas' },
    { id: 'development', label: 'Off-plan' },
    { id: 'listing', label: 'Signature' },
    { id: 'journal', label: 'Journal' },
    { id: 'valuation', label: 'Sell' },
    { id: 'about', label: 'House' },
  ];

  return (
    <nav className={`nav ${dark ? 'dark' : 'light'} ${scrolled ? 'scrolled' : ''}`}>
      <div className="brand" onClick={() => setRoute('home')}>
        <span className="brand-mark">Maison Alma</span>
        <span className="brand-sub">Dubai · Prime Residential</span>
      </div>
      <div className="nav-links">
        {links.map(l => (
          <button key={l.id} className={route === l.id ? 'active' : ''} onClick={() => setRoute(l.id)}>{l.label}</button>
        ))}
      </div>
      <div className="nav-right">
        <div className="locale">
          {['EN', 'AR', 'RU', 'ZH'].map(l => (
            <button key={l} className={locale === l ? 'active' : ''} onClick={() => setLocale(l)}>{l}</button>
          ))}
        </div>
        <button className="nav-cta" onClick={() => setRoute('valuation')}>Book a viewing</button>
      </div>
    </nav>
  );
}

// ───────────────── home ─────────────────
function Home({ setRoute }) {
  const [idx, setIdx] = useState(0);
  const [searchTab, setSearchTab] = useState('buy');

  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % HERO_IMAGES.length), 6500);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="page-fade">
      {/* Hero */}
      <section className="hero" data-screen-label="01 Home Hero">
        {HERO_IMAGES.map((img, i) => (
          <div key={i} className={`hero-img ${idx === i ? 'active' : ''}`} style={{ backgroundImage: `url(${img.src})` }} />
        ))}
        <div className="hero-content">
          <div className="hero-meta">
            <span className="label">{HERO_IMAGES[idx].ref}</span>
            <span className="label">Dubai · 24°C · Clear</span>
          </div>
          <div className="hero-headline">
            <span className="label" style={{ color: 'rgba(244,241,235,0.7)', display: 'block', marginBottom: 32 }}>— A House of Prime Residential, Est. Dubai</span>
            <h1 className="display-1">
              Quiet listings.<br />
              <span style={{ fontStyle: 'italic', opacity: 0.92 }}>Significant homes.</span>
            </h1>
            <p className="sub">A small house of advisors representing Dubai's most considered residences — from the Palm to the Hills, from off-plan launches to one-of-one penthouses.</p>
          </div>
          <div className="hero-bottom">
            <div className="hero-stat">
              <span className="n">2009</span>
              <span className="l">Established</span>
            </div>
            <div className="hero-stat">
              <span className="n">438</span>
              <span className="l">Current mandates</span>
            </div>
            <div className="hero-stat">
              <span className="n">12</span>
              <span className="l">Prime communities</span>
            </div>
            <div className="hero-stat" style={{ display: 'none' }}>
              <span className="n">EN</span>
              <span className="l">AR · RU · ZH</span>
            </div>
            <div className="hero-scroll">
              Scroll
              <svg width="10" height="14" viewBox="0 0 10 14" fill="none"><path d="M5 1v12M1 9l4 4 4-4" stroke="currentColor" strokeWidth="1"/></svg>
            </div>
          </div>
        </div>
        <div className="hero-img-switcher">
          {HERO_IMAGES.map((_, i) => (
            <button key={i} className={idx === i ? 'active' : ''} onClick={() => setIdx(i)} aria-label={`Hero ${i+1}`} />
          ))}
        </div>
      </section>

      {/* Search bar */}
      <div className="container">
        <SearchBar tab={searchTab} setTab={setSearchTab} />
      </div>

      {/* Featured listings */}
      <section className="section" data-screen-label="02 Featured listings">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Current mandates</span>
              <h2 className="display-2">A considered selection,<br /><span className="italic-flex">refreshed each week.</span></h2>
              <p className="body" style={{ marginTop: 8 }}>Sample listings shown — production data is fed live from the listings feed. Pricing is held until a private viewing.</p>
            </div>
            <button className="btn-ghost" onClick={() => setRoute('listing')}>View signature page <span>→</span></button>
          </div>
          <div className="grid-12">
            {FEATURED_LISTINGS.map((l, i) => (
              <div key={l.ref} className={i < 2 ? 'col-6' : 'col-6'}>
                <PropCard listing={l} onClick={() => setRoute('listing')} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Areas grid */}
      <section className="section-tight" data-screen-label="03 Areas">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— Prime communities</span>
              <h2 className="display-2">Twelve postcodes,<br /><span className="italic-flex">one practice.</span></h2>
            </div>
            <button className="btn-ghost" onClick={() => setRoute('area')}>Open area guide <span>→</span></button>
          </div>
        </div>
        <div className="container" style={{ paddingLeft: 0, paddingRight: 0 }}>
          <div className="area-grid">
            {AREAS.map(a => (
              <div key={a.name} className="area-tile" onClick={() => setRoute('area')}>
                <div className="bg" style={{ backgroundImage: `url(${a.img})` }} />
                <div className="label-wrap">
                  <div className="nm">{a.name}</div>
                  <div className="ct">
                    <span className="l">Active mandates</span>
                    <span className="n">{a.count}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Dark editorial — proposition */}
      <section className="section dark" data-screen-label="04 Proposition">
        <div className="container">
          <div className="grid-12">
            <div className="col-5">
              <span className="label">— The House</span>
              <h2 className="display-2" style={{ marginTop: 24, color: 'var(--paper)' }}>
                We don't advertise<br/>every home.<br/>
                <span className="italic-flex" style={{ color: 'var(--paper)' }}>We represent a few, well.</span>
              </h2>
            </div>
            <div className="col-1" />
            <div className="col-6" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
              <p className="body body-dark" style={{ fontSize: 17, lineHeight: 1.65 }}>
                Maison Alma was founded as a small house of prime-residential advisors. Our mandate is narrow by design — Dubai's twelve most considered communities, the launches that matter, and a private register of homes that never reach the open market.
              </p>
              <hr className="divider-rule dark" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <div>
                  <span className="label">Founded</span>
                  <div className="serif" style={{ fontSize: 32, marginTop: 10, fontWeight: 300 }}>2009</div>
                </div>
                <div>
                  <span className="label">Practice</span>
                  <div className="serif" style={{ fontSize: 32, marginTop: 10, fontWeight: 300 }}>Dubai</div>
                </div>
                <div>
                  <span className="label">Advisors</span>
                  <div className="serif" style={{ fontSize: 32, marginTop: 10, fontWeight: 300 }}>34</div>
                </div>
                <div>
                  <span className="label">Languages</span>
                  <div className="serif" style={{ fontSize: 32, marginTop: 10, fontWeight: 300 }}>EN · AR · RU · ZH</div>
                </div>
              </div>
              <hr className="divider-rule dark" />
              <button className="btn-light" style={{ alignSelf: 'flex-start' }} onClick={() => setRoute('about')}>About the house <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </section>

      {/* Journal teaser */}
      <section className="section" data-screen-label="05 Journal teaser">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— The Journal</span>
              <h2 className="display-2">Market intelligence,<br /><span className="italic-flex">written by people who live here.</span></h2>
            </div>
            <button className="btn-ghost" onClick={() => setRoute('journal')}>Read The Journal <span>→</span></button>
          </div>
          <div className="journal-grid">
            {JOURNAL.map((j, i) => (
              <div key={i} className="journal-card" onClick={() => setRoute('journal')}>
                <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>

      {/* Valuation block */}
      <section className="section-tight" data-screen-label="06 Valuation block">
        <div className="container">
          <div className="editorial">
            <div className="editorial-img" style={{ backgroundImage: 'url(media/about-list.webp)' }} />
            <div className="editorial-text">
              <span className="eyebrow" style={{ color: 'var(--accent)' }}>— For sellers & landlords</span>
              <h2 className="display-2">Thinking of letting<br />a quiet home find its quiet buyer?</h2>
              <p className="body">A private valuation is the start of a conversation, not an algorithm. We send an advisor to walk the property — and we come back with a considered figure, not a generated one.</p>
              <div className="row-gap-lg">
                <button className="btn-primary" onClick={() => setRoute('valuation')}>Request a valuation <span className="arrow">→</span></button>
                <button className="btn-ghost" onClick={() => setRoute('valuation')}>List with us <span>→</span></button>
              </div>
            </div>
          </div>
        </div>
      </section>

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

// ───────────────── search bar ─────────────────
function SearchBar({ tab, setTab }) {
  return (
    <div className="search">
      <div className="search-tabs">
        {['buy', 'rent', 'off-plan'].map(t => (
          <button key={t} className={tab === t ? 'active' : ''} onClick={() => setTab(t)}>{t}</button>
        ))}
      </div>
      <div className="search-field">
        <label>Area</label>
        <input placeholder="Palm Jumeirah, Emirates Hills…" defaultValue="" />
      </div>
      <div className="search-field">
        <label>Bedrooms</label>
        <select defaultValue="">
          <option value="">Any</option>
          <option>2+</option><option>3+</option><option>4+</option><option>5+</option><option>6+</option>
        </select>
      </div>
      <div className="search-field">
        <label>Price (AED)</label>
        <select defaultValue="">
          <option value="">Any</option>
          <option>15M+</option><option>30M+</option><option>50M+</option><option>100M+</option>
        </select>
      </div>
      <button className="search-go">Search →</button>
    </div>
  );
}

// ───────────────── property card ─────────────────
function PropCard({ listing, onClick }) {
  return (
    <div className="prop-card" onClick={onClick}>
      <div className="img-wrap">
        <img src={listing.img} alt={listing.title} />
        <span className="tag">{listing.tag}</span>
      </div>
      <div className="meta-row">
        <div>
          <span className="area">— {listing.area}</span>
          <h3 style={{ marginTop: 6 }}>{listing.title}</h3>
        </div>
        <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.16em', color: 'var(--muted)' }}>{listing.ref}</span>
      </div>
      <div className="specs">
        <span><strong>{listing.beds}</strong> bed</span>
        <span><strong>{listing.baths}</strong> bath</span>
        <span><strong>{listing.sqft.toLocaleString()}</strong> sqft</span>
        <span style={{ marginLeft: 'auto' }} className="poa">{listing.price}</span>
      </div>
    </div>
  );
}

// ───────────────── footer ─────────────────
function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="grid-12" style={{ marginBottom: 64 }}>
          <div className="col-4 footer-brand">
            <div className="brand-mark serif">Maison Alma</div>
            <span className="brand-sub mono">Dubai · Prime Residential · Est. 2009</span>
            <p style={{ marginTop: 28, maxWidth: '36ch', fontSize: 14, color: 'rgba(244,241,235,0.7)', lineHeight: 1.7 }}>
              A small house of advisors representing Dubai's most considered residences. Sample design — listings would be fed live from the brokerage feed.
            </p>
          </div>
          <div className="col-2 footer-col">
            <h5>Practice</h5>
            <ul>
              <li><a onClick={() => setRoute('home')}>Buy</a></li>
              <li><a onClick={() => setRoute('home')}>Rent</a></li>
              <li><a onClick={() => setRoute('development')}>Off-plan</a></li>
              <li><a onClick={() => setRoute('listing')}>Signature</a></li>
              <li><a onClick={() => setRoute('valuation')}>Sell · Let</a></li>
            </ul>
          </div>
          <div className="col-2 footer-col">
            <h5>Areas</h5>
            <ul>
              {AREAS.slice(0,6).map(a => <li key={a.name}><a onClick={() => setRoute('area')}>{a.name}</a></li>)}
            </ul>
          </div>
          <div className="col-2 footer-col">
            <h5>House</h5>
            <ul>
              <li><a onClick={() => setRoute('about')}>About</a></li>
              <li><a onClick={() => setRoute('journal')}>The Journal</a></li>
              <li><a>Advisors</a></li>
              <li><a>Press</a></li>
              <li><a>Careers</a></li>
            </ul>
          </div>
          <div className="col-2 footer-col">
            <h5>Contact</h5>
            <ul>
              <li><a>+971 4 000 0000</a></li>
              <li><a>house@maisonalma.ae</a></li>
              <li><a>WhatsApp</a></li>
              <li><a>Office, Sheikh Zayed Rd</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Maison Alma. Fictional brand · design demo only.</span>
          <span>EN · AR · RU · ZH</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Home, Footer, PropCard, SearchBar, ROUTES, HERO_IMAGES, FEATURED_LISTINGS, AREAS, JOURNAL, JOURNAL_MORE });