const { useState, useEffect, useRef, useMemo, useCallback } = React;
const { DEVELOPMENTS, PARTNERS, AGENT, RESIDENCES, AMENITIES, FAQS, I18N } = window.WW_DATA;

const LOCALES = [
  { code: "en", label: "EN", name: "English",  dir: "ltr" },
  { code: "ru", label: "RU", name: "Русский",  dir: "ltr" },
  { code: "ar", label: "AR", name: "العربية",  dir: "rtl" },
  { code: "zh", label: "ZH", name: "中文",     dir: "ltr" },
];

// ----- Minor visual atoms ---------------------------------------------------
function Logo({ inverted }) {
  // The captured logo SVG is the live primary mark — referenced via <img>.
  // On dark hero we render as inverted via filter; in editorial mode unfiltered.
  return (
    <a href="#top" className="ww-logo" aria-label="Whitewill — home">
      <img src="media/logo-whitewill.svg" alt="Whitewill" style={{
        filter: inverted ? "invert(1) brightness(2)" : "none",
      }}/>
      <span className="ww-logo-word" style={{ color: inverted ? "var(--paper)" : "var(--ink)" }}>
        Whitewill
        <em>Dubai</em>
      </span>
    </a>
  );
}

function IconWA({size=16}) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.38 5.06L2 22l5.05-1.34A9.95 9.95 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2Zm5.16 14.06c-.22.61-1.28 1.17-1.77 1.24-.45.06-1.02.09-1.65-.1-.38-.12-.87-.28-1.5-.55-2.65-1.14-4.37-3.81-4.5-3.98-.13-.18-1.08-1.44-1.08-2.75 0-1.3.68-1.94.92-2.21.24-.27.53-.34.71-.34l.5.01c.16.01.38-.06.59.45.22.55.74 1.9.81 2.04.07.13.11.29.02.47-.09.18-.13.29-.27.45-.13.16-.28.36-.4.48-.13.13-.27.28-.12.55.15.27.66 1.09 1.42 1.77 1.07.95 1.87 1.18 2.14 1.31.27.13.43.11.59-.06.16-.18.68-.79.86-1.06.18-.27.36-.22.61-.13.25.09 1.6.75 1.87.89.27.13.45.2.52.31.07.11.07.63-.15 1.25Z" fill="currentColor"/>
    </svg>
  );
}
function IconTG({size=16}) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm4.56 7.06-1.52 7.18c-.11.5-.42.62-.85.39l-2.35-1.73-1.13 1.09c-.12.13-.23.23-.47.23l.17-2.4 4.36-3.94c.19-.17-.04-.27-.3-.1l-5.39 3.4-2.32-.73c-.5-.16-.51-.5.11-.74l9.08-3.5c.42-.16.79.1.66.85Z" fill="currentColor"/>
    </svg>
  );
}
function IconArrow({size=14, rotate=0}) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{transform:`rotate(${rotate}deg)`, transition:"transform .2s"}} aria-hidden="true">
      <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function IconClose({size=18}) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

// ----- Top utility bar ------------------------------------------------------
function TopBar({ t, locale, setLocale }) {
  return (
    <div className="ww-topbar">
      <div className="ww-topbar-inner">
        <div className="ww-topbar-left">
          <span className="ww-pill ww-pill-mute">{t.sample_pill}</span>
        </div>
        <div className="ww-topbar-right">
          <a href="tel:+97145814595" className="ww-topbar-link">+971 (4) 581 4595</a>
          <span className="ww-topbar-sep" aria-hidden="true">·</span>
          <a href="#" className="ww-topbar-link" onClick={(e)=>e.preventDefault()}><IconWA/> WhatsApp</a>
          <a href="#" className="ww-topbar-link" onClick={(e)=>e.preventDefault()}><IconTG/> Telegram</a>
          <span className="ww-topbar-sep" aria-hidden="true">·</span>
          <div className="ww-lang" role="tablist" aria-label="Language">
            {LOCALES.map(l => (
              <button
                key={l.code}
                role="tab"
                aria-selected={locale === l.code}
                className={"ww-lang-btn" + (locale === l.code ? " is-on" : "")}
                onClick={() => setLocale(l.code)}
                title={l.name}
              >{l.label}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ----- Main navigation ------------------------------------------------------
function Nav({ t, scrolled, onBook, currentDev, devsList, setCurrentDev, inverted }) {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <header className={"ww-nav " + (scrolled ? "is-scrolled" : "") + (inverted ? " is-inverted" : "")}>
      <div className="ww-nav-inner">
        <Logo inverted={inverted && !scrolled}/>
        <nav className="ww-nav-links" aria-label="Primary">
          <button className="ww-nav-link ww-nav-dropdown" onClick={() => setOpenMenu(m => !m)}>
            {t.nav_developments}
            <IconArrow size={11} rotate={openMenu ? 90 : 0}/>
            {openMenu && (
              <div className="ww-mega">
                <div className="ww-mega-grid">
                  {devsList.map(d => (
                    <button
                      key={d.id}
                      className={"ww-mega-item" + (d.id === currentDev.id ? " is-on" : "")}
                      onClick={(e) => { e.stopPropagation(); setCurrentDev(d.id); setOpenMenu(false); }}
                    >
                      <span className="ww-mega-thumb" style={{backgroundImage:`url(${d.hero})`}}/>
                      <span className="ww-mega-meta">
                        <span className="ww-mega-name">{d.name}</span>
                        <span className="ww-mega-comm">{d.community}</span>
                      </span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </button>
          <a href="#" className="ww-nav-link" onClick={(e)=>e.preventDefault()}>{t.nav_areas}</a>
          <a href="#" className="ww-nav-link" onClick={(e)=>e.preventDefault()}>{t.nav_experts}</a>
          <a href="#" className="ww-nav-link" onClick={(e)=>e.preventDefault()}>{t.nav_brochures}</a>
          <a href="#" className="ww-nav-link" onClick={(e)=>e.preventDefault()}>{t.nav_about}</a>
        </nav>
        <div className="ww-nav-cta">
          <a href="tel:+97145814595" className="ww-nav-phone">+971 (4) 581 4595</a>
          <button className="ww-btn ww-btn-primary" onClick={onBook}>{t.cta_book}</button>
        </div>
      </div>
    </header>
  );
}

// ----- Hero -----------------------------------------------------------------
function Hero({ t, dev, locale, mode, accent, onBook, onBrochure }) {
  const name = locale === "ru" ? dev.nameRu : locale === "ar" ? dev.nameAr : locale === "zh" ? dev.name : dev.name;
  const community = locale === "ru" ? dev.communityRu : locale === "ar" ? dev.communityAr : dev.community;
  const tagline = locale === "ru" ? dev.taglineRu : locale === "ar" ? dev.taglineAr : dev.tagline;
  return (
    <section className={"ww-hero " + (mode === "light" ? "is-light" : "is-dark")} id="top">
      <div className="ww-hero-media">
        <img src={dev.hero} alt="" />
        <div className="ww-hero-scrim" aria-hidden="true"/>
      </div>
      <div className="ww-hero-inner">
        <div className="ww-hero-eyebrow">
          <span className="ww-hero-dot" style={{background: "var(--accent)"}}/>
          {t.eyebrow_offplan} · {community}
        </div>
        <h1 className="ww-hero-title">{name}</h1>
        <p className="ww-hero-tagline">{tagline}</p>
        <p className="ww-hero-intro">{dev.intro}</p>
        <div className="ww-hero-ctas">
          <button className="ww-btn ww-btn-primary ww-btn-lg" onClick={onBook}>{t.cta_register}</button>
          <button className="ww-btn ww-btn-ghost ww-btn-lg" onClick={onBrochure}>{t.cta_brochure}</button>
          <a href="#" className="ww-hero-side" onClick={(e)=>e.preventDefault()}><IconWA size={14}/> {t.cta_whatsapp}</a>
          <a href="#" className="ww-hero-side" onClick={(e)=>e.preventDefault()}><IconTG size={14}/> {t.cta_telegram}</a>
        </div>
      </div>
      <a href="#facts" className="ww-hero-scroll" aria-label="Scroll">
        <span/>
      </a>
    </section>
  );
}

// ----- Facts strip ----------------------------------------------------------
function FactsStrip({ t, dev, locale }) {
  const community = locale === "ru" ? dev.communityRu : locale === "ar" ? dev.communityAr : dev.community;
  const status = locale === "ru" ? dev.statusRu : locale === "ar" ? dev.statusAr : dev.status;
  const rows = [
    { label: t.label_status, value: status },
    { label: t.label_handover, value: dev.handover },
    { label: t.label_community, value: community },
    { label: t.label_dept, value: t.label_dept_value },
    { label: t.label_ref, value: dev.code },
  ];
  return (
    <section className="ww-facts" id="facts">
      <div className="ww-wrap">
        <div className="ww-facts-grid">
          {rows.map((r,i) => (
            <div className="ww-fact" key={i}>
              <div className="ww-fact-l">{r.label}</div>
              <div className="ww-fact-v">{r.value}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- Location -------------------------------------------------------------
function LocationSection({ t, dev, locale }) {
  const community = locale === "ru" ? dev.communityRu : locale === "ar" ? dev.communityAr : dev.community;
  const bullets = [
    ["Drive · DXB", "12 min — confirmed at launch"],
    ["Drive · DIFC", "14 min — confirmed at launch"],
    ["Walk · Beach", "8 min — confirmed at launch"],
    ["Walk · Metro", "5 min — confirmed at launch"],
  ];
  return (
    <section className="ww-loc" id="location">
      <div className="ww-wrap ww-two-col">
        <div className="ww-col-text">
          <div className="ww-section-eyebrow">02 / 07</div>
          <h2 className="ww-h2">{t.h_location}</h2>
          <h3 className="ww-place">{community} · Dubai</h3>
          <p className="ww-body">{t.location_body}</p>
          <div className="ww-loc-grid">
            {bullets.map(([l,v],i) => (
              <div className="ww-loc-row" key={i}>
                <span className="ww-loc-l">{l}</span>
                <span className="ww-loc-v">{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="ww-col-map">
          {/* Placeholder map — production wires lazy iframe with confirmed coords */}
          <div className="ww-map" role="img" aria-label="Map placeholder">
            <div className="ww-map-grid" aria-hidden="true"/>
            <div className="ww-map-pin">
              <div className="ww-map-pin-dot" style={{background:"var(--accent)"}}/>
              <div className="ww-map-pin-ring"/>
            </div>
            <div className="ww-map-cap">
              <span className="ww-map-coords">25.0700° N · 55.1400° E</span>
              <span className="ww-map-note">Coordinates confirmed at launch</span>
            </div>
            <div className="ww-map-roads" aria-hidden="true">
              <span/><span/><span/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- Architecture --------------------------------------------------------
function ArchitectureSection({ t, dev }) {
  return (
    <section className="ww-arch" id="architecture">
      <div className="ww-arch-media">
        <img src={dev.architecture} alt=""/>
      </div>
      <div className="ww-wrap ww-arch-text">
        <div className="ww-section-eyebrow">03 / 07</div>
        <h2 className="ww-h2 ww-h2-light">{t.h_arch}</h2>
        <p className="ww-body ww-body-light">{t.arch_body}</p>
        <div className="ww-arch-credits">
          <div><span>Architecture</span> Studio — confirmed at launch</div>
          <div><span>Interiors</span> Studio — confirmed at launch</div>
          <div><span>Landscape</span> Studio — confirmed at launch</div>
        </div>
      </div>
    </section>
  );
}

// ----- Residences (tabs) ----------------------------------------------------
function ResidencesSection({ t, locale }) {
  const [active, setActive] = useState(RESIDENCES[1].id);
  const r = RESIDENCES.find(x => x.id === active);
  const title = locale === "ru" ? r.titleRu : locale === "ar" ? r.titleAr : r.title;
  const range = locale === "ru" ? r.rangeRu : locale === "ar" ? r.rangeAr : r.range;
  const notes = locale === "ru" ? r.notesRu : locale === "ar" ? r.notesAr : r.notes;
  return (
    <section className="ww-res" id="residences">
      <div className="ww-wrap">
        <div className="ww-section-eyebrow">04 / 07</div>
        <h2 className="ww-h2">{t.h_residences}</h2>
        <div className="ww-res-tabs" role="tablist">
          {RESIDENCES.map(rr => {
            const lab = locale === "ru" ? rr.titleRu : locale === "ar" ? rr.titleAr : rr.title;
            return (
              <button
                key={rr.id}
                role="tab"
                aria-selected={rr.id === active}
                className={"ww-res-tab " + (rr.id === active ? "is-on" : "")}
                onClick={() => setActive(rr.id)}
              >{lab}</button>
            );
          })}
        </div>
        <div className="ww-res-grid">
          <div className="ww-res-plan">
            <FloorPlanPlaceholder type={active}/>
            <div className="ww-res-plan-cap">Indicative plan — replaced at launch with the developer's official drawings.</div>
          </div>
          <div className="ww-res-info">
            <div className="ww-res-title">{title}</div>
            <div className="ww-res-range">{range}</div>
            <ul className="ww-res-notes">
              {notes.map((n,i) => <li key={i}>{n}</li>)}
            </ul>
            <div className="ww-res-actions">
              <button className="ww-btn ww-btn-primary">{t.cta_selection}</button>
              <button className="ww-btn ww-btn-ghost">{t.cta_brochure}</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FloorPlanPlaceholder({ type }) {
  // Schematic line drawing — placeholder for developer-supplied floor plans.
  const plans = {
    "1br": [
      { x: 10, y: 10, w: 50, h: 38, label: "LIVING" },
      { x: 62, y: 10, w: 28, h: 22, label: "KITCH." },
      { x: 62, y: 34, w: 28, h: 14, label: "WC" },
      { x: 10, y: 50, w: 40, h: 38, label: "BED" },
      { x: 52, y: 50, w: 22, h: 18, label: "BATH" },
      { x: 76, y: 50, w: 14, h: 38, label: "WIR" },
    ],
    "2br": [
      { x: 10, y: 10, w: 60, h: 32, label: "LIVING" },
      { x: 72, y: 10, w: 18, h: 32, label: "KITCH." },
      { x: 10, y: 44, w: 30, h: 32, label: "BED 1" },
      { x: 42, y: 44, w: 18, h: 16, label: "WC" },
      { x: 42, y: 62, w: 18, h: 14, label: "STORE" },
      { x: 62, y: 44, w: 28, h: 32, label: "BED 2" },
      { x: 10, y: 78, w: 80, h: 10, label: "BALCONY" },
    ],
    "3br": [
      { x: 10, y: 10, w: 38, h: 28, label: "LIVING" },
      { x: 50, y: 10, w: 24, h: 28, label: "DINE" },
      { x: 76, y: 10, w: 14, h: 28, label: "KITCH." },
      { x: 10, y: 40, w: 26, h: 26, label: "BED 1" },
      { x: 38, y: 40, w: 18, h: 12, label: "WC" },
      { x: 38, y: 54, w: 18, h: 12, label: "WC" },
      { x: 58, y: 40, w: 16, h: 26, label: "BED 2" },
      { x: 76, y: 40, w: 14, h: 26, label: "BED 3" },
      { x: 10, y: 68, w: 80, h: 20, label: "TERRACE" },
    ],
    "ph": [
      { x: 10, y: 10, w: 80, h: 28, label: "GREAT ROOM" },
      { x: 10, y: 40, w: 22, h: 26, label: "STUDY" },
      { x: 34, y: 40, w: 20, h: 26, label: "KITCH." },
      { x: 56, y: 40, w: 20, h: 26, label: "DINE" },
      { x: 78, y: 40, w: 12, h: 26, label: "WC" },
      { x: 10, y: 68, w: 26, h: 20, label: "MASTER" },
      { x: 38, y: 68, w: 22, h: 20, label: "BED 2" },
      { x: 62, y: 68, w: 28, h: 20, label: "ROOFTOP" },
    ],
  };
  const set = plans[type] || plans["2br"];
  return (
    <svg className="ww-floorplan" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <rect x="0.5" y="0.5" width="99" height="99" fill="none" stroke="var(--line)" strokeWidth="0.4"/>
      {set.map((r,i) => (
        <g key={i}>
          <rect x={r.x} y={r.y} width={r.w} height={r.h} fill="none" stroke="var(--ink)" strokeWidth="0.4"/>
          <text x={r.x + r.w/2} y={r.y + r.h/2} dominantBaseline="middle" textAnchor="middle"
                fontFamily="ui-monospace, Menlo, monospace" fontSize="2.4" fill="var(--muted)" letterSpacing="0.4">{r.label}</text>
        </g>
      ))}
      {/* North arrow */}
      <g transform="translate(92,92)">
        <circle cx="0" cy="0" r="4" fill="none" stroke="var(--ink)" strokeWidth="0.3"/>
        <path d="M0,-3 L1.6,2 L0,1 L-1.6,2 Z" fill="var(--ink)"/>
        <text x="0" y="-5" textAnchor="middle" fontSize="2.2" fontFamily="ui-monospace" fill="var(--muted)">N</text>
      </g>
    </svg>
  );
}

// ----- Amenities ------------------------------------------------------------
function AmenitiesSection({ t, dev, locale }) {
  return (
    <section className="ww-amen" id="amenities">
      <div className="ww-amen-bleed">
        <img src={dev.amenitiesImage} alt=""/>
      </div>
      <div className="ww-wrap">
        <div className="ww-section-eyebrow">05 / 07</div>
        <h2 className="ww-h2 ww-h2-light">{t.h_amenities}</h2>
        <p className="ww-body ww-body-light ww-amen-intro">{t.amenities_body}</p>
        <ul className="ww-amen-grid">
          {AMENITIES.map((a,i) => {
            const label = locale === "ru" ? a.ru : locale === "ar" ? a.ar : a.en;
            return (
              <li key={i} className="ww-amen-item">
                <span className="ww-amen-num">{String(i+1).padStart(2,"0")}</span>
                <span className="ww-amen-text">{label}</span>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

// ----- Gallery + lightbox ---------------------------------------------------
function GallerySection({ t, dev }) {
  const [open, setOpen] = useState(-1);
  const close = () => setOpen(-1);
  const prev = () => setOpen(i => (i - 1 + dev.gallery.length) % dev.gallery.length);
  const next = () => setOpen(i => (i + 1) % dev.gallery.length);
  useEffect(() => {
    if (open < 0) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  return (
    <section className="ww-gal" id="gallery">
      <div className="ww-wrap">
        <div className="ww-section-eyebrow">06 / 07</div>
        <h2 className="ww-h2">{t.h_gallery}</h2>
        <div className="ww-gal-grid">
          {dev.gallery.map((src,i) => (
            <button
              key={i}
              className={"ww-gal-tile ww-gal-tile-" + i}
              onClick={() => setOpen(i)}
              aria-label={"Open gallery image " + (i+1)}
            >
              <img src={src} alt="" loading="lazy"/>
            </button>
          ))}
        </div>
        <div className="ww-gal-cap">{t.gallery_caption}</div>
      </div>
      {open >= 0 && (
        <div className="ww-lightbox" onClick={close} role="dialog" aria-modal="true">
          <button className="ww-lb-close" onClick={(e)=>{e.stopPropagation();close();}} aria-label="Close"><IconClose/></button>
          <button className="ww-lb-nav ww-lb-prev" onClick={(e)=>{e.stopPropagation();prev();}} aria-label="Previous"><IconArrow rotate={180} size={20}/></button>
          <button className="ww-lb-nav ww-lb-next" onClick={(e)=>{e.stopPropagation();next();}} aria-label="Next"><IconArrow size={20}/></button>
          <div className="ww-lb-stage" onClick={(e)=>e.stopPropagation()}>
            <img src={dev.gallery[open]} alt=""/>
            <div className="ww-lb-counter">{String(open+1).padStart(2,"0")} / {String(dev.gallery.length).padStart(2,"0")}</div>
          </div>
        </div>
      )}
    </section>
  );
}

// ----- Agent ----------------------------------------------------------------
function AgentSection({ t, locale, onBook }) {
  const role = locale === "ru" ? AGENT.roleRu : locale === "ar" ? AGENT.roleAr : AGENT.role;
  return (
    <section className="ww-agent" id="agent">
      <div className="ww-wrap ww-two-col ww-agent-grid">
        <div className="ww-agent-photo">
          <img src={AGENT.photo} alt=""/>
        </div>
        <div className="ww-agent-text">
          <div className="ww-section-eyebrow">07 / 07</div>
          <h2 className="ww-h2">{t.h_agent}</h2>
          <div className="ww-agent-name">{AGENT.name}</div>
          <div className="ww-agent-role">{role}</div>
          <div className="ww-agent-meta">
            <div><span>{t.label_languages}</span>{AGENT.languages}</div>
            <div><span>RERA BRN</span>{AGENT.brn}</div>
          </div>
          <p className="ww-body">
            Your single point of contact for this launch — selection, reservation, payment plan, DLD registration and post-handover. Replies on WhatsApp within the hour during Dubai working hours.
          </p>
          <div className="ww-agent-ctas">
            <button className="ww-btn ww-btn-primary" onClick={onBook}>{t.cta_book}</button>
            <a href="#" className="ww-btn ww-btn-ghost" onClick={(e)=>e.preventDefault()}><IconWA size={14}/> {t.cta_whatsapp}</a>
            <a href="#" className="ww-btn ww-btn-ghost" onClick={(e)=>e.preventDefault()}><IconTG size={14}/> {t.cta_telegram}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- Brochure gate (inline) ----------------------------------------------
function BrochureSection({ t, dev, locale }) {
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="ww-broch" id="brochure">
      <div className="ww-wrap ww-two-col ww-broch-grid">
        <div>
          <div className="ww-section-eyebrow">Brochure</div>
          <h2 className="ww-h2 ww-h2-light">{t.h_brochure}</h2>
          <p className="ww-body ww-body-light">{t.brochure_body}</p>
          <ul className="ww-broch-bullets">
            <li>Floor plans · {RESIDENCES.length} typologies</li>
            <li>Specification schedule</li>
            <li>Payment plan</li>
            <li>Site plan & community context</li>
            <li>Architect & studio credits</li>
          </ul>
        </div>
        <form className="ww-form ww-broch-form" onSubmit={submit}>
          {!sent ? (
            <React.Fragment>
              <div className="ww-form-row">
                <label>{t.brochure_name}<input required type="text" name="name"/></label>
              </div>
              <div className="ww-form-row">
                <label>{t.brochure_email}<input required type="email" name="email"/></label>
              </div>
              <div className="ww-form-row">
                <label>{t.brochure_phone}<input type="tel" name="phone"/></label>
              </div>
              <div className="ww-form-row">
                <label>{t.brochure_locale}
                  <select defaultValue={locale} name="locale">
                    <option value="en">English</option>
                    <option value="ru">Русский</option>
                    <option value="ar">العربية</option>
                    <option value="zh">中文</option>
                  </select>
                </label>
              </div>
              <input type="text" name="_gotcha" className="ww-honey" tabIndex="-1" autoComplete="off"/>
              <button type="submit" className="ww-btn ww-btn-primary ww-btn-lg ww-btn-block">
                {t.brochure_send} <IconArrow/>
              </button>
              <div className="ww-form-foot">
                Your details go to a Whitewill consultant only. We never share data outside the brokerage.
              </div>
            </React.Fragment>
          ) : (
            <div className="ww-form-sent">
              <div className="ww-form-tick">✓</div>
              <div className="ww-form-sent-body">{t.brochure_sent}</div>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

// ----- Book a viewing modal -------------------------------------------------
function BookModal({ t, dev, locale, open, onClose }) {
  const [sent, setSent] = useState(false);
  useEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);
  if (!open) return null;
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <div className="ww-modal" onMouseDown={onClose} role="dialog" aria-modal="true">
      <div className="ww-modal-card" onMouseDown={(e)=>e.stopPropagation()}>
        <button className="ww-modal-close" onClick={onClose} aria-label="Close"><IconClose/></button>
        <div className="ww-modal-grid">
          <aside className="ww-modal-side">
            <img src={dev.hero} alt=""/>
            <div className="ww-modal-side-meta">
              <div className="ww-modal-side-eyebrow">{t.eyebrow_offplan}</div>
              <div className="ww-modal-side-name">{dev.name}</div>
              <div className="ww-modal-side-comm">{dev.community} · Dubai</div>
              <div className="ww-modal-side-ref">{t.label_ref} {dev.code}</div>
            </div>
          </aside>
          <div className="ww-modal-body">
            <h3 className="ww-modal-title">{t.h_book}</h3>
            <p className="ww-modal-sub">{t.book_body}</p>
            {!sent ? (
              <form className="ww-form" onSubmit={submit}>
                <div className="ww-form-row">
                  <label>{t.book_name}<input required type="text"/></label>
                </div>
                <div className="ww-form-cols">
                  <label>{t.book_phone}<input required type="tel"/></label>
                  <label>{t.book_email}<input required type="email"/></label>
                </div>
                <div className="ww-form-cols">
                  <label>{t.book_date}<input type="date"/></label>
                  <label>{t.book_time}<input type="time" defaultValue="14:00"/></label>
                </div>
                <div className="ww-form-row">
                  <label>{t.book_message}<textarea rows={3}/></label>
                </div>
                <input type="text" className="ww-honey" tabIndex="-1" autoComplete="off"/>
                <button type="submit" className="ww-btn ww-btn-primary ww-btn-lg ww-btn-block">{t.book_submit}</button>
                <div className="ww-modal-or">
                  <span>or message us directly</span>
                </div>
                <div className="ww-modal-deeplinks">
                  <a href="#" onClick={(e)=>e.preventDefault()} className="ww-btn ww-btn-ghost ww-btn-block"><IconWA/> {t.cta_whatsapp}</a>
                  <a href="#" onClick={(e)=>e.preventDefault()} className="ww-btn ww-btn-ghost ww-btn-block"><IconTG/> {t.cta_telegram}</a>
                </div>
              </form>
            ) : (
              <div className="ww-form-sent ww-form-sent-lg">
                <div className="ww-form-tick">✓</div>
                <div className="ww-form-sent-body">{t.book_sent}</div>
                <button className="ww-btn ww-btn-ghost" onClick={onClose}>Close</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// ----- Other developments ---------------------------------------------------
function OtherDevelopments({ t, devsList, currentDev, setCurrentDev, locale }) {
  const others = devsList.filter(d => d.id !== currentDev.id);
  return (
    <section className="ww-other" id="more">
      <div className="ww-wrap">
        <h2 className="ww-h2">{t.h_developments}</h2>
        <div className="ww-other-grid">
          {others.map(d => {
            const nm = locale === "ru" ? d.nameRu : locale === "ar" ? d.nameAr : d.name;
            const cm = locale === "ru" ? d.communityRu : locale === "ar" ? d.communityAr : d.community;
            return (
              <button key={d.id} className="ww-other-card" onClick={() => { setCurrentDev(d.id); window.scrollTo({top:0,behavior:"smooth"}); }}>
                <div className="ww-other-media"><img src={d.hero} alt="" loading="lazy"/></div>
                <div className="ww-other-meta">
                  <div className="ww-other-eyebrow">{t.eyebrow_offplan}</div>
                  <div className="ww-other-name">{nm}</div>
                  <div className="ww-other-comm">{cm}</div>
                  <div className="ww-other-view">{t.other_view} <IconArrow/></div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ----- FAQs -----------------------------------------------------------------
function FAQSection({ t, locale }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="ww-faq">
      <div className="ww-wrap">
        <h2 className="ww-h2">{t.h_faq}</h2>
        <div className="ww-faq-list">
          {FAQS.map((f,i) => {
            const q = locale === "ru" ? f.qRu : locale === "ar" ? f.qAr : f.q;
            const a = locale === "ru" ? f.aRu : locale === "ar" ? f.aAr : f.a;
            const isOpen = open === i;
            return (
              <div key={i} className={"ww-faq-item " + (isOpen ? "is-open" : "")}>
                <button className="ww-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{q}</span>
                  <IconArrow rotate={isOpen ? 90 : 0}/>
                </button>
                {isOpen && <div className="ww-faq-a"><p>{a}</p></div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ----- Partners -------------------------------------------------------------
function PartnersStrip({ t }) {
  return (
    <section className="ww-partners">
      <div className="ww-wrap">
        <div className="ww-partners-label">{t.h_partners}</div>
        <div className="ww-partners-row">
          {PARTNERS.map(p => (
            <div key={p.name} className="ww-partner">
              <img src={p.src} alt={p.name}/>
            </div>
          ))}
        </div>
        <div className="ww-partners-disclaimer">{t.partners_disclaimer}</div>
      </div>
    </section>
  );
}

// ----- Footer ---------------------------------------------------------------
function Footer({ t }) {
  return (
    <footer className="ww-foot">
      <div className="ww-wrap">
        <div className="ww-foot-top">
          <div className="ww-foot-brand">
            <Logo inverted={true}/>
            <p className="ww-foot-mission">{t.footer_disclaim}</p>
          </div>
          <div className="ww-foot-col">
            <div className="ww-foot-h">Contact</div>
            <a href="tel:+97145814595">+971 (4) 581 4595</a>
            <a href="mailto:info@whitewill.ae">info@whitewill.ae</a>
            <a href="#" onClick={(e)=>e.preventDefault()}><IconWA size={12}/> WhatsApp · routing TBC</a>
            <a href="#" onClick={(e)=>e.preventDefault()}><IconTG size={12}/> Telegram · routing TBC</a>
          </div>
          <div className="ww-foot-col">
            <div className="ww-foot-h">Office</div>
            <div className="ww-foot-text">{t.footer_addr_line1}</div>
            <div className="ww-foot-text">{t.footer_addr_line2}</div>
            <a href="#" onClick={(e)=>e.preventDefault()}>Map & directions</a>
          </div>
          <div className="ww-foot-col">
            <div className="ww-foot-h">{t.nav_developments}</div>
            <a href="#" onClick={(e)=>e.preventDefault()}>Off-plan launches</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Secondary</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Rentals</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Areas guide</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>The four brochures</a>
          </div>
          <div className="ww-foot-col">
            <div className="ww-foot-h">Group</div>
            <a href="#" onClick={(e)=>e.preventDefault()}>About</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Experts</a>
            <a href="#" onClick={(e)=>e.preventDefault()}>Journal</a>
            <a href="https://www.linkedin.com/company/whitewilldubai" target="_blank" rel="noopener">LinkedIn (verified)</a>
          </div>
        </div>
        <div className="ww-foot-bot">
          <div>{t.footer_rights}</div>
          <div className="ww-foot-rera">{t.footer_rera}</div>
        </div>
      </div>
    </footer>
  );
}

// ----- Floating FABs --------------------------------------------------------
function FloatingFabs({ t, onBook }) {
  return (
    <div className="ww-fabs" role="complementary" aria-label="Quick contact">
      <a href="#" className="ww-fab ww-fab-wa" onClick={(e)=>e.preventDefault()} title="WhatsApp" aria-label="WhatsApp">
        <IconWA size={20}/>
      </a>
      <a href="#" className="ww-fab ww-fab-tg" onClick={(e)=>e.preventDefault()} title="Telegram" aria-label="Telegram">
        <IconTG size={20}/>
      </a>
    </div>
  );
}

// ----- Sticky mobile bar ----------------------------------------------------
function StickyMobileBar({ t, onBook }) {
  return (
    <div className="ww-sticky-bar">
      <div className="ww-sticky-l">{t.sticky_microsite}</div>
      <div className="ww-sticky-r">
        <a href="#" onClick={(e)=>e.preventDefault()} className="ww-sticky-icon"><IconWA size={18}/></a>
        <a href="#" onClick={(e)=>e.preventDefault()} className="ww-sticky-icon"><IconTG size={18}/></a>
        <button className="ww-btn ww-btn-primary" onClick={onBook}>{t.sticky_book}</button>
      </div>
    </div>
  );
}

window.WW_COMPONENTS = {
  TopBar, Nav, Hero, FactsStrip, LocationSection, ArchitectureSection,
  ResidencesSection, AmenitiesSection, GallerySection, AgentSection,
  BrochureSection, BookModal, OtherDevelopments, FAQSection,
  PartnersStrip, Footer, FloatingFabs, StickyMobileBar, LOCALES,
};