/* Sobha Realty microsite — sections (chrome + content blocks). */

const D = window.SR_DATA;

/* ---------- Top bar / nav / locale ---------- */
function TopBar({ locale, setLocale, openRegister, t }) {
  const [active, setActive] = React.useState("overview");
  React.useEffect(() => {
    const ids = ["overview","craftsmanship","residences","amenities","communities","contact"];
    const onScroll = () => {
      const y = window.scrollY + 120;
      let cur = active;
      for (const id of ids){
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive:true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className="topbar">
      <div className="container topbar-inner">
        <a className="brand" href="#top">
          <div className="brand-mark" style={{position:"relative"}}>
            S<span className="dot"></span>
          </div>
          <div className="brand-text">
            <b>Sobha Realty</b>
            <span>Campaign · Sobha One</span>
          </div>
        </a>

        <nav className="nav">
          <a href="#overview"      className={active==="overview"?"active":""}>Overview</a>
          <a href="#craftsmanship" className={active==="craftsmanship"?"active":""}>Craftsmanship</a>
          <a href="#residences"    className={active==="residences"?"active":""}>Residences</a>
          <a href="#amenities"     className={active==="amenities"?"active":""}>Amenities</a>
          <a href="#communities"   className={active==="communities"?"active":""}>Communities</a>
          <a href="#contact"       className={active==="contact"?"active":""}>Contact</a>
        </nav>

        <div className="top-right">
          <div className="locale" role="tablist" aria-label="Language">
            {D.locales.map(l => (
              <button key={l}
                      className={l===locale?"active":""}
                      onClick={()=>setLocale(l)}>{l}</button>
            ))}
          </div>
          <button className="btn btn-primary btn-sm" onClick={openRegister}>
            {t.register} <span className="arrow"></span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ openRegister, openBrochure, openViewing, t }) {
  const f = D.featured;
  const [tick, setTick] = React.useState(0);
  React.useEffect(()=>{
    const id = setInterval(()=>setTick(x=>(x+1)%D.marquee.length), 3200);
    return ()=>clearInterval(id);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-media" style={{ backgroundImage:`url(${f.heroImg})` }}></div>

      <div className="hero-marquee" key={tick}>
        {D.marquee[tick]}
      </div>

      <div className="container hero-inner">
        <div className="eyebrow hero-eyebrow">{f.eyebrow}</div>
        <h1 className="h-display hero-title" style={{marginTop:18}}>
          {t.heroLead} <em>{t.heroEm}</em>
        </h1>

        <div className="hero-meta" style={{marginTop:34}}>
          <p className="hero-sub">{f.sub}</p>
          <div className="hero-status">
            {f.statusRow.map(r => (
              <div className="col" key={r.k}>
                <div className="label">{r.k}</div>
                <div className="val">{r.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-cta">
          <button className="btn btn-primary btn-wide" onClick={openRegister}>
            {t.register} <span className="arrow"></span>
          </button>
          <button className="btn btn-ghost btn-wide" onClick={openBrochure}>
            {t.brochure}
          </button>
          <button className="btn btn-ghost btn-wide" onClick={openViewing}>
            {t.reserve}
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Credibility band ---------- */
function CredibilityBand() {
  return (
    <section className="cred tight" id="overview" style={{padding:0}}>
      <div className="container">
        <div className="cred-inner">
          {D.credibility.map((c,i)=>(
            <div className="cred-cell" key={i}>
              <div className="num">{c.n}</div>
              <div className="lbl">{c.l}</div>
              <div className="src">{c.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Narrative split (location / community story) ---------- */
function Narrative() {
  return (
    <section className="tight">
      <div className="container">
        <div className="split">
          <div>
            <div className="eyebrow">A community within a community</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"14ch"}}>
              Adjacent to <em>Sobha Hartland</em>, framed by the Ras Al Khor sanctuary.
            </h2>
            <p className="lead" style={{marginTop:22}}>
              Sobha One sits at the inflection of MBR City and Ras Al Khor — the
              flamingo-rich wildlife sanctuary on one shoulder, Downtown skyline on the
              other. Drive times, station proximity, and school catchment confirmed
              against the live sales gallery briefing.
            </p>
            <div className="mt-24" style={{display:"flex", gap:16, flexWrap:"wrap"}}>
              <span className="confirm-tag">Map coords · confirm</span>
              <span className="confirm-tag">Drive times · confirm</span>
              <span className="confirm-tag">RERA / DLD · confirm</span>
            </div>

            <div style={{
              display:"grid", gridTemplateColumns:"1fr 1fr", gap:24,
              marginTop:36, paddingTop:28, borderTop:"1px solid var(--border)"
            }}>
              <div>
                <div className="fine">Group since</div>
                <div className="num" style={{fontSize:34}}>1976</div>
                <div className="body" style={{fontSize:12.5, marginTop:4}}>Founded by PNC Menon.</div>
              </div>
              <div>
                <div className="fine">Dubai since</div>
                <div className="num" style={{fontSize:34}}>2003</div>
                <div className="body" style={{fontSize:12.5, marginTop:4}}>Sobha Hartland launched 2012.</div>
              </div>
            </div>
          </div>

          <div className="plate" style={{aspectRatio:"4 / 5"}}>
            <img src="media/render-sobha-one-morning.webp" alt="Sobha One — morning render" />
            <div className="caption">Morning render · Sobha One · subject confirmation</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Craftsmanship / backward integration ---------- */
function Craftsmanship() {
  return (
    <section id="craftsmanship">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Backward integration</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"16ch"}}>
              We design, manufacture, build and finish <em>under one roof.</em>
            </h2>
          </div>
          <p className="lead right">
            The Sobha model keeps design, materials, construction, and aftercare inside
            the group — a structure documented in a Harvard Business School case study
            and the basis of the Sobha quality standard.
          </p>
        </div>

        <div className="plate" style={{aspectRatio:"21 / 9"}}>
          <img src="media/brand-craftsmanship.webp" alt="Sobha craftsmanship" />
          <div className="caption">Brand · craftsmanship</div>
        </div>

        <div className="pillars">
          {D.pillars.map(p => (
            <div className="pillar" key={p.step}>
              <div className="step">{p.step}</div>
              <div className="pillar-line"></div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Residences (tabbed) ---------- */
function Residences({ openBrochure, openViewing, t }) {
  const [tab, setTab] = React.useState(D.residences[1].id); // 2BR default
  const cur = D.residences.find(r => r.id===tab);

  return (
    <section id="residences" style={{background:"var(--bg-deep)", borderTop:"1px solid var(--border)", borderBottom:"1px solid var(--border)"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Residences</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"18ch"}}>
              Concepts ranged from <em>one bedroom</em> to wrap-balcony duplex.
            </h2>
          </div>
          <p className="lead right">
            Floor plates, layouts and finish specifications are shown as concept and
            require confirmation with the Sobha Hartland sales gallery before
            publication.
          </p>
        </div>

        <div className="res-tabs">
          {D.residences.map(r => (
            <button key={r.id} className={r.id===tab?"active":""} onClick={()=>setTab(r.id)}>
              {r.label}
            </button>
          ))}
        </div>

        <div className="res-panel">
          <div className="res-img plate">
            <img src={cur.img} alt={cur.label} />
            <div className="caption">{cur.caption}</div>
          </div>

          <div>
            <div className="h-2" style={{marginBottom:6}}>{cur.label} residence</div>
            <p className="body" style={{maxWidth:"42ch"}}>
              An open layout with floor-to-ceiling glazing, dual-aspect light, and the
              Sobha finish package. Renders shown for concept only.
            </p>
            <div className="res-spec">
              {cur.spec.map(([k,v])=>(
                <div className="row" key={k}>
                  <span className="k">{k}</span>
                  <span className="v">{v.startsWith("[Confirm") ? <em>{v.replace(/[\[\]]/g,"")}</em> : v}</span>
                </div>
              ))}
            </div>

            <div className="mt-24" style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <button className="btn btn-primary" onClick={openBrochure}>
                {t.brochure} <span className="arrow"></span>
              </button>
              <button className="btn btn-ghost" onClick={openViewing}>
                {t.reserve}
              </button>
            </div>
            <div className="consent-note">
              Sizes / starting prices not published until verified with the sales gallery.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Amenities — image mosaic ---------- */
function Amenities() {
  return (
    <section id="amenities">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Amenities</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"16ch"}}>
              An <em>18-storey sky garden</em> and a resort podium.
            </h2>
          </div>
          <p className="lead right">
            Renders shown depict the concept podium and central sky garden. Final
            amenity list and operator partnerships to be confirmed with the sales
            gallery.
          </p>
        </div>

        <div className="amenity-grid">
          {D.amenities.map((a,i)=>(
            <div className={"am "+a.cls} key={i}>
              <img src={a.img} alt={a.title} loading="lazy" />
              <div className="label">
                <b>{a.title}</b>
                <span>{a.sub}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Legacy / brand block (dark) ---------- */
function Legacy() {
  return (
    <section className="legacy">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">The Sobha standard</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"18ch"}}>
              FY 2025 — <em>AED 30 billion sales</em>, GRESB 4-Star, fourteen UAE developments.
            </h2>
          </div>
          <p className="lead right">
            Latest official Sobha Realty figures. AED 8 billion of FY25 sales came from
            Downtown UAQ and Sobha Siniya Island. Attribute to Sobha and GRESB 2025.
          </p>
        </div>

        <div className="cred">
          <div className="cred-inner" style={{padding:0}}>
            {D.credibility.map((c,i)=>(
              <div className="cred-cell" key={i}>
                <div className="num">{c.n}</div>
                <div className="lbl">{c.l}</div>
                <div className="src">{c.s}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="legacy-grid">
          {D.legacy.map((l,i)=>(
            <div className="legacy-card" key={i}>
              <img src={l.img} alt={l.ttl} />
              <div className="overlay"></div>
              <div className="ttl"><span>{l.eyebrow}</span>{l.ttl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Communities catalog ---------- */
function Communities() {
  return (
    <section id="communities">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Communities</div>
            <h2 className="h-1" style={{marginTop:16, maxWidth:"16ch"}}>
              Master-planned communities across <em>Dubai, Abu Dhabi and Umm Al Quwain</em>.
            </h2>
          </div>
          <p className="lead right">
            Each community microsite is generated from this template — same chrome,
            its own renders, locale set, and CRM routing. Status of each project to be
            confirmed against the live sales gallery before publication.
          </p>
        </div>

        <div className="community-grid">
          {D.communities.map(c => (
            <a className="c-card" href={"#" + c.slug} key={c.slug} onClick={(e)=>e.preventDefault()}>
              <div className="img"><img src={c.img} alt={c.name} loading="lazy" /></div>
              <div className="body-pad">
                <span className="loc">{c.loc}</span>
                <h5>{c.name}</h5>
                <span className="desc">{c.desc}</span>
                {c.tag && <span className={"pill " + (c.tagCls||"")}>{c.tag}</span>}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function FooterBlock({ openRegister, openBroker, openViewing }) {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{color:"#fff"}}>
              <div className="brand-mark" style={{position:"relative", background:"#fff", color:"var(--ink)"}}>
                S<span className="dot"></span>
              </div>
              <div className="brand-text">
                <b style={{color:"#fff"}}>Sobha Realty</b>
                <span style={{color:"rgba(255,255,255,.5)"}}>Campaign microsite · Sobha One</span>
              </div>
            </div>
            <p className="signin" style={{marginTop:24}}>
              Homes crafted,<br />not assembled.
            </p>
            <div style={{display:"flex", gap:10}}>
              <button className="btn btn-primary btn-sm" onClick={openRegister}>Register interest <span className="arrow"></span></button>
              <button className="btn btn-ghost btn-sm" onClick={openViewing} style={{color:"#fff", borderColor:"rgba(255,255,255,.25)"}}>Book viewing</button>
            </div>
          </div>

          <div>
            <h6>Communities</h6>
            <ul>
              <li><a href="#">Sobha Hartland II</a></li>
              <li><a href="#">Sobha Sanctuary</a></li>
              <li><a href="#">Sobha One</a></li>
              <li><a href="#">Sobha SeaHaven</a></li>
              <li><a href="#">Downtown UAQ</a></li>
            </ul>
          </div>

          <div>
            <h6>Routes</h6>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault();openRegister();}}>Register interest</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();openBroker();}}>Channel partners</a></li>
              <li><a href="#">Customer service</a></li>
              <li><a href="#">Investor relations</a></li>
              <li><a href="#">App download · confirm</a></li>
            </ul>
          </div>

          <div>
            <h6>About</h6>
            <ul>
              <li><a href="#">Leadership</a></li>
              <li><a href="#">Sustainability · GRESB 4-Star</a></li>
              <li><a href="#">Media center</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press releases</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-phone-row">
          <div className="cell">
            <span className="lbl">Sales</span>
            <span className="val">{D.phones.sales}</span>
          </div>
          <div className="cell">
            <span className="lbl">Customer · WhatsApp</span>
            <span className="val">{D.phones.customer}</span>
          </div>
          <div className="cell">
            <span className="lbl">Careers (not sales)</span>
            <span className="val">{D.phones.careers}</span>
          </div>
        </div>

        <div className="footer-bot">
          <span>© Sobha Realty — campaign microsite prototype</span>
          <span>Locales: EN · AR · RU · ZH</span>
          <span>UAE / GCC + international</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- WhatsApp / app FAB ---------- */
function FAB({ t }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="fab">
      {open && (
        <div style={{
          background:"#fff",
          border:"1px solid var(--border)",
          padding:"12px 14px",
          borderRadius:8,
          boxShadow:"var(--shadow-2)",
          maxWidth:240,
          fontSize:12.5,
          lineHeight:1.5
        }}>
          <div className="fine" style={{marginBottom:6}}>Live · Sobha team</div>
          We respond on WhatsApp during sales-gallery hours. Customer line: {D.phones.customer}.
        </div>
      )}
      <button className="fab-btn"
              onClick={()=>setOpen(o=>!o)}
              aria-label="WhatsApp">
        <span className="wa-icon">✓</span>
        {t.whatsapp}
      </button>
    </div>
  );
}

Object.assign(window, {
  TopBar, Hero, CredibilityBand, Narrative, Craftsmanship,
  Residences, Amenities, Legacy, Communities, FooterBlock, FAB
});