/* Aerovista — page components */
const D2 = window.AV_DATA;

/* ===================== HOME ===================== */
function PageHome({ setPage, onEnquire, lang }) {
  const t = D2.i18n[lang];

  return (
    <div className="page-fade" data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero">
        <div className="hero__img" style={{backgroundImage:"url(media/aircraft-owned-img3488.webp)"}}></div>
        <div className="hero__veil"></div>
        <span className="tick tl"></span><span className="tick tr"></span>
        <span className="tick bl"></span><span className="tick br"></span>
        <div className="wrap hero__inner">
          <div className="hero__top">
            <span className="chip chip--brand">B2B · Asset Manager</span>
            <span className="chip">Not consumer charter — see Fly2Sky</span>
          </div>
          <div className="hero__body">
            <div className="hero__kicker">
              <span className="eyebrow" style={{color:"rgba(246,248,250,.7)"}}>
                <span className="dot">●</span> {t.hero_eyebrow}
              </span>
            </div>
            <h1 className="hero__h1">
              {t.hero_title_pre}<em>{t.hero_title_em}</em>{t.hero_title_post}
            </h1>
            <p className="hero__sub">{t.hero_sub}</p>
            <div className="hero__cta">
              <button className="btn btn--primary" onClick={()=>onEnquire("leasing")}>
                {t.cta_quote} <Arr />
              </button>
              <button className="btn btn--ghost-dark" onClick={()=>setPage("services")}>
                {t.cta_explore} <Arr />
              </button>
            </div>

            <div className="hero__rail">
              <div>
                <div className="label">Founded</div>
                <div className="val">1999</div>
                <div className="src">UAE · self-declared</div>
              </div>
              <div>
                <div className="label">Fleet</div>
                <div className="val">5 <span style={{fontSize:14, opacity:.5}}>aircraft</span></div>
                <div className="src">Wikipedia · Dec 2022</div>
              </div>
              <div>
                <div className="label">Engineering</div>
                <div className="val">EASA Part-145</div>
                <div className="src">Group · Sofia · Plovdiv</div>
              </div>
              <div>
                <div className="label">Cargo target</div>
                <div className="val">4×&nbsp;A321P2F</div>
                <div className="src">JV · Petrus Aerovista</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={["A320 Family", "Operating Lease", "Engine Trading", "EASA Part-145", "A321P2F Cargo", "CAMO", "Sale-Leaseback", "Asset Management"]} />

      {/* SERVICES */}
      <section className="section" id="services-anchor">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:40, alignItems:"end", marginBottom:48}}>
            <div>
              <div className="eyebrow"><span className="dot">●</span> {t.services_eyebrow}</div>
              <h2 className="h2" style={{marginTop:14}}>{t.services_h}</h2>
            </div>
            <p className="lede" style={{maxWidth:"60ch", justifySelf:"end"}}>{t.services_sub}</p>
          </div>
          <div className="svc-grid">
            {D2.services.map((s) => (
              <div key={s.id} className="svc" onClick={()=>setPage("svc:"+s.id)}>
                <div className="svc__num"><em>{s.num}</em> / 04</div>
                <div className="svc__name">{s.name}</div>
                <div className="svc__desc">{s.one}</div>
                <div className="svc__list">
                  {s.list.map((x,i)=><div className="row" key={i}>{x}</div>)}
                </div>
                <a className="svc__arrow">Read more →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRACK RECORD — dark */}
      <section className="section surf-dark">
        <div className="wrap">
          <div className="tr">
            <div>
              <div className="eyebrow"><span className="dot">●</span> {t.track_eyebrow}</div>
              <h2 className="h2" style={{marginTop:14, marginBottom:24}}>{t.track_h}</h2>
              <p className="lede">{t.track_sub}</p>
              <div style={{marginTop:32, display:"flex", flexWrap:"wrap", gap:8}}>
                {["Avolon", "GA Telesis", "Deucalion", "SkyUp", "GlobalX", "Magellan", "Petrus Aviation", "Fly2Sky"].map(x => (
                  <span key={x} className="chip">{x}</span>
                ))}
              </div>
              <p className="meta" style={{marginTop:24, opacity:.7}}>
                ⓘ Listed as text — counterparty logo rights to be confirmed before display.
              </p>
            </div>
            <div className="tr__deals">
              {D2.deals.map((d, i) => (
                <div key={i} className="tr__deal">
                  <span className="yr">{d.yr}</span>
                  <span className="who">{d.who}</span>
                  <span className="what">{d.what}</span>
                  <span className="arr">↗</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="section--tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Single source of truth · attributed</div>
          <h3 className="h3" style={{marginTop:14, marginBottom:32, maxWidth:"40ch"}}>
            Replacing the legacy site's conflicting counters with one verifiable set.
          </h3>
          <StatStrip stats={D2.stats} />
        </div>
      </section>

      {/* FLEET TEASER */}
      <section className="section" style={{background:"var(--mist)"}}>
        <div className="wrap">
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"end", marginBottom:36, flexWrap:"wrap", gap:20}}>
            <div>
              <div className="eyebrow"><span className="dot">●</span> {t.fleet_eyebrow}</div>
              <h2 className="h2" style={{marginTop:14}}>{t.fleet_h}</h2>
            </div>
            <button className="btn btn--ghost" onClick={()=>setPage("fleet")}>See full fleet <Arr/></button>
          </div>
          <p className="lede" style={{maxWidth:"68ch", marginBottom:36}}>{t.fleet_sub}</p>
          <div className="fleet">
            {D2.fleet.map((f, i) => (
              <div key={i} className="fleet__card">
                <div className="fleet__img" style={{backgroundImage:`url(${f.img})`}}></div>
                <span className={"chip fleet__role " + (f.cat==="cargo"?"chip--brand":"chip--ink")}>{f.role}</span>
                <div className="fleet__body">
                  <div className="fleet__sub">{f.eraNote}</div>
                  <div className="fleet__type">{f.type}</div>
                  <div style={{marginTop:6, marginBottom:6, fontFamily:"var(--f-mono)", fontSize:12, color:"var(--muted)"}}>
                    Qty <span style={{color:"var(--ink)", fontWeight:600}}>{f.qty}</span>
                  </div>
                  {f.rows.map(([k,v]) => (
                    <div key={k} className="fleet__row"><span className="k">{k}</span><span>{v}</span></div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <p className="meta" style={{marginTop:24, color:"var(--muted)"}}>
            ⓘ Fleet of 5 attributed to Wikipedia (Dec 2022). Specific MSNs / tail numbers withheld until counterparty rights are cleared.
          </p>
        </div>
      </section>

      {/* GROUP */}
      <section className="section">
        <div className="wrap">
          <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:40, alignItems:"end", marginBottom:48}}>
            <div>
              <div className="eyebrow"><span className="dot">●</span> {t.group_eyebrow}</div>
              <h2 className="h2" style={{marginTop:14}}>{t.group_h}</h2>
            </div>
            <p className="lede" style={{maxWidth:"60ch", justifySelf:"end"}}>{t.group_sub}</p>
          </div>
          <div className="group">
            {D2.group.map((g, i) => (
              <div key={i} className={"group__cell " + (g.parent ? "group__cell--parent" : "")}>
                <div className="group__role">{g.role}</div>
                <div className="group__name">{g.name}</div>
                <div className="group__loc">↳ {g.loc}</div>
                <div className="group__desc">{g.desc}</div>
                <a className="group__link" href="#" onClick={(e)=>e.preventDefault()}>
                  <span>{g.href}</span><span>↗</span>
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT TEASER */}
      <section className="section surf-dark">
        <div className="wrap">
          <div className="split">
            <div>
              <div className="eyebrow" style={{color:"rgba(246,248,250,.65)"}}>
                <span className="dot">●</span> Conversion
              </div>
              <h2 className="h2" style={{marginTop:14, marginBottom:24}}>{t.contact_h}</h2>
              <p className="lede">
                Direct B2B enquiry. No price list, no booking funnel. Every leasing, trading or
                management transaction is structured around the counterparty.
              </p>
              <div style={{marginTop:36, display:"flex", flexWrap:"wrap", gap:12}}>
                <button className="btn btn--primary" onClick={()=>onEnquire()}>Request a quote <Arr/></button>
                <a className="btn btn--ghost-dark" href={D2.contact.phoneHref}>{t.cta_call} <Arr/></a>
              </div>
            </div>
            <div>
              <div style={{borderTop:"1px solid rgba(255,255,255,.16)", paddingTop:24, display:"grid", gap:20}}>
                <div>
                  <div className="meta" style={{color:"rgba(246,248,250,.5)"}}>Sales</div>
                  <div className="h3" style={{marginTop:6}}>{D2.contact.salesEmail}</div>
                </div>
                <div>
                  <div className="meta" style={{color:"rgba(246,248,250,.5)"}}>Dubai office</div>
                  <div className="h3" style={{marginTop:6}}>{D2.contact.phone}</div>
                </div>
                <div>
                  <div className="meta" style={{color:"rgba(246,248,250,.5)"}}>Address</div>
                  <div style={{fontFamily:"var(--f-display)", fontSize:20, lineHeight:1.4, marginTop:6}}>
                    {D2.contact.address.map((l,i)=><div key={i}>{l}</div>)}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== SERVICES HUB ===================== */
function PageServices({ setPage, onEnquire }) {
  return (
    <div className="page-fade" data-screen-label="02 Services Hub">
      <section className="surf-dark" style={{paddingBlock:"72px 56px"}}>
        <div className="wrap">
          <div className="svchero__crumb">
            <span>Home</span><span className="sep">/</span><span className="here">Services</span>
          </div>
          <h1 className="svchero__h">Services.</h1>
          <p className="lede" style={{maxWidth:"60ch"}}>
            Four disciplines. One asset class — the Airbus A320 family, plus engines.
            Every transaction is bespoke and fully unbundled.
          </p>
        </div>
      </section>
      <section className="section">
        <div className="wrap" style={{display:"grid", gap:24}}>
          {D2.services.map((s) => (
            <div key={s.id} onClick={()=>setPage("svc:"+s.id)} style={{
              display:"grid", gridTemplateColumns:"160px 1fr 1fr auto",
              gap:32, alignItems:"center",
              padding:"32px 0", borderTop:"1px solid var(--line)",
              cursor:"pointer"
            }}>
              <div className="meta"><em style={{color:"var(--brand)", fontStyle:"normal"}}>{s.num}</em> / 04</div>
              <div className="h2" style={{fontSize:"clamp(28px, 3vw, 44px)"}}>{s.name}</div>
              <div style={{color:"var(--ink-2)"}}>{s.lede}</div>
              <button className="btn btn--ghost">Enter <Arr/></button>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}></div>
        </div>
      </section>
    </div>
  );
}

/* ===================== SERVICE DEEP PAGE ===================== */
function PageService({ id, setPage, onEnquire }) {
  const s = D2.services.find(x => x.id === id);
  if (!s) return null;
  return (
    <div className="page-fade" data-screen-label={`02 Services / ${s.name}`}>
      <section className="svchero">
        <div className="wrap">
          <div className="svchero__crumb">
            <a onClick={(e)=>{e.preventDefault(); setPage("home");}} href="#">Home</a>
            <span className="sep">/</span>
            <a onClick={(e)=>{e.preventDefault(); setPage("services");}} href="#">Services</a>
            <span className="sep">/</span><span className="here">{s.name}</span>
          </div>
          <h1 className="svchero__h">{s.name}.</h1>
          <p className="svchero__lede">{s.lede}</p>
          <div style={{marginTop:32, display:"flex", gap:12}}>
            <button className="btn btn--primary" onClick={()=>onEnquire(s.id)}>Enquire — {s.name} <Arr/></button>
            <a className="btn btn--ghost-dark" href={D2.contact.phoneHref}>Call Dubai <Arr/></a>
          </div>
          <div className="svchero__img" style={{backgroundImage:`url(${s.hero})`}}></div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Structure</div>
          <h2 className="h2" style={{marginTop:14, marginBottom:32, maxWidth:"24ch"}}>How {s.name.toLowerCase()} works at Aerovista.</h2>
          <div className="prod">
            {s.products.map((p, i) => (
              <div key={i} className="prod__card">
                <div className="tag">{p.tag}</div>
                <h3>{p.name}</h3>
                <p style={{color:"var(--ink-2)", fontSize:15.5, lineHeight:1.55}}>{p.desc}</p>
                <div className="struct" style={{marginTop:"auto"}}>
                  {p.struct.map((kv, j) => (
                    <div key={j}>
                      <div className="k">{kv.k}</div>
                      <div className="v">{kv.v}</div>
                    </div>
                  ))}
                </div>
                <button className="btn btn--ghost" onClick={()=>onEnquire(s.id)} style={{marginTop:8}}>Enquire <Arr/></button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section--tight surf-dark">
        <div className="wrap">
          <div className="split">
            <div>
              <div className="eyebrow" style={{color:"rgba(246,248,250,.65)"}}><span className="dot">●</span> Conversion</div>
              <h2 className="h2" style={{marginTop:14, marginBottom:18}}>No prices. No rates. No asset values.</h2>
              <p className="lede">
                Aerovista does not publish a price list. Every {s.name.toLowerCase()} engagement is
                bespoke, unbundled, and structured around the counterparty's budget, risk profile and timeline.
              </p>
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:12, alignItems:"start"}}>
              <button className="btn btn--primary" onClick={()=>onEnquire(s.id)}>Request a quote <Arr/></button>
              <a className="btn btn--ghost-dark" href={"mailto:"+D2.contact.salesEmail}>{D2.contact.salesEmail} <Arr/></a>
              <a className="btn btn--ghost-dark" href={D2.contact.phoneHref}>{D2.contact.phone} <Arr/></a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== FLEET ===================== */
function PageFleet({ onEnquire }) {
  const [filter, setFilter] = useState("all");
  const filtered = D2.fleet.filter(f => filter === "all" || f.cat === filter);
  return (
    <div className="page-fade" data-screen-label="03 Fleet">
      <section className="surf-dark" style={{paddingBlock:"72px 0"}}>
        <div className="wrap">
          <div className="svchero__crumb">
            <span>Home</span><span className="sep">/</span><span className="here">Fleet</span>
          </div>
          <h1 className="svchero__h">Fleet.</h1>
          <p className="lede" style={{maxWidth:"68ch"}}>
            Mid-life narrow-body passenger aircraft across the A320 family, plus a growing A321P2F freighter line
            run through the Petrus Aerovista A321 Holdings JV.
          </p>
          <div style={{marginTop:36, marginBottom:0, paddingBottom:56, display:"flex", gap:8}}>
            {[["all","All"],["passenger","Passenger"],["cargo","Cargo"]].map(([id, l]) => (
              <button key={id} className={"chip "+(filter===id?"chip--brand":"")} onClick={()=>setFilter(id)}
                style={{padding:"8px 16px", cursor:"pointer"}}>
                {l}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="fleet">
            {filtered.map((f, i) => (
              <div key={i} className="fleet__card">
                <div className="fleet__img" style={{backgroundImage:`url(${f.img})`, aspectRatio:"3/2"}}></div>
                <span className={"chip fleet__role " + (f.cat==="cargo"?"chip--brand":"chip--ink")}>{f.role}</span>
                <div className="fleet__body">
                  <div className="fleet__sub">{f.eraNote}</div>
                  <div className="fleet__type">{f.type}</div>
                  <div style={{marginBottom:6, fontFamily:"var(--f-mono)", fontSize:12, color:"var(--muted)"}}>
                    Quantity <span style={{color:"var(--ink)", fontWeight:600}}>{f.qty}</span>
                  </div>
                  {f.rows.map(([k,v]) => (
                    <div key={k} className="fleet__row"><span className="k">{k}</span><span>{v}</span></div>
                  ))}
                  <button className="btn btn--ghost" style={{marginTop:16, alignSelf:"start"}} onClick={()=>onEnquire(f.cat==="cargo"?"trading":"leasing")}>Enquire <Arr/></button>
                </div>
              </div>
            ))}
          </div>

          <div style={{marginTop:64, padding:"32px", border:"1px solid var(--line)", background:"#fff"}}>
            <div className="eyebrow"><span className="dot">●</span> Historical fleet · attributed Wikipedia</div>
            <h3 className="h3" style={{marginTop:12, marginBottom:18, maxWidth:"36ch"}}>
              Operator-era heritage (1999 → 2010). Not current.
            </h3>
            <div style={{display:"flex", flexWrap:"wrap", gap:8}}>
              {["3× B737-300", "2× B737-500", "1× ERJ-145", "1× L-410 Turbolet", "1× ATR-72", "1× King Air 350"].map(x => (
                <span key={x} className="chip">{x}</span>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== GROUP ===================== */
function PageGroup() {
  return (
    <div className="page-fade" data-screen-label="04 Group">
      <section className="surf-dark" style={{paddingBlock:"72px 56px"}}>
        <div className="wrap">
          <div className="svchero__crumb"><span>Home</span><span className="sep">/</span><span className="here">Group</span></div>
          <h1 className="svchero__h">Since 1999.</h1>
          <p className="lede" style={{maxWidth:"68ch"}}>
            Originally a Boeing 737 Classic operator out of the UAE; a lessor and manager since 2010 on the Airbus
            A320 family. Today: four group entities, four jurisdictions, one operator network.
          </p>
        </div>
      </section>

      {/* Timeline */}
      <section className="section--tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Timeline</div>
          <h2 className="h2" style={{marginTop:14, marginBottom:36}}>From operator to asset manager.</h2>
          <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:16, borderTop:"1px solid var(--line)"}}>
            {[
              ["1999", "Founded in UAE", "Spare-parts & components provider."],
              ["2000s", "Operator era", "B737 Classic fleet · AOC · ~2,000 charter flights."],
              ["2010", "Pivot", "Operator → leasing & management. A320-family focus."],
              ["2010s", "Group built", "Engineering (Sofia) · Fly2Sky · 3Green."],
              ["2022+", "Cargo line", "A321P2F via Petrus Aerovista JV."],
            ].map(([yr, h, d], i) => (
              <div key={i} style={{padding:"24px 0", borderRight: i<4?"1px solid var(--line)":"none", paddingRight:16, paddingLeft: i>0?16:0}}>
                <div className="num" style={{fontSize:34, color:"var(--brand)"}}>{yr}</div>
                <div style={{fontFamily:"var(--f-display)", fontSize:18, marginTop:8, letterSpacing:"-0.01em"}}>{h}</div>
                <div style={{fontSize:13, color:"var(--ink-2)", marginTop:6, lineHeight:1.5}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Group entities */}
      <section className="section--tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Group structure</div>
          <h2 className="h2" style={{marginTop:14, marginBottom:36}}>Four entities. Kept distinct.</h2>
          <div className="group">
            {D2.group.map((g, i) => (
              <div key={i} className={"group__cell " + (g.parent ? "group__cell--parent" : "")}>
                <div className="group__role">{g.role}</div>
                <div className="group__name">{g.name}</div>
                <div className="group__loc">↳ {g.loc}</div>
                <div className="group__desc">{g.desc}</div>
                <a className="group__link" href="#" onClick={(e)=>e.preventDefault()}>
                  <span>{g.href}</span><span>↗</span>
                </a>
              </div>
            ))}
          </div>
          <p className="meta" style={{marginTop:18, color:"var(--muted)"}}>
            ⓘ "Aerovista San Marino" (2016 press) has no current trace and is not listed.
          </p>
        </div>
      </section>

      {/* Leadership */}
      <section className="section" style={{background:"var(--mist)"}}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Leadership</div>
          <h2 className="h2" style={{marginTop:14, marginBottom:32}}>Seasoned aviation veterans.</h2>
          <div className="team">
            {D2.team.map((p, i) => (
              <div key={i} className="team__card">
                <div className="team__photo" style={{backgroundImage:`url(${p.photo})`}}></div>
                <div className="team__body">
                  <div className="team__name">{p.name}</div>
                  <div className="team__role">{p.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section--tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dot">●</span> Values · self-declared</div>
          <h2 className="h2" style={{marginTop:14, marginBottom:32}}>Flexibility · Co-operation · Transparency.</h2>
          <div className="vals">
            <div>
              <div className="v">Flexibility</div>
              <div className="d">"Flexibility is in our DNA — tailor-made solutions" structured around the counterparty.</div>
            </div>
            <div>
              <div className="v">Co-operation</div>
              <div className="d">A fully unbundled pricing structure. Every transaction broken down line-by-line.</div>
            </div>
            <div>
              <div className="v">Transparency</div>
              <div className="d">"Our success is intertwined with our customer." Relationship-led, not transactional.</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== NEWS ===================== */
function PageNews() {
  return (
    <div className="page-fade" data-screen-label="05 News">
      <section className="surf-dark" style={{paddingBlock:"72px 56px"}}>
        <div className="wrap">
          <div className="svchero__crumb"><span>Home</span><span className="sep">/</span><span className="here">News &amp; Press</span></div>
          <h1 className="svchero__h">Press.</h1>
          <p className="lede" style={{maxWidth:"60ch"}}>
            The full deal-by-deal archive — dated, attributed, and migrated from the legacy
            <span style={{fontFamily:"var(--f-mono)", color:"var(--brand)"}}> /presses/</span> URLs (301-mapped, SEO preserved).
          </p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="press__list">
            {D2.press.map((p, i) => (
              <div key={i} className="press__item">
                <span className="date">{p.date}</span>
                <span className="h">{p.h}</span>
                <span className="cat">{p.cat}</span>
                <span className="arr">→</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== CONTACT ===================== */
function PageContact({ onEnquire }) {
  return (
    <div className="page-fade" data-screen-label="06 Contact">
      <section className="surf-dark" style={{paddingBlock:"72px 56px"}}>
        <div className="wrap">
          <div className="svchero__crumb"><span>Home</span><span className="sep">/</span><span className="here">Contact</span></div>
          <h1 className="svchero__h">Let's do business.</h1>
          <p className="lede" style={{maxWidth:"60ch"}}>
            Direct B2B enquiry. Acknowledged within one business day from the Dubai office.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="contact">
            <div className="contact__details">
              <div className="contact__det">
                <h5>Dubai HQ</h5>
                <p>{D2.contact.address.map((l,i)=><span key={i}>{l}{i<D2.contact.address.length-1?<br/>:null}</span>)}</p>
              </div>
              <div className="contact__det">
                <h5>Phone (landline)</h5>
                <p><a href={D2.contact.phoneHref}>{D2.contact.phone}</a></p>
              </div>
              <div className="contact__det">
                <h5>Sales</h5>
                <p><a href={"mailto:"+D2.contact.salesEmail}>{D2.contact.salesEmail}</a></p>
              </div>
              <div className="contact__det">
                <h5>General</h5>
                <p><a href={"mailto:"+D2.contact.infoEmail}>{D2.contact.infoEmail}</a></p>
              </div>
              <div className="contact__det">
                <h5>LinkedIn (primary B2B)</h5>
                <p><a href="#" onClick={(e)=>e.preventDefault()}>/company/aerovista ↗</a></p>
              </div>
              <p className="meta" style={{color:"var(--muted)", maxWidth:"40ch"}}>
                ⓘ Office hours not published — confirm with the team. WhatsApp not offered (confirm a monitored handset before adding).
              </p>
              <button className="btn btn--primary" onClick={()=>onEnquire()} style={{alignSelf:"start"}}>Open enquiry form <Arr/></button>
            </div>
            <div>
              <div className="map">
                <div className="map__grid"></div>
                <div className="map__pin"></div>
                <div className="map__label">Metropolis Tower · Office 1909<br/>Business Bay · Dubai</div>
                <div className="map__coords">{D2.contact.coordsLabel}</div>
                <div className="map__caveat">⚠ Coords pending client confirmation</div>
              </div>
              <div style={{marginTop:24, padding:"24px", border:"1px solid var(--line)", background:"#fff"}}>
                <div className="eyebrow"><span className="dot">●</span> Group locations</div>
                <div style={{marginTop:14, display:"grid", gap:14}}>
                  {D2.group.map((g,i) => (
                    <div key={i} style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12, paddingBottom:12, borderBottom: i<3?"1px dashed var(--line)":"none"}}>
                      <div style={{fontFamily:"var(--f-display)", fontSize:15}}>{g.name}</div>
                      <div className="meta">{g.loc}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  PageHome, PageServices, PageService, PageFleet, PageGroup, PageNews, PageContact,
});