// Object 1 — W1NNER — Main sections. Export to window for cross-script access.

function Nav({ t, locale, setLocale, onCta }) {
  const isAr = locale === 'ar';
  return (
    <header className="nav" data-screen-label="Nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#top" className="nav-logo" aria-label="Object 1">
            <img src="media/logo-object-1.svg" alt="Object 1" />
          </a>
          <span className="nav-crumb">
            <span>{t.nav.project}</span>
            <span className="sep">/</span>
            <span>{t.nav.community}</span>
          </span>
        </div>
        <nav className="nav-links" aria-label="primary">
          {t.nav.links.map((l, i) => {
            const ids = ['concept', 'location', 'amenities', 'residences', 'gallery', 'contact'];
            return <a key={i} href={`#${ids[i]}`}>{l}</a>;
          })}
        </nav>
        <div className="nav-right">
          <div className="locale" role="tablist" aria-label="Locale">
            {['en', 'ar'].map(l => (
              <button key={l} role="tab" aria-selected={locale === l}
                      className={locale === l ? 'active' : ''}
                      onClick={() => setLocale(l)}>{l.toUpperCase()}</button>
            ))}
          </div>
          <button className="btn sm" onClick={onCta}>{t.nav.cta}</button>
        </div>
      </div>
    </header>
  );
}

function Hero({ t, variant, onCta, onBrochure }) {
  const heroImg = 'media/render-winner-tower.webp';
  const editorialImg = 'media/render-up-view.webp';
  return (
    <section id="top" className="hero" data-variant={variant} data-screen-label="Hero">
      {variant !== 'editorial' && (
        <div className="hero-img" style={{ backgroundImage: `url(${heroImg})` }} />
      )}
      <div className="wrap hero-inner">
        <div className="hero-top">
          <div className="hero-status">
            <span className="dot"></span>
            <span>{t.hero.eyebrow}</span>
          </div>
          <div className="hero-status">
            <span>Object 1 · 2026 — 2027</span>
          </div>
        </div>

        <div className="hero-mid">
          <h1 className="hero-title">
            W<span className="num1">1</span>NNER
          </h1>
        </div>

        <div className="hero-bot">
          <div className="hero-line">{t.hero.line}</div>
          <div className="hero-meta">
            <dl>
              <dt>{t.hero.community}</dt><dd>{t.hero.communityVal}</dd>
              <dt>{t.hero.typology}</dt><dd>{t.hero.typologyVal}</dd>
              <dt>{t.hero.status}</dt><dd>{t.hero.statusVal}</dd>
              <dt>{t.hero.pricing}</dt><dd>{t.hero.pricingVal}</dd>
            </dl>
          </div>
          <div className="hero-cta">
            <button className="btn on-dark" onClick={onCta}>
              {t.hero.ctaPrimary}
              <span className="arrow">→</span>
            </button>
            <button className="btn on-dark ghost" onClick={onBrochure}>
              {t.hero.ctaSecondary}
            </button>
          </div>
        </div>

        {variant === 'editorial' && (
          <div className="editorial-img" style={{ backgroundImage: `url(${editorialImg})` }} />
        )}
      </div>
      {variant === 'fullbleed' && (
        <div className="scroll-cue">{t.hero.scroll} ↓</div>
      )}
    </section>
  );
}

function SectionHead({ plate, title, sub }) {
  return (
    <div className="section-head">
      <div className="label">
        <span className="plate">{plate}</span>
      </div>
      <div className="title-block">
        <h2 className="h2">{title}</h2>
        {sub && <p className="lede">{sub}</p>}
      </div>
    </div>
  );
}

function Concept({ t }) {
  return (
    <section id="concept" className="section" data-screen-label="Concept">
      <div className="wrap">
        <SectionHead plate={t.concept.plate} title={t.concept.title} />
        <div className="concept-grid">
          <div className="col-img" style={{ backgroundImage: `url(media/render-facade-2025.webp)` }} />
          <div>
            <p className="pull">{t.concept.pull}</p>
            <div className="pull-meta">
              <div>
                <span className="eyebrow">{t.concept.meta1Label}</span>
                <span className="body">{t.concept.meta1Val}</span>
              </div>
              <div>
                <span className="eyebrow">{t.concept.meta2Label}</span>
                <span className="body">{t.concept.meta2Val}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Location({ t }) {
  return (
    <section id="location" className="section surface" data-screen-label="Location">
      <div className="wrap">
        <SectionHead plate={t.location.plate} title={t.location.title} sub={t.location.blurb} />
        <div className="location-grid">
          <div className="location-map" aria-label={t.location.mapLabel}>
            <div className="map-img" style={{ backgroundImage: `url(media/location-dubai-skyline.webp)` }} />
            <div className="crosshair"></div>
            <div className="pin" aria-hidden="true"></div>
            <div className="map-label">{t.location.mapLabel}</div>
          </div>
          <div>
            <ol className="poi-list">
              {t.location.poi.map((p, i) => (
                <li key={i}>
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="name">{p.name}</span>
                  <span className="dur">{p.dur}</span>
                </li>
              ))}
            </ol>
            <p className="small" style={{ marginTop: 24 }}>{t.location.note}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Amenities({ t, platesOn }) {
  return (
    <section id="amenities" className={`section ${platesOn ? '' : 'plates-off'}`} data-screen-label="Amenities">
      <div className="wrap">
        <SectionHead plate={t.amenities.plate} title={t.amenities.title} sub={t.amenities.sub} />
        <div className="plate-grid">
          {t.amenities.items.map((it, i) => (
            <div className="plate-card" key={i}>
              <div className="frame">
                <div className="img" style={{ backgroundImage: `url(media/${it.img})` }} />
              </div>
              <div className="head">
                <span className="name">{it.name}</span>
                <span className="plate-no">{`P.${String(i + 1).padStart(2, '0')}`}</span>
              </div>
              <p className="cap">{it.cap}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Residences({ t, onCta }) {
  return (
    <section id="residences" className="section surface" data-screen-label="Residences">
      <div className="wrap">
        <SectionHead plate={t.residences.plate} title={t.residences.title} sub={t.residences.sub} />
        <div className="res-block">
          <div className="res-img" style={{ backgroundImage: `url(media/interior-lobby-main.webp)` }} />
          <div>
            <div className="res-list">
              {t.residences.rows.map((r, i) => (
                <div className="res-row" key={i}>
                  <span className="no">{r.no}</span>
                  <div>
                    <div className="title">{r.title}</div>
                    <div className="note">{r.note}</div>
                  </div>
                  <span className="price">{r.price}</span>
                </div>
              ))}
            </div>
            <div className="disclosure">
              <strong>Accuracy.</strong> {t.residences.disclosure}
            </div>
            <div style={{ marginTop: 24 }}>
              <button className="btn" onClick={onCta}>{t.nav.cta} <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Gallery({ t, layout }) {
  const items = [
    { src: 'render-object1-main.webp',     lbl: 'Pl. 01 · Tower at dusk',       cls: 'g-1' },
    { src: 'amenity-pool-night.webp',      lbl: 'Pl. 02 · Pool deck, evening',  cls: 'g-2' },
    { src: 'interior-lobby-main.webp',     lbl: 'Pl. 03 · W1NNER lobby',        cls: 'g-3' },
    { src: 'amenity-balcony-view.webp',    lbl: 'Pl. 04 · Balcony · sunset',    cls: 'g-4' },
    { src: 'render-aerial-air-view.webp',  lbl: 'Pl. 05 · Aerial · podium',     cls: 'g-5' },
    { src: 'amenity-pool-view1.webp',      lbl: 'Pl. 06 · Pool · daylight',     cls: 'g-6' },
    { src: 'render-podium-top.webp',       lbl: 'Pl. 07 · Podium garden',       cls: 'g-7' },
  ];
  return (
    <section id="gallery" className="section" data-screen-label="Gallery">
      <div className="wrap">
        <SectionHead plate={t.gallery.plate} title={t.gallery.title} sub={t.gallery.sub} />
        <div className={`gallery-mosaic ${layout === 'uniform' ? 'gallery-uniform' : ''}`}>
          {items.map((it, i) => (
            <div className={`g ${it.cls}`} key={i}>
              <div className="img" style={{ backgroundImage: `url(media/${it.src})` }} />
              <span className="lbl">{it.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Momentum({ t }) {
  return (
    <section className="section dark tight" data-screen-label="Momentum">
      <div className="wrap">
        <SectionHead plate={t.momentum.eyebrow} title={t.momentum.title} />
        <div className="momentum">
          {t.momentum.cells.map((c, i) => (
            <div className="cell" key={i}>
              <div className="stat">{c.stat}</div>
              <div className="lbl">{c.lbl}</div>
            </div>
          ))}
        </div>
        <p className="small" style={{ color: 'rgba(255,255,255,0.55)', marginTop: 24 }}>{t.momentum.attr}</p>
      </div>
    </section>
  );
}

function Contact({ t }) {
  return (
    <section id="contact" className="section surface" data-screen-label="Contact">
      <div className="wrap">
        <SectionHead plate={t.contact.plate} title={t.contact.title} />
        <div className="location-grid">
          <div className="location-map">
            <div className="map-img" style={{ backgroundImage: `url(media/location-dubai-skyline.webp)` }} />
            <div className="crosshair"></div>
            <div className="pin" style={{ top: '46%', left: '62%' }} aria-hidden="true"></div>
            <div className="map-label">Downtown Dubai · Emaar Square</div>
          </div>
          <div>
            <div className="poi-list" style={{ display: 'grid', gap: 0 }}>
              <div style={{ padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Address</div>
                <div className="body" style={{ whiteSpace: 'pre-line' }}>{t.contact.address}</div>
              </div>
              <div style={{ padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{t.contact.phoneLbl}</div>
                <a className="body" href="tel:+971523810148" style={{ display: 'inline-block' }}>{t.contact.phone}</a>
              </div>
              <div style={{ padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{t.contact.hoursLbl}</div>
                <div className="body">{t.contact.hours} <span className="small">[CONFIRM]</span></div>
              </div>
              <div style={{ padding: '20px 0' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{t.contact.emailLbl}</div>
                <div className="body">{t.contact.email} <span className="small">[CONFIRM]</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col">
            <img src="media/logo-object-1.svg" alt="Object 1" style={{ height: 18, width: 'auto' }} />
            <div className="body" style={{ marginTop: 8, maxWidth: '26ch' }}>{t.footer.tagline}</div>
          </div>
          <div className="footer-col">
            <h4>{t.footer.colProjects}</h4>
            {t.footer.projects.map((p, i) => <a key={i} href="#">{p}</a>)}
          </div>
          <div className="footer-col">
            <h4>{t.footer.colCommunities}</h4>
            {t.footer.communities.map((c, i) => <a key={i} href="#">{c}</a>)}
          </div>
          <div className="footer-col">
            <h4>{t.footer.colCompany}</h4>
            {t.footer.company.map((c, i) => <a key={i} href="#">{c}</a>)}
          </div>
        </div>

        <div className="footer-mark" aria-hidden="true">
          Object&nbsp;<span style={{ fontWeight: 200 }}>1</span>
        </div>

        <div className="footer-bottom">
          <span>{t.footer.legal}</span>
          <span>v.01 · {new Date().getFullYear()}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Concept, Location, Amenities, Residences, Gallery, Momentum, Contact, Footer, SectionHead });