// Page sections: Hero, Facilities, Services, MRO, Twenty
const { useState: useStateS, useEffect: useEffectS } = React;

// ---------- HERO ----------
function Hero({ t, heroMode }) {
  // heroMode: 'dark' | 'light'
  const bg = "media/dubai-dxb-service.webp";
  return (
    <section className="hero" style={{ ['--bg-img']: `url(${bg})` }}>
      <div className="hero-bg" style={{ backgroundImage: `url(${bg})` }} aria-hidden="true" />
      <div className="hero-content">
        <div className="hero-eyebrow">
          {t.hero.eyebrow.map((s, i) => (
            <React.Fragment key={i}>
              <span>{s}</span>
              {i < t.hero.eyebrow.length - 1 && <span className="sep">/</span>}
            </React.Fragment>
          ))}
        </div>
        <h1 className="hero-headline">
          {t.hero.headlineA}<br />
          <em>{t.hero.headlineB}</em> {t.hero.headlineC}
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-ctas">
          <a className="btn btn-primary btn-lg" href="#pre-arrival">
            {t.hero.ctaPrimary} <span className="btn-arrow">{t.nav.ctaArrow}</span>
          </a>
          <a className="btn btn-ghost-inv btn-lg" href="#services">
            {t.hero.ctaSecondary} <span className="btn-arrow">{t.nav.ctaArrow}</span>
          </a>
        </div>
        <div className="hero-data">
          {t.hero.data.map((d, i) => (
            <div key={i} className="hero-datum">
              <span className="hero-datum-key">{d.k}</span>
              <span className="hero-datum-val">
                {i === 2 && <span className="dot" aria-hidden="true" />}
                {d.v}
              </span>
            </div>
          ))}
        </div>
        {/* Light-mode photo strip */}
        <div className="hero-photo-strip">
          <div style={{ backgroundImage: `url(media/dubai-dxb-2.webp)` }} />
          <div style={{ backgroundImage: `url(media/mro-hangar.webp)` }} />
          <div style={{ backgroundImage: `url(media/dubai-dwc-lounge.webp)` }} />
        </div>
      </div>
    </section>
  );
}

// ---------- FACILITIES ----------
function Facilities({ t, facilityFocus }) {
  // facilityFocus: 'both' | 'dxb' | 'dwc'
  const cards = t.facilities.cards.filter((c, i) => {
    if (facilityFocus === "both") return true;
    if (facilityFocus === "dxb") return i === 0;
    if (facilityFocus === "dwc") return i === 1;
    return true;
  });
  return (
    <section className="facilities section shell" id="facilities">
      <div className="container">
        <div className="facilities-head">
          <div>
            <div className="eyebrow">{t.facilities.eyebrow}</div>
            <h2 className="display display-md" style={{ marginTop: 16, marginBottom: 0 }}>
              {t.facilities.title}
            </h2>
          </div>
          <p className="subhead" style={{ alignSelf: "end" }}>{t.facilities.sub}</p>
        </div>
        <div className="facilities-grid" style={facilityFocus !== "both" ? { gridTemplateColumns: "1fr" } : {}}>
          {cards.map((c, i) => (
            <article key={i} className="facility-card">
              <div className="facility-img" style={{ backgroundImage: `url(${c.img})` }}>
                <div className="facility-icao">{c.icao}</div>
                <div className="facility-status">
                  <span className="dot" aria-hidden="true" />
                  {c.status}
                </div>
              </div>
              <div className="facility-body">
                <h3 className="facility-name">{c.name}</h3>
                <p className="facility-mission">{c.mission}</p>
                <div className="facility-services">
                  {c.services.map((s, j) => <span key={j} className="tag">{s}</span>)}
                </div>
                <div className="facility-contacts">
                  {c.contacts.map((ct, j) => (
                    <div key={j} className="facility-contact-row">
                      <span className="label">{ct.label}</span>
                      {ct.href ? (
                        <a href={ct.href}>{ct.value}</a>
                      ) : (
                        <span style={{ fontSize: 13.5 }}>{ct.value}</span>
                      )}
                      {ct.note && (
                        <span className="mono" style={{ fontSize: 11, color: "var(--muted-2)", marginTop: 2 }}>{ct.note}</span>
                      )}
                    </div>
                  ))}
                </div>
                <a className="btn btn-ghost facility-cta" href="#pre-arrival">
                  {c.cta} <span className="btn-arrow">{t.nav.ctaArrow}</span>
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- SERVICES ----------
function Services({ t }) {
  return (
    <section className="services section shell" id="services">
      <div className="container">
        <div className="services-head">
          <div>
            <div className="eyebrow">{t.services.eyebrow}</div>
            <h2 className="display display-md" style={{ marginTop: 16, marginBottom: 0 }}>
              {t.services.title}
            </h2>
          </div>
          <p className="subhead" style={{ alignSelf: "end" }}>{t.services.sub}</p>
        </div>
        <div className="services-grid">
          {t.services.list.map((s, i) => (
            <article key={i} className={"service-card " + s.span}>
              <div className="service-img" style={{ backgroundImage: `url(${s.img})` }}>
                <div className="service-img-badge">{s.code}</div>
              </div>
              <div className="service-body">
                <h3 className="service-name">{s.name}</h3>
                <p className="service-desc">{s.desc}</p>
                <div className="service-meta">
                  {s.tags.map((tag, j) => <span key={j} className="tag tag-solid">{tag}</span>)}
                </div>
                {!s.isDubai && (
                  <em style={{ fontSize: 11, color: "var(--muted-2)", fontStyle: "italic", marginTop: 4, fontFamily: "var(--font-sans)" }}>
                    {t.services.brandImgCaption}
                  </em>
                )}
                <a className="service-link" href="#pre-arrival">
                  Enquire — {s.code}
                  <span className="arrow">{t.nav.ctaArrow}</span>
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- MRO ----------
function MRO({ t }) {
  return (
    <section className="mro section shell" id="maintenance">
      <div className="container">
        <div className="mro-split">
          <div className="mro-intro">
            <div className="eyebrow">{t.mro.eyebrow}</div>
            <h2>{t.mro.title}</h2>
            <p>{t.mro.sub}</p>
            <div className="mro-stats">
              {t.mro.stats.map((s, i) => (
                <div key={i} className="mro-stat">
                  <div className="mro-stat-val">{s.v}</div>
                  <div className="mro-stat-key">{s.k}</div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 18, fontSize: 11, color: "var(--muted-2)", fontFamily: "var(--font-mono)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              ⓘ {t.mro.attribution}
            </p>
          </div>
          <div>
            {/* Approvals table */}
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 16, gap: 16, flexWrap: "wrap" }}>
              <h3 className="display display-sm" style={{ margin: 0, fontWeight: 400 }}>{t.mro.approvalsTitle}</h3>
              <span className="mono" style={{ color: "var(--muted)" }}>{t.mro.approvalsSub}</span>
            </div>
            <div className="approvals">
              <div className="approvals-head">
                <span>№</span>
                <span>OEM · Aircraft</span>
                <span>Auth.</span>
                <span style={{ textAlign: "end" }}>Type</span>
              </div>
              {t.mro.approvals.map((a, i) => (
                <div key={i} className="approvals-row">
                  <span className="approvals-idx">{a.idx}</span>
                  <span className="approvals-name">{a.name}<small>{a.note}</small></span>
                  <span className="approvals-year">{a.year}</span>
                  <span className="approvals-type">{a.type}</span>
                </div>
              ))}
            </div>

            {/* Airframes */}
            <h3 className="display display-sm" style={{ margin: "40px 0 16px", fontWeight: 400 }}>{t.mro.airframesTitle}</h3>
            <div className="airframes">
              {t.mro.airframes.map((a, i) => (
                <div key={i} className="airframe-chip">
                  <span className="airframe-chip-name">{a.name}</span>
                  <span className="airframe-chip-note">{a.note}</span>
                </div>
              ))}
            </div>

            {/* Certs */}
            <h3 className="display display-sm" style={{ margin: "40px 0 16px", fontWeight: 400 }}>{t.mro.certsTitle}</h3>
            <div className="certs">
              {t.mro.certs.map((c, i) => (
                <div key={i} className="cert">
                  <div className="cert-mark">{c.mark}</div>
                  <div className="cert-text">
                    <span className="cert-name">{c.name}</span>
                    <span className="cert-desc">{c.desc}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- TWENTY YEARS ----------
function Twenty({ t }) {
  return (
    <section className="twenty section shell" id="about">
      <div className="container">
        <div className="twenty-inner">
          <div className="twenty-photo" style={{ backgroundImage: `url(media/dubai-20th-anniversary.webp)` }} />
          <div className="twenty-body">
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)" }}>{t.twenty.eyebrow}</div>
            <div className="twenty-num">
              20<small>YRS · DXB · 2005–2025</small>
            </div>
            <p className="twenty-lede">{t.twenty.lede}</p>
            <div className="timeline">
              {t.twenty.milestones.map((m, i) => (
                <div key={i} className="timeline-item">
                  <span className="timeline-year">{m.y}</span>
                  <span className="timeline-text">{m.t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Facilities, Services, MRO, Twenty });