/* Extra sections — LiveOps, VVIPLounge, Timeline, MROMatrix.
   Each is content the home page genuinely benefits from, not filler. */

const { useState: useStateX, useEffect: useEffectX, useRef: useRefX } = React;

// ─── Live Ops panel ───
// Engineering-grade strip just under the hero. Earns trust by showing we're a
// real 24-h operation — UTC + ramp-local clocks update live; the other tiles
// are placeholder-labelled mono data (NOT invented facts — labelled as
// "indicative" so the user can wire them to a real flight-info feed later).
function LiveOps({ t }) {
  const [now, setNow] = useStateX(() => new Date());
  useEffectX(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const fmtUTC = (d) => `${String(d.getUTCHours()).padStart(2,'0')}:${String(d.getUTCMinutes()).padStart(2,'0')}:${String(d.getUTCSeconds()).padStart(2,'0')}`;
  const fmtLocal = (d) => {
    const dxb = new Date(d.getTime() + 4 * 3600 * 1000); // UTC+4
    return `${String(dxb.getUTCHours()).padStart(2,'0')}:${String(dxb.getUTCMinutes()).padStart(2,'0')}`;
  };

  const tiles = [
    { k: t.liveops.utc, v: fmtUTC(now), live: true },
    { k: t.liveops.local, v: fmtLocal(now) + " GST", live: true },
    { k: t.liveops.metar, v: "OMDW 04 1009/15", sub: "FEW035 · 32°C", indicative: true },
    { k: t.liveops.runway, v: "RWY 30", sub: t.liveops.activeRunway, indicative: true },
    { k: t.liveops.ramp, v: t.liveops.standsValue, sub: t.liveops.standsLabel, indicative: true },
    { k: t.liveops.status, v: t.liveops.statusValue, open: true },
  ];

  return (
    <section className="live-ops" data-screen-label="01b LiveOps">
      <div className="wrap">
        <div className="live-ops-head">
          <span className="live-dot"></span>
          <span className="eyebrow" style={{ color: '#fff' }}>{t.liveops.title}</span>
          <span className="mono" style={{ color: 'var(--muted)', fontSize: 10.5 }}>{t.liveops.subtitle}</span>
        </div>
        <div className="live-ops-grid">
          {tiles.map((tile, i) => (
            <div className={"live-tile" + (tile.open ? " live-tile-status" : "")} key={i}>
              <div className="live-tile-k mono">{tile.k}</div>
              <div className="live-tile-v mono">
                {tile.open && <span className="live-dot live-dot-green"></span>}
                {tile.v}
              </div>
              {tile.sub && <div className="live-tile-sub mono">{tile.sub}</div>}
              {tile.indicative && <div className="live-tile-tag mono">indicative</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── VVIP Lounge cinematic moment ───
function VVIPLounge({ t }) {
  return (
    <section className="lounge-moment" data-screen-label="03b VVIP Lounge">
      <div className="lounge-img">
        <img src="media/lounge.webp" alt="DCAF VVIP lounge" />
      </div>
      <div className="lounge-overlay">
        <div className="wrap">
          <div className="lounge-grid">
            <div></div>
            <div className="lounge-text">
              <div className="eyebrow"><span className="rule-gold"></span>{t.lounge.eyebrow}</div>
              <h2 className="serif">
                {t.lounge.h2a}<em className="serif-i">{t.lounge.h2b}</em>{t.lounge.h2c}
              </h2>
              <p>{t.lounge.lede}</p>
              <div className="lounge-chips">
                {t.lounge.chips.map((c, i) => (
                  <span className="lounge-chip" key={i}>
                    <span className="mono lounge-chip-num">/ {String(i+1).padStart(2,'0')}</span>
                    <span>{c}</span>
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Since 2013 Timeline ───
function Timeline({ t }) {
  return (
    <section className="timeline-sec" data-screen-label="03c Since 2013">
      <div className="wrap">
        <div className="timeline-head">
          <div className="eyebrow"><span className="rule-gold"></span>{t.timeline.eyebrow}</div>
          <h2 className="serif">{t.timeline.h2a}<em className="serif-i">{t.timeline.h2b}</em>.</h2>
        </div>
        <div className="timeline-track">
          <div className="timeline-line"></div>
          {t.timeline.items.map((m, i) => (
            <div className="timeline-node" key={i}>
              <div className="timeline-dot"></div>
              <div className="timeline-year mono">{m.year}</div>
              <div className="timeline-label">{m.label}</div>
              {m.sub && <div className="timeline-sub mono">{m.sub}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── MRO capability matrix ───
function MROMatrix({ t }) {
  return (
    <section className="mro-matrix" data-screen-label="05b MRO Capability">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="rule-gold"></span>{t.mro.eyebrow}</div>
            <h2 className="serif" style={{ marginTop: 20 }}>{t.mro.h2a}<em className="serif-i">{t.mro.h2b}</em>{t.mro.h2c}</h2>
          </div>
          <p className="lede">{t.mro.lede}</p>
        </div>
        <div className="mro-grid">
          <div className="mro-col">
            <div className="mro-col-head mono">{t.mro.typesTitle}</div>
            <ul className="mro-types">
              {t.mro.types.map((tp, i) => (
                <li key={i}>
                  <span className="mono mro-num">/ {String(i+1).padStart(2,'0')}</span>
                  <span className="mro-name">{tp.name}</span>
                  <span className="mono mro-scope">{tp.scope}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="mro-col">
            <div className="mro-col-head mono">{t.mro.registryTitle}</div>
            <div className="mro-registries">
              {t.mro.registries.map((r, i) => (
                <div className="mro-reg" key={i}>
                  <div className="mro-reg-prefix serif">{r.prefix}</div>
                  <div className="mro-reg-name">{r.name}</div>
                </div>
              ))}
            </div>
            <div className="mro-col-head mono" style={{ marginTop: 36 }}>{t.mro.capTitle}</div>
            <div className="mro-caps">
              {t.mro.caps.map((c, i) => (
                <span className="mro-cap" key={i}><span className="dot"></span>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LiveOps, VVIPLounge, Timeline, MROMatrix });