// Major page sections — composed by app.jsx
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

function Nav({ lang, setLang, scrolled, onRegister, onBookViewing }) {
  const t = I18N[lang];
  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="nav-inner">
        <a href="#top" aria-label="betterhomes home" style={{ color: "var(--paper)", display: "inline-flex" }}>
          <Wordmark />
        </a>
        <nav className="nav-links" aria-label="Primary">
          {t.nav.map((label, i) => (
            <a key={i} href={"#" + label.toLowerCase().replace(/\s/g, "-")}>{label}</a>
          ))}
        </nav>
        <div className="nav-right">
          <div className="lang-switch" role="tablist" aria-label="Language">
            {["en", "ar", "ru", "zh"].map(l => (
              <button
                key={l}
                role="tab"
                aria-selected={lang === l}
                className={lang === l ? "active" : ""}
                onClick={() => setLang(l)}
              >{l.toUpperCase()}</button>
            ))}
          </div>
          <button className="btn btn-ghost" onClick={onBookViewing} style={{ padding: "10px 16px" }}>
            {t.bookView}
          </button>
        </div>
      </div>
    </header>
  );
}

function Hero({ lang, variant, onRegister, onBookViewing }) {
  const t = I18N[lang];
  return (
    <section className="hero" data-variant={variant} id="top" data-screen-label="01 Hero">
      <div className="hero-media">
        <img src="media/offplan-butterfly-towers.webp" alt="Butterfly Towers render" />
      </div>
      <div className="hero-scrim"></div>
      <div className="hero-meta-strip">
        <span><span className="dot"></span> Betterhomes · since 1986</span>
        <span className="sep">|</span>
        <span>Off-plan launch</span>
        <span className="sep">|</span>
        <span>Business Bay, Dubai</span>
        <span className="sep">|</span>
        <span>Handover Q4 2027</span>
        <span className="sep">|</span>
        <span style={{ marginInlineStart: "auto" }}>Scroll ↓</span>
      </div>
      <div className="hero-body">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="line"></span>
              <span>{t.eyebrowHero}</span>
            </div>
            <h1 className="display">
              {t.titleA}<br />
              <em>{t.titleB}</em>
            </h1>
            <p className="hero-lede">{t.lede}</p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onRegister}>{t.register}</button>
              <button className="btn btn-ghost" onClick={onBookViewing}>{t.bookView}</button>
              <a className="btn btn-ghost" href="https://wa.me/97144090999" target="_blank" rel="noopener">
                <span style={{ width: 14, height: 14, display: "inline-flex" }}><Icons.WhatsApp /></span>
                {t.whatsapp}
              </a>
            </div>
          </div>
          <div className="hero-side">
            <div className="hero-facts">
              <div className="fact">
                <div className="k">Location</div>
                <div className="v">Business Bay</div>
              </div>
              <div className="fact">
                <div className="k">Handover</div>
                <div className="v">Q4 2027</div>
              </div>
              <div className="fact">
                <div className="k">Residences</div>
                <div className="v">1 — 4 BR</div>
              </div>
              <div className="fact">
                <div className="k">Status</div>
                <div className="v small" style={{ color: "var(--bronze)" }}>Pre-launch · Registering</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TaglineStrip({ lang }) {
  const t = I18N[lang];
  return (
    <section className="tagline-strip" data-screen-label="02 Tagline">
      <div className="container">
        <div className="inner">
          <div className="tag">"{t.trustLine}"</div>
          <div className="meta">
            {t.trustMeta.map((m, i) => <span key={i}>{m}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const tokens = [
    "Twin residential towers", "Business Bay", "Limited early-registrant release",
    "Designed for skyline, light, water", "Pre-launch", "Q4 2027 handover",
  ];
  const renderRow = () => (
    <span>
      {tokens.map((tok, i) => (
        <React.Fragment key={i}>
          <span>{tok}</span>
          <span className="dot"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true" data-screen-label="03 Marquee">
      <div className="marquee-track">
        {renderRow()}
        {renderRow()}
      </div>
    </div>
  );
}

function Editorial({ lang }) {
  const t = I18N[lang];
  return (
    <section className="section editorial" id="overview" data-screen-label="04 Overview">
      <div className="container">
        <div className="editorial-head">
          <div className="meta">
            <span className="section-num">{t.storyEyebrow}</span>
          </div>
          <h2 className="display">
            A measured response to <em>skyline, light</em> and water.
          </h2>
        </div>
        <div className="editorial-body">
          <div></div>
          <div className="prose">
            <p>
              Butterfly Towers is a twin-tower residential development positioned on a
              prominent Business Bay parcel — close enough to Downtown's pull to feel
              connected, far enough back to breathe. The design language is deliberately
              restrained: a warm cast-stone frame, deep glass infill, and balcony depths
              tuned to the angle of the afternoon sun.
            </p>
            <p>
              The brief was simple. Build something that ages well — for buyers who plan
              to stay, and for investors backing a community that's still maturing. Every
              residence is dual-aspect; every floor is finished with the same level of
              detail; the lobby is treated as architecture, not décor.
            </p>
            <p>
              We're releasing the first tranche of residences to early registrants ahead
              of public sale. Specifications, floor plates and final pricing are with the
              developer for sign-off — we'll share them privately once confirmed.
            </p>
          </div>
          <aside className="aside">
            <div className="row"><div className="k">{t.aside1}</div><div className="v">{t.aside1v}</div></div>
            <div className="row"><div className="k">{t.aside2}</div><div className="v body">{t.aside2v}</div></div>
            <div className="row"><div className="k">{t.aside3}</div><div className="v">{t.aside3v}</div></div>
            <div className="row"><div className="k">{t.aside4}</div><div className="v">{t.aside4v}</div></div>
            <div className="row"><div className="k">{t.aside5}</div><div className="v body">{t.aside5v}</div></div>
            <div className="row"><div className="k">{t.aside6}</div><div className="v body">{t.aside6v}</div></div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Location({ lang }) {
  const places = [
    { name: "Downtown Dubai", dist: "2.4 km" },
    { name: "Burj Khalifa", dist: "3.1 km" },
    { name: "DIFC", dist: "4.0 km" },
    { name: "Dubai Mall", dist: "3.6 km" },
    { name: "DXB Airport", dist: "12 km" },
    { name: "Business Bay Metro", dist: "850 m" },
  ];
  return (
    <section className="section section-stone" id="location" data-screen-label="05 Location">
      <div className="container">
        <div className="editorial-head">
          <div className="meta">
            <span className="section-num">02 — Location</span>
          </div>
          <h2 className="display">
            Anchored in <em>Business Bay</em> — Dubai's working heart.
          </h2>
        </div>
        <div className="location-grid">
          <div className="location-map" aria-label="Map of Business Bay">
            <img src="media/insight-business-bay-canal.webp" alt="Business Bay canal" />
            <div className="pin" aria-hidden="true"></div>
            <div className="compass">
              <span style={{ width: 14, height: 14, display: "inline-flex", color: "var(--bronze-2)" }}><Icons.Compass /></span>
              25.1864° N · 55.2662° E
            </div>
          </div>
          <div className="location-info">
            <h3>Five minutes to Downtown. Ten to DIFC. The canal at your door.</h3>
            <p>
              The plot sits on the south bank of the Dubai Water Canal, in a stretch of
              Business Bay that's transitioned from office-dominant to genuinely
              mixed-use — restaurants, water-taxis, the boardwalk, and a school
              catchment that now stretches from Downtown to Al Quoz.
            </p>
            <ul className="connectivity">
              {places.map(p => (
                <li key={p.name}>
                  <span className="place">{p.name}</span>
                  <span className="dist">{p.dist}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Residences({ lang }) {
  const concepts = [
    { n: "A", name: "One-bedroom", em: "residences", blurb: "Dual-aspect plates, wrap-around balcony, integrated kitchen.", size: "~ 720–820 sqft" },
    { n: "B", name: "Two-bedroom", em: "skyline suites", blurb: "Corner plates with twin orientations — canal and Downtown.", size: "~ 1,150–1,320 sqft" },
    { n: "C", name: "Three-bedroom", em: "family floors", blurb: "Family layouts with maid's, storage, and a separate study.", size: "~ 1,650–1,820 sqft" },
    { n: "D", name: "Four-bedroom", em: "penthouses", blurb: "Top-floor duplex penthouses with private pool deck.", size: "~ 4,000+ sqft" },
  ];
  return (
    <section className="section residences" id="residences" data-screen-label="06 Residences">
      <div className="container">
        <div className="editorial-head">
          <div className="meta">
            <span className="section-num">03 — Residences</span>
          </div>
          <h2 className="display" style={{ color: "var(--paper)" }}>
            Four concepts. <em>One standard</em> of finish.
          </h2>
        </div>
      </div>
      <div className="container">
        <div className="res-grid">
          {concepts.map((c, i) => (
            <article key={c.n} className="res-card">
              <span className="num">CONCEPT — {c.n}</span>
              <h4>{c.name}<br /><em>{c.em}</em></h4>
              <p className="blurb">{c.blurb}</p>
              <div className="footer">
                <span>{c.size}</span>
                <span className="poa">POA</span>
              </div>
            </article>
          ))}
        </div>
        <p style={{ marginTop: 24, fontSize: 12, color: "var(--muted-d)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
          Indicative residence concepts. Final unit mix, exact sizes and prices confirmed at
          private launch — early registrants seen first.
        </p>
      </div>
    </section>
  );
}

function Amenities() {
  const items = [
    { ico: <Icons.Pool />, name: "Sky pool",     blurb: "26m horizon pool on the amenity deck." },
    { ico: <Icons.Spa />,  name: "Hammam & spa", blurb: "Steam, sauna, treatment rooms, cold plunge." },
    { ico: <Icons.Gym />,  name: "Performance gym", blurb: "Dual-storey gym with strength and cardio zones." },
    { ico: <Icons.Padel />,name: "Padel court",  blurb: "Single covered court on level four." },
    { ico: <Icons.Garden />,name: "Podium garden", blurb: "Landscaped 4,000 sqm garden with shaded seating." },
    { ico: <Icons.Concierge />, name: "Concierge", blurb: "24/7 multilingual concierge and valet." },
    { ico: <Icons.Lounge />, name: "Residents' lounge", blurb: "Library, co-working booths, café service." },
    { ico: <Icons.Cinema />, name: "Screening room", blurb: "Eighteen-seat private cinema, bookable nightly." },
  ];
  return (
    <section className="section editorial" id="amenities" data-screen-label="07 Amenities">
      <div className="container">
        <div className="editorial-head">
          <div className="meta">
            <span className="section-num">04 — Amenities</span>
          </div>
          <h2 className="display">
            An entire <em>floor</em> dedicated to the day-to-day.
          </h2>
        </div>
      </div>
      <div className="amenities-grid">
        {items.map((it, i) => (
          <div className="amenity" key={i}>
            <div className="ico">{it.ico}</div>
            <h5>{it.name}</h5>
            <p>{it.blurb}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Gallery() {
  const shots = [
    { src: "media/offplan-butterfly-towers.webp",      cap: "Hero render · west elevation",       cls: "g-a" },
    { src: "media/insight-business-bay-canal.webp",    cap: "Site · canal frontage",              cls: "g-b" },
    { src: "media/insight-downtown-towers-night.webp", cap: "Skyline context · Downtown at dusk", cls: "g-c" },
    { src: "media/insight-dubai-marina-towers.webp",   cap: "Marina · neighbour benchmark",       cls: "g-d" },
    { src: "media/insight-emirates-towers.webp",       cap: "DIFC corridor",                      cls: "g-e" },
    { src: "media/insight-dubai-metro-night.webp",     cap: "Metro · 850m walk",                  cls: "g-f" },
  ];
  return (
    <section className="section gallery" id="gallery" data-screen-label="08 Gallery">
      <div className="container">
        <div className="editorial-head">
          <div className="meta">
            <span className="section-num">05 — Gallery</span>
          </div>
          <h2 className="display" style={{ color: "var(--paper)" }}>
            The <em>building</em>, in context.
          </h2>
        </div>
        <div className="gallery-grid">
          {shots.map((s, i) => (
            <figure key={i} className={s.cls}>
              <img src={s.src} alt={s.cap} loading="lazy" />
              <figcaption>{s.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Trust({ lang }) {
  return (
    <section className="trust-strip" data-screen-label="09 Trust">
      <div className="trust-grid">
        <div className="trust-cell">
          <div className="big"><em>1986</em></div>
          <div className="lbl">Established</div>
          <div className="sub">Founded by Linda Mahoney with a single desk in Jumeirah.</div>
        </div>
        <div className="trust-cell">
          <div className="big">4</div>
          <div className="lbl">Offices</div>
          <div className="sub">Business Bay HQ, Dubai Marina, Motor City and Abu Dhabi Al Raha Beach.</div>
        </div>
        <div className="trust-cell">
          <div className="big">EN <em>·</em> AR</div>
          <div className="lbl">+ RU · ZH on launches</div>
          <div className="sub">Investor-facing material extended to the four largest GCC buyer markets.</div>
        </div>
        <div className="trust-cell">
          <div className="big">ORN <em>97</em></div>
          <div className="lbl">RERA registered</div>
          <div className="sub">Brokerage of record · Dubai Land Department · verify before publishing.</div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  return (
    <footer className="footer" data-screen-label="13 Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="wordmark" style={{ display: "inline-block" }}><Wordmark /></div>
            <p>
              One of Dubai's most established brokerages — buying, selling, renting,
              off-plan, commercial, luxury and property management across Dubai and
              Abu Dhabi, since 1986.
            </p>
            <div className="contact">
              <span>Vision Tower, 42<sup>nd</sup> floor</span>
              <span>Business Bay, Dubai · PO Box 29726</span>
              <span style={{ marginTop: 8 }}>+971 600 52 2233</span>
              <span>info@bhomes.com</span>
            </div>
          </div>
          <div className="col">
            <h6>Services</h6>
            <ul>
              <li><a href="#">Buy</a></li>
              <li><a href="#">Rent</a></li>
              <li><a href="#">Off-plan</a></li>
              <li><a href="#">Commercial</a></li>
              <li><a href="#">Prime · luxury</a></li>
              <li><a href="#">Property management</a></li>
            </ul>
          </div>
          <div className="col">
            <h6>Areas</h6>
            <ul>
              <li><a href="#">Business Bay</a></li>
              <li><a href="#">Dubai Marina</a></li>
              <li><a href="#">Palm Jumeirah</a></li>
              <li><a href="#">Downtown</a></li>
              <li><a href="#">Arabian Ranches</a></li>
              <li><a href="#">Al Raha Beach</a></li>
            </ul>
          </div>
          <div className="col">
            <h6>Offices</h6>
            <ul>
              <li><a href="#">Vision Tower — HQ</a></li>
              <li><a href="#">Marina Plaza</a></li>
              <li><a href="#">Motor City</a></li>
              <li><a href="#">Abu Dhabi</a></li>
            </ul>
          </div>
          <div className="col">
            <h6>Investors</h6>
            <ul>
              <li><a href="#">Market reports</a></li>
              <li><a href="#">Insights</a></li>
              <li><a href="#">Clarity portal</a></li>
              <li><a href="#">Free valuation</a></li>
              <li><a href="#">List your property</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Better Homes LLC · All rights reserved</span>
          <div className="socials">
            <a href="#" aria-label="Instagram">Instagram</a>
            <a href="#" aria-label="LinkedIn">LinkedIn</a>
            <a href="#" aria-label="YouTube">YouTube</a>
            <a href="#" aria-label="X">X</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, TaglineStrip, Marquee, Editorial, Location, Residences, Amenities, Gallery, Trust, Footer });