// Main app
const { useState, useEffect, useRef, useMemo } = React;

// SVG logo (matches uploaded wordmark — original re-tracing of the OMNIYAT mark would be needed for production; here we render the brand-supplied SVG inline)
function Logo({ height = 14 }) {
  return (
    <img src="media/logo-omniyat.svg" alt="OMNIYAT" style={{height, width:"auto", filter:"brightness(0) invert(1)"}} />
  );
}

function Nav({ active, project, locale, setLocale, onCta, scrolled, sections }) {
  const t = STRINGS[locale];
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <a className="nav-logo" href="#top">
        <Logo height={14} />
      </a>
      <div className="nav-mid">
        {sections.map(s => (
          <a key={s.id} href={"#"+s.id} className={active===s.id ? "is-active":""}>{t.nav[s.id] || s.label}</a>
        ))}
      </div>
      <div className="nav-right">
        <div className="nav-locale">
          {["EN","AR","RU","ZH"].map(L => (
            <button key={L}
              className={(locale === L.toLowerCase()) ? "is-active":""}
              onClick={()=> setLocale(L.toLowerCase())}>
              {L}
            </button>
          ))}
        </div>
        <a className="nav-cta" onClick={onCta}>
          <span>{t.nav_cta}</span>
          <span className="btn-arrow" />
        </a>
      </div>
    </nav>
  );
}

function Hero({ project, onCta }) {
  const [idx, setIdx] = useState(0);
  useEffect(()=>{
    const t = setInterval(()=> setIdx(i => (i+1) % project.heroImages.length), 6000);
    return ()=> clearInterval(t);
  }, [project.id]);
  // Reset when project changes
  useEffect(()=> setIdx(0), [project.id]);

  return (
    <section id="top" className="hero">
      <div className="hero-bg">
        {project.heroImages.map((src,i)=>(
          <img key={src} src={src} className={i===idx ? "is-active" : ""} alt="" />
        ))}
      </div>
      <div className="hero-vignette" />
      <div className="hero-grain" />
      <div className="hero-content wrap">
        <div className="hero-eyebrow eyebrow">
          {project.eyebrow.split(" · ").map((p,i)=>(
            <React.Fragment key={i}>
              {i>0 && <span className="dot" />}
              {p}
            </React.Fragment>
          ))}
        </div>
        <h1 className="hero-h1">
          {project.name}
          <span className="sub">— {project.sub.split(".")[0]}.</span>
        </h1>
        <p className="hero-sub">{project.sub}</p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={()=> onCta("interest")}>
            Register interest <span className="btn-arrow" />
          </button>
          <button className="btn btn-ghost" onClick={()=> onCta("brochure")}>
            Download brochure <span className="btn-arrow" />
          </button>
        </div>
      </div>
      <div className="hero-counter">
        <span className="num">{String(idx+1).padStart(2,"0")}</span>
        <span>/ {String(project.heroImages.length).padStart(2,"0")}</span>
      </div>
      <div className="hero-meta">
        <div>
          <span className="meta-label">Architect</span>
          <span className="meta-value">{project.architect.replace("OMNIYAT in collaboration with ","").replace(" — interior architecture","")}</span>
        </div>
        <div>
          <span className="meta-label">Completion</span>
          <span className="meta-value">{project.completion}</span>
        </div>
      </div>
    </section>
  );
}

function BrandStrip() {
  return (
    <div className="brand-strip">
      <div className="wrap brand-strip-inner">
        <div>
          <span className="v">2005</span>
          <span className="l">Founded</span>
          <span className="src">Mahdi Amjad, Chairman</span>
        </div>
        <div>
          <span className="v">~$10bn</span>
          <span className="l">Portfolio</span>
          <span className="src">Eighteen masterpieces</span>
        </div>
        <div>
          <span className="v">37%</span>
          <span className="l">$10M+ residential share, Dubai</span>
          <span className="src">Property Monitor · 2024</span>
        </div>
        <div>
          <span className="v">$900M</span>
          <span className="l">Sukuk raised, 2025</span>
          <span className="src">Press attributed</span>
        </div>
      </div>
    </div>
  );
}

function Vision({ project }) {
  return (
    <section id="vision" className="section section-dark">
      <div className="wrap vision-grid">
        <div className="col-left">
          <div className="eyebrow">Vision <span className="dot" /> 01</div>
          <h2 className="section-title serif">
            A discreet<br/>
            architectural<br/>
            <em style={{fontStyle:"italic", color:"var(--primary)"}}>composition.</em>
          </h2>
        </div>
        <div className="col-right">
          <div className="vision-body">
            {project.vision.map((p, i) => (
              <p key={i} className={i===0 ? "lead-cap" : ""}>{p}</p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Architecture({ project }) {
  return (
    <section id="architecture" className="arch">
      <div className="wrap arch-grid">
        <div className="arch-img">
          <img src={project.architectureImage} alt="" />
        </div>
        <div>
          <div className="eyebrow">Architecture & Design <span className="dot" /> 02</div>
          <h2 className="section-title serif">
            Drawn for<br/>
            the long horizon.
          </h2>
          <p className="vision-body" style={{marginTop:32}}>{project.architectureCopy}</p>
          <dl className="arch-credit">
            <dt>Architecture</dt>
            <dd>{project.architect}</dd>
            <dt>Interiors</dt>
            <dd>{project.interiors}</dd>
            {project.hospitality && project.hospitality !== "Confirm with developer" && (
              <>
                <dt>Operator</dt>
                <dd>{project.hospitality}</dd>
              </>
            )}
            <dt>Developer</dt>
            <dd>OMNIYAT</dd>
          </dl>
        </div>
      </div>
    </section>
  );
}

function Hospitality({ project }) {
  if (project.hospitality !== "Dorchester Collection") {
    // For Vela & non-Dorchester projects, use a neutral block
    return (
      <section id="hospitality" className="hosp">
        <div className="wrap hosp-grid">
          <div>
            <div className="eyebrow">Service <span className="dot" /> 03</div>
            <h2 className="hosp-title">
              Hospitality-grade<br/>
              <em>residential service.</em>
            </h2>
            <div className="hosp-body" style={{marginTop:32}}>
              {project.hospitalityCopy.map((p,i)=> <p key={i}>{p}</p>)}
            </div>
            <div className="hosp-licensing">Operator confirmation pending — by enquiry.</div>
          </div>
          <div className="hosp-img"><img src={project.hospitalityImage} alt="" /></div>
        </div>
      </section>
    );
  }
  return (
    <section id="hospitality" className="hosp">
      <div className="wrap hosp-grid">
        <div>
          <div className="eyebrow">Hospitality <span className="dot" /> 03</div>
          <h2 className="hosp-title">
            Operated by<br/>
            <em>Dorchester Collection.</em>
          </h2>
          <div className="hosp-body" style={{marginTop:32}}>
            {project.hospitalityCopy.map((p,i)=> <p key={i}>{p}</p>)}
          </div>
          <div className="hosp-marks">
            <span>The Dorchester</span>
            <span>45 Park Lane</span>
            <span>Le Meurice</span>
            <span>The Beverly Hills Hotel</span>
          </div>
          <div className="hosp-licensing">Dorchester Collection marks shown for editorial reference. Logo rights to be cleared prior to publishing on any production microsite.</div>
        </div>
        <div className="hosp-img"><img src={project.hospitalityImage} alt="" /></div>
      </div>
    </section>
  );
}

// Stylised, abstract location plot — not a literal Google embed (which is a separate component to wire pre-launch).
function LocationMapSvg({ project }) {
  return (
    <svg className="loc-map-svg" viewBox="0 0 400 400" fill="none">
      <rect width="400" height="400" fill="none" />
      {/* gradient water */}
      <defs>
        <linearGradient id="water" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1a2530" />
          <stop offset="100%" stopColor="#0E1418" />
        </linearGradient>
        <radialGradient id="glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.5" />
          <stop offset="100%" stopColor="var(--primary)" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="400" height="400" fill="url(#water)" />
      {/* Stylised Palm Jumeirah / Marasi shape, depending on project */}
      {project.location.includes("Palm") ? (
        <g stroke="#3A3833" strokeWidth="0.5" fill="none">
          <circle cx="200" cy="200" r="120" />
          {Array.from({length:16}).map((_,i)=>{
            const a = (i / 16) * Math.PI * 2;
            const x1 = 200 + Math.cos(a) * 90;
            const y1 = 200 + Math.sin(a) * 90;
            const x2 = 200 + Math.cos(a) * 140;
            const y2 = 200 + Math.sin(a) * 140;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
          })}
          <circle cx="200" cy="200" r="40" fill="#1a2530" />
          <circle cx="200" cy="200" r="160" strokeDasharray="2 4" />
        </g>
      ) : (
        <g stroke="#3A3833" strokeWidth="0.5" fill="none">
          {/* canal shape */}
          <path d="M40 200 Q 100 120, 200 140 T 360 200" strokeWidth="40" stroke="#1a2530" />
          <path d="M40 200 Q 100 120, 200 140 T 360 200" />
          <line x1="60" y1="60" x2="340" y2="60" />
          <line x1="60" y1="340" x2="340" y2="340" />
          {Array.from({length:8}).map((_,i)=>(
            <rect key={i} x={70 + i*38} y="40" width="20" height="40" />
          ))}
        </g>
      )}
      {/* project pin */}
      <circle cx={project.location.includes("Palm") ? 130 : 220} cy={project.location.includes("Palm") ? 180 : 160} r="40" fill="url(#glow)" />
      <circle cx={project.location.includes("Palm") ? 130 : 220} cy={project.location.includes("Palm") ? 180 : 160} r="6" fill="var(--primary)" />
      <circle cx={project.location.includes("Palm") ? 130 : 220} cy={project.location.includes("Palm") ? 180 : 160} r="14" fill="none" stroke="var(--primary)" strokeWidth="0.5" />
      <text x="20" y="380" fill="#5E5A52" fontSize="9" letterSpacing="2" fontFamily="Inter">{project.location.toUpperCase()}</text>
      <text x="380" y="380" fill="#5E5A52" fontSize="9" letterSpacing="2" fontFamily="Inter" textAnchor="end">DUBAI · UAE</text>
    </svg>
  );
}

function LocationBlock({ project }) {
  return (
    <section id="location" className="section loc section-dark">
      <div className="wrap">
        <div className="loc-title-row">
          <div>
            <div className="eyebrow">Location <span className="dot" /> 04</div>
            <h2 className="section-title serif">{project.location.split(" (")[0]}.</h2>
          </div>
          <div className="muted" style={{fontSize:12, letterSpacing:".18em", textTransform:"uppercase"}}>Dubai, United Arab Emirates</div>
        </div>
      </div>
      <div className="wrap">
        <div className="loc-grid">
          <div className="loc-render"><img src={project.locationImage} alt="" /></div>
          <div className="loc-map">
            <div>
              <LocationMapSvg project={project} />
              <dl className="loc-coords">
                <div><dt>Latitude</dt><dd>{project.coords.lat}</dd></div>
                <div><dt>Longitude</dt><dd>{project.coords.lng}</dd></div>
              </dl>
              <div className="muted" style={{fontSize:10, marginTop:8, letterSpacing:".1em"}}>{project.coords.note}</div>
            </div>
            <div className="loc-pois">
              <div className="eyebrow" style={{marginBottom:14}}>Proximity</div>
              {project.pois.map((p,i)=>(
                <div key={i} className="loc-poi">
                  <span className="loc-poi-name">{p.name}</span>
                  <span className="loc-poi-d">{p.d}</span>
                </div>
              ))}
              <div className="muted" style={{fontSize:10, marginTop:14, letterSpacing:".1em"}}>Drive-times indicative · subject to traffic.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Residences({ project }) {
  return (
    <section id="residences" className="section res">
      <div className="wrap">
        <div className="res-head">
          <div>
            <div className="eyebrow">Residences <span className="dot" /> 05</div>
            <h2 className="section-title serif">
              {project.residences ? `${project.residences} private residences.` : "A reserved release."}
            </h2>
          </div>
          <div className="vision-body" style={{maxWidth:480}}>
            Every residence is delivered to the same architectural standard. Specifications are
            confirmed at private viewing — no published prices, no public availability list.
          </div>
        </div>

        <div className="res-stats">
          <div className="res-stat">
            <div className="res-stat-num">{project.residences ?? "—"}<sup>{project.residences ? "" : ""}</sup></div>
            <div className="res-stat-label">Private residences</div>
          </div>
          <div className="res-stat">
            <div className="res-stat-num">{project.resortResidences ?? (project.storeys ?? "—")}</div>
            <div className="res-stat-label">{project.resortResidences ? "Resort residences" : (project.storeys ? "Storeys" : "By enquiry")}</div>
          </div>
          <div className="res-stat">
            <div className="res-stat-num">{project.floorRatio ? "1:1" : "—"}</div>
            <div className="res-stat-label">{project.floorRatio || "Residence ratio"}</div>
          </div>
          <div className="res-stat">
            <div className="res-stat-num">{project.completion.split(" ")[0]}</div>
            <div className="res-stat-label">Completion · {project.completion.includes("(") ? "official" : "confirmed"}</div>
          </div>
        </div>

        <div className="res-typology">
          {project.residenceTypes.map((t,i)=>(
            <div key={i} className="res-cell">
              <div>
                <div className="typ-label">{t.label}</div>
                <div className="typ-name serif">{t.name}</div>
                <div className="typ-meta">{t.meta}</div>
              </div>
              <div className="typ-foot">
                <span>{t.price}</span>
                <span>→</span>
              </div>
            </div>
          ))}
        </div>

        <p className="res-disclaim">
          Residence sizes, configurations, layouts and pricing are confirmed only at private viewing and remain subject to RERA / Dubai Land Department registration. No price list is published; no availability is implied.
        </p>
      </div>
    </section>
  );
}

function Amenities({ project }) {
  return (
    <section id="amenities" className="amen">
      <div className="wrap">
        <div className="eyebrow">Amenities <span className="dot" /> 06</div>
        <h2 className="hosp-title" style={{maxWidth:720}}>
          A private<br/>
          <em>residential club.</em>
        </h2>
        <div className="amen-grid">
          <div className="amen-img"><img src={project.amenityImage} alt="" /></div>
          <div>
            <div className="amen-list">
              {project.amenities.map((a,i)=>(
                <div key={i} className="amen-item">
                  <span className="num">{String(i+1).padStart(2,"0")}</span>
                  <span>{a}</span>
                </div>
              ))}
            </div>
            <p style={{marginTop:32, fontSize:11, color:"var(--muted-dark)", letterSpacing:".06em", maxWidth:480}}>
              Selected amenities are reserved for residence owners and named guests; access is allocated by the building's residential director. Programming subject to refinement at handover.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Gallery({ project, onOpen }) {
  const tiles = project.gallery.slice(0,8);
  return (
    <section id="gallery" className="gallery">
      <div className="wrap">
        <div className="gallery-head">
          <div>
            <div className="eyebrow">Gallery <span className="dot" /> 07</div>
            <h2 className="section-title serif">A film & render archive.</h2>
          </div>
          <div className="muted" style={{fontSize:11, letterSpacing:".2em", textTransform:"uppercase"}}>
            {project.gallery.length} frames · indicative
          </div>
        </div>
        <div className="gallery-grid">
          {tiles.map((g,i)=>(
            <div key={i} className={"gallery-tile g-"+(i+1)} onClick={()=> onOpen(i)}>
              <img src={g.src} alt={g.caption} loading="lazy" />
              <div className="caption">{String(i+1).padStart(2,"0")} · {g.caption}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Lightbox({ project, idx, setIdx, onClose }) {
  if (idx == null) return null;
  const g = project.gallery[idx];
  useEffect(()=>{
    const h = (e)=>{
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIdx((idx+1) % project.gallery.length);
      if (e.key === "ArrowLeft") setIdx((idx-1+project.gallery.length) % project.gallery.length);
    };
    window.addEventListener("keydown", h);
    return ()=> window.removeEventListener("keydown", h);
  }, [idx]);

  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lightbox-nav prev" onClick={(e)=>{ e.stopPropagation(); setIdx((idx-1+project.gallery.length) % project.gallery.length); }}>‹</button>
      <div className="lightbox-inner" onClick={(e)=> e.stopPropagation()}>
        <img src={g.src} alt={g.caption} />
        <div style={{position:"absolute", bottom:-32, left:0, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:"var(--muted)"}}>
          {String(idx+1).padStart(2,"0")} / {String(project.gallery.length).padStart(2,"0")} · {g.caption}
        </div>
      </div>
      <button className="lightbox-nav next" onClick={(e)=>{ e.stopPropagation(); setIdx((idx+1) % project.gallery.length); }}>›</button>
      <button className="lightbox-close" onClick={onClose}>Close · Esc</button>
    </div>
  );
}

function Register({ project, locale }) {
  const t = STRINGS[locale];
  return (
    <section id="register" className="reg">
      <div className="wrap reg-grid">
        <div className="reg-side">
          <div className="eyebrow">Register Interest <span className="dot" /> 08</div>
          <h2 className="reg-title">
            {t.register_title} <em>{t.register_em}</em>
          </h2>
          <p className="reg-blurb">{t.register_blurb}</p>

          <div className="reg-perks">
            {t.perks.map((p,i)=>(
              <div key={i} className="reg-perk">
                <span className="perk-num">{String(i+1).padStart(2,"0")}</span>
                <span className="perk-text">{p}</span>
              </div>
            ))}
          </div>

          <div style={{marginTop:48, fontSize:11, color:"var(--muted)", letterSpacing:".08em", lineHeight:1.7}}>
            Or call · <span style={{color:"var(--text)", letterSpacing:".1em"}}>+971 4 511 5504</span><br/>
            Toll-free · <span style={{color:"var(--text)"}}>800 666</span><br/>
            Media · <span style={{color:"var(--text)"}}>media@omniyat.com</span>
          </div>
        </div>
        <div>
          <RegisterForm project={project} />
        </div>
      </div>
    </section>
  );
}

function NextProjects({ activeId, onSwitch }) {
  const others = Object.values(PROJECTS);
  return (
    <section className="next-projects">
      <div className="wrap">
        <div className="np-head">
          <div>
            <div className="eyebrow">Other masterpieces <span className="dot" /> 09</div>
            <h2 className="section-title serif">Explore the portfolio.</h2>
          </div>
          <div className="muted" style={{fontSize:11, letterSpacing:".2em", textTransform:"uppercase", maxWidth:280, textAlign:"right"}}>
            Eighteen masterpieces · three destinations
          </div>
        </div>
        <div className="np-grid">
          {others.map(p => (
            <div key={p.id}
              className={"np-card " + (p.id === activeId ? "is-active" : "")}
              onClick={()=> onSwitch(p.id)}>
              <div className="np-img"><img src={p.heroImages[0]} alt={p.name} loading="lazy" /></div>
              <div className="np-marker">{p.id === activeId ? "Now viewing" : "View"}</div>
              <div className="np-meta">
                <div className="np-name">{p.name}</div>
                <div className="np-sub">{p.location.split(" (")[0]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-logo"><Logo height={18} /></div>
            <div className="footer-tag">The Art of Elevation.</div>
            <p style={{marginTop:24, fontSize:12, color:"var(--muted)", maxWidth:340, lineHeight:1.7}}>
              OMNIYAT is Dubai's ultra-luxury real-estate and lifestyle developer. Founded 2005 by Mahdi Amjad.
            </p>
          </div>
          <div className="footer-col">
            <h5>Masterpieces</h5>
            <a>The Alba</a>
            <a>AVA at Palm Jumeirah</a>
            <a>Orla</a>
            <a>Vela & Vela Viento</a>
            <a>The Opus</a>
            <a>One at Palm Jumeirah</a>
            <a>The Lana</a>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <a>Our story</a>
            <a>Architecture partners</a>
            <a>Press</a>
            <a>Careers</a>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <p>SZ-21 By OMNIYAT, L1</p>
            <p>Sheikh Zayed Road</p>
            <p>Al Quoz, Dubai · UAE</p>
            <a style={{marginTop:14}}>+971 4 511 5504</a>
            <a>Toll-free · 800 666</a>
            <a>media@omniyat.com</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© OMNIYAT 2005–{new Date().getFullYear()}. All figures attributed. No price published.</div>
          <div style={{display:"flex", gap:18, fontSize:11}}>
            <a>Instagram · @omniyatofficial</a>
            <a>YouTube</a>
            <a>Privacy</a>
            <a>RERA / DLD disclosure</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// === MAIN APP =====================================================
function App() {
  const defaults = window.__TWEAK_DEFAULTS__ || { project:"alba", locale:"en", accent:"bronze" };
  const [tweaks, setTweak] = window.useTweaks(defaults);

  const project = PROJECTS[tweaks.project] || PROJECTS.alba;
  const locale = tweaks.locale || "en";
  const [activeSection, setActiveSection] = useState("top");
  const [scrolled, setScrolled] = useState(false);
  const [lightboxIdx, setLightboxIdx] = useState(null);

  // Apply locale to <html>
  useEffect(()=>{
    document.documentElement.lang = locale;
    document.documentElement.dir = (locale === "ar") ? "rtl" : "ltr";
    document.documentElement.dataset.accent = tweaks.accent || "bronze";
    document.title = `${project.fullName} — OMNIYAT`;
  }, [locale, tweaks.accent, project.fullName]);

  // Scroll detection
  useEffect(()=>{
    const onScroll = ()=>{
      setScrolled(window.scrollY > 80);
      const sections = ["top","vision","architecture","hospitality","location","residences","amenities","gallery","register"];
      let cur = "top";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 200) cur = id;
      }
      setActiveSection(cur);
    };
    window.addEventListener("scroll", onScroll, { passive:true });
    return ()=> window.removeEventListener("scroll", onScroll);
  }, []);

  const sections = [
    { id:"vision", label:"Vision" },
    { id:"architecture", label:"Architecture" },
    { id:"hospitality", label:"Hospitality" },
    { id:"location", label:"Location" },
    { id:"residences", label:"Residences" },
    { id:"amenities", label:"Amenities" },
    { id:"register", label:"Register" },
  ];

  const scrollToRegister = (mode) => {
    const el = document.getElementById("register");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 20;
      window.scrollTo({ top, behavior:"smooth" });
    }
  };

  // Tweaks panel
  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakSelect = window.TweakSelect;
  const TweakColor = window.TweakColor;

  return (
    <React.Fragment>
      <Nav active={activeSection} project={project} locale={locale}
        setLocale={(l)=> setTweak("locale", l)} sections={sections}
        scrolled={scrolled} onCta={()=> scrollToRegister()} />

      <Hero project={project} onCta={(mode)=> scrollToRegister(mode)} />

      <BrandStrip />

      <Vision project={project} />
      <Architecture project={project} />
      <Hospitality project={project} />
      <LocationBlock project={project} />
      <Residences project={project} />
      <Amenities project={project} />
      <Gallery project={project} onOpen={setLightboxIdx} />
      <Register project={project} locale={locale} />

      <NextProjects activeId={project.id} onSwitch={(id)=> {
        setTweak("project", id);
        window.scrollTo({ top:0, behavior:"smooth" });
      }} />

      <Footer />

      <Lightbox project={project} idx={lightboxIdx} setIdx={setLightboxIdx} onClose={()=> setLightboxIdx(null)} />

      <div className="mobile-cta">
        <button className="alt" onClick={()=> scrollToRegister("brochure")}>Brochure</button>
        <button onClick={()=> scrollToRegister("interest")}>Register interest</button>
      </div>

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Microsite">
            <TweakSelect label="Active project"
              value={tweaks.project}
              onChange={v => setTweak("project", v)}
              options={[
                { value:"alba", label:"The Alba (Dorchester · Zaha Hadid)" },
                { value:"ava",  label:"AVA at Palm Jumeirah (Dorchester · Portia Fox)" },
                { value:"orla", label:"Orla (Dorchester · Foster + Partners)" },
                { value:"vela", label:"Vela (Marasi Bay)" },
              ]} />
          </TweakSection>
          <TweakSection label="Locale">
            <TweakRadio label="Language"
              value={tweaks.locale}
              onChange={v => setTweak("locale", v)}
              options={[
                { value:"en", label:"EN" },
                { value:"ar", label:"AR (RTL)" },
              ]} />
          </TweakSection>
          <TweakSection label="Accent">
            <TweakRadio label="Tone"
              value={tweaks.accent}
              onChange={v => setTweak("accent", v)}
              options={[
                { value:"bronze", label:"Bronze" },
                { value:"sea", label:"Sea-glass" },
                { value:"ink", label:"Limestone" },
              ]} />
          </TweakSection>
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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