// home — hero, smart search, Vision 2030, metrics, promise, Mr. Wing teaser

/* ── Animated counter hook ── */
function useCountUp(target, duration, active) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    const num = parseInt(String(target).replace(/[^0-9]/g, ""), 10);
    if (!num) { setVal(target); return; }
    const pre = String(target).match(/^[^0-9]*/)[0];
    const suf = String(target).match(/[^0-9]*$/)[0];
    const t0 = performance.now();
    let frame;
    function tick(now) {
      const p = Math.min((now - t0) / duration, 1);
      const e = 1 - Math.pow(1 - p, 3);
      setVal(pre + Math.round(e * num).toLocaleString() + suf);
      if (p < 1) frame = requestAnimationFrame(tick);
    }
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [target, duration, active]);
  return val;
}

/* ── Intersection Observer reveal hook ── */
function useReveal(threshold) {
  var ref = React.useRef(null);
  var vis = React.useRef(false);
  var s = React.useState(false);
  React.useEffect(function () {
    var el = ref.current;
    if (!el) return;
    var obs = new IntersectionObserver(function (e) { if (e[0].isIntersecting && !vis.current) { vis.current = true; s[1](true); obs.disconnect(); } }, { threshold: threshold || 0.15 });
    obs.observe(el);
    return function () { obs.disconnect(); };
  }, [threshold]);
  return [ref, s[0]];
}

/* ── HERO ── */
function Hero() {
  var L = useLang(), t = L.t;
  var S = useStore(), nav = S.nav;
  var _scroll = React.useState(0), off = _scroll[0], setOff = _scroll[1];
  var ld = React.useState(false), loaded = ld[0], setLoaded = ld[1];
  var _tick = React.useState(0), tick = _tick[0], setTick = _tick[1];

  React.useEffect(function () {
    function h() { setOff(window.scrollY); }
    window.addEventListener("scroll", h, { passive: true });
    requestAnimationFrame(function () { setLoaded(true); });
    /* subtle tick for live-dot pulse */
    var iv = setInterval(function () { setTick(function (p) { return p + 1; }); }, 3000);
    return function () { window.removeEventListener("scroll", h); clearInterval(iv); };
  }, []);

  function stagger(i) {
    return {
      opacity: loaded ? 1 : 0,
      transform: loaded ? "translateY(0)" : "translateY(32px)",
      transition: "opacity .7s cubic-bezier(.2,.7,.2,1) " + (0.12 + i * 0.1) + "s, transform .7s cubic-bezier(.2,.7,.2,1) " + (0.12 + i * 0.1) + "s",
    };
  }

  var chips = [
    { key: "iata", icon: "shield" },
    { key: "support", icon: "clock" },
    { key: "vision", icon: "spark" },
  ];

  /* live pulse animation for the status dot */
  var livePulse = tick % 2 === 0;

  return (
    <header style={{ position: "relative", minHeight: "clamp(620px,92vh,960px)", overflow: "hidden", display: "flex", flexDirection: "column" }}>
      {/* Background layers */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <div style={{ position: "absolute", inset: 0, transform: "translateY(" + (off * 0.15) + "px)", background: "linear-gradient(165deg,#2a1d10 0%,#1c130a 55%,#0e0904 100%)" }} />
        <div style={{ position: "absolute", inset: 0, transform: "translateY(" + (off * 0.1) + "px) scale(1.08)" }}>
          <img src="assets/img/redsea.jpg" alt={t("img.hero")} loading="eager" decoding="async"
            onError={function (e) { e.currentTarget.style.opacity = 0; }}
            style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.55, filter: "saturate(0.85) contrast(1.1)" }} />
        </div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(105deg, rgba(14,9,4,.92) 0%, rgba(14,9,4,.78) 40%, rgba(14,9,4,.45) 70%, rgba(14,9,4,.25) 100%)" }} />
        <div style={{ position: "absolute", top: "-20%", left: "-10%", width: "70%", height: "80%", opacity: loaded ? 0.35 : 0, background: "radial-gradient(ellipse 70% 60% at 30% 20%, rgba(190,147,74,.35), transparent 65%)", transition: "opacity 1.5s ease .3s" }} />
        <div style={{ position: "absolute", bottom: "-10%", right: "-5%", width: "50%", height: "60%", opacity: loaded ? 0.2 : 0, background: "radial-gradient(ellipse 60% 50% at 75% 80%, rgba(216,184,120,.3), transparent 60%)", transition: "opacity 1.8s ease .6s" }} />
        {/* Subtle diagonal line pattern for texture */}
        <div style={{ position: "absolute", inset: 0, opacity: 0.03, mixBlendMode: "overlay", background: "repeating-linear-gradient(118deg, rgba(255,255,255,.08) 0 1px, transparent 1px 32px)" }} />
        {/* Animated shimmer sweep across the background */}
        <div style={{ position: "absolute", inset: 0, opacity: loaded ? 0.06 : 0, background: "linear-gradient(105deg, transparent 40%, rgba(190,147,74,.25) 50%, transparent 60%)", backgroundSize: "300% 100%", animation: "heroShimmer 8s ease-in-out infinite", transition: "opacity 2s ease 1s" }} />
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: "30%", background: "linear-gradient(to top, var(--paper), transparent)" }} />
      </div>

      {/* Main content */}
      <div className="wrap" style={{ position: "relative", zIndex: 2, flex: 1, display: "flex", alignItems: "center", paddingTop: 120, paddingBottom: 60 }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 60, width: "100%", alignItems: "center" }}>
          {/* Left text */}
          <div style={{ maxWidth: 660 }}>
            <div style={stagger(0)}>
              <span className="eyebrow" style={{ color: "var(--gold-l)" }}>{t("hero.eyebrow")}</span>
            </div>
            <h1 className="display" style={{ color: "#fff", marginTop: 24, maxWidth: 620 }}>
              <span style={Object.assign({}, stagger(1), { display: "block" })}>{t("hero.title.1")}</span>
              <span style={Object.assign({}, stagger(2), { display: "block", color: "var(--gold-l)", fontStyle: "italic" })}>{t("hero.title.2")}</span>
            </h1>
            {/* Gold accent line under title */}
            <div style={Object.assign({}, stagger(2.5), { width: 64, height: 2, background: "linear-gradient(90deg, var(--gold), transparent)", marginTop: 28, borderRadius: 2 })} />
            <p style={Object.assign({}, stagger(3), { color: "rgba(255,255,255,.78)", fontSize: 18, lineHeight: 1.7, fontWeight: 300, marginTop: 24, maxWidth: 540 })}>{t("hero.sub")}</p>
            <div style={Object.assign({}, stagger(4), { display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" })}>
              <button className="btn btn-gold btn-lg" onClick={function () { document.getElementById("smartsearch") && document.getElementById("smartsearch").scrollIntoView({ behavior: "smooth", block: "center" }); }}>
                <Icon name="search" size={18} /> {t("search.cta")}
              </button>
              <button className="btn btn-lg" onClick={function () { nav("corporate"); }}
                style={{ background: "rgba(255,255,255,.08)", color: "#fff", border: "1px solid rgba(255,255,255,.25)", backdropFilter: "blur(8px)" }}>
                {t("nav.cta")}
              </button>
            </div>
            <div style={Object.assign({}, stagger(5), { display: "flex", alignItems: "center", gap: 20, marginTop: 44, flexWrap: "wrap" })}>
              {chips.map(function (c) {
                return <span key={c.key} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase", color: "rgba(255,255,255,.55)", fontWeight: 500 }}>
                  <Icon name={c.icon} size={14} color="var(--gold-l)" stroke={1.5} /> {t("hero.chip." + c.key)}
                </span>;
              })}
            </div>
          </div>

          {/* Right: floating live fare card */}
          <div className="hide-mobile" style={Object.assign({}, stagger(6), { position: "relative" })}>
            <div className="hero-float-card" style={{ width: 340 }}>
              {/* Shimmer border effect */}
              <div style={{ position: "absolute", inset: -1, borderRadius: "inherit", background: "linear-gradient(135deg, rgba(190,147,74,.4), transparent 40%, transparent 60%, rgba(190,147,74,.25))", zIndex: -1 }} />
              <div style={{ position: "relative", height: 170, overflow: "hidden" }}>
                <img src="assets/img/cabin.jpg" alt="" loading="eager" decoding="async"
                  onError={function (e) { e.currentTarget.style.opacity = 0; }}
                  style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.85, transition: "transform 6s ease" }}
                  onMouseEnter={function (e) { e.currentTarget.style.transform = "scale(1.06)"; }}
                  onMouseLeave={function (e) { e.currentTarget.style.transform = "scale(1)"; }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(14,9,4,.75), transparent 60%)" }} />
                <span className="chip chip-gold" style={{ position: "absolute", top: 14, left: 14, fontSize: 11 }}>
                  <span className="badge-dot" style={{ background: "var(--ok)", width: 6, height: 6, animation: "ping 2.4s ease-out infinite" }} />
                  {t("hero.card.tag")}
                </span>
                {/* Airline badge */}
                <div style={{ position: "absolute", bottom: 14, left: 16, display: "flex", alignItems: "center", gap: 8 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: "rgba(255,255,255,.12)", backdropFilter: "blur(8px)", display: "grid", placeItems: "center", border: "1px solid rgba(255,255,255,.15)" }}>
                    <Icon name="plane" size={14} color="#fff" />
                  </div>
                  <span style={{ fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,.9)" }}>SV 1021</span>
                </div>
              </div>
              <div style={{ padding: "18px 22px 22px" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 20, color: "#fff" }}>{t("hero.card.route")}</span>
                  <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--ok)", fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase" }}>
                    <span className="badge-dot" style={{ background: "var(--ok)", width: 7, height: 7, boxShadow: livePulse ? "0 0 8px rgba(46,125,85,.5)" : "none", transition: "box-shadow .6s ease" }} />
                    Live
                  </span>
                </div>
                {/* Route with times */}
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 14, padding: "10px 0", borderTop: "1px solid rgba(255,255,255,.08)", borderBottom: "1px solid rgba(255,255,255,.08)" }}>
                  <div style={{ textAlign: "center" }}>
                    <div style={{ fontFamily: "var(--sans)", fontSize: 18, fontWeight: 700, color: "#fff" }}>06:15</div>
                    <div style={{ fontSize: 11, color: "rgba(255,255,255,.5)", fontWeight: 600, marginTop: 2 }}>RUH</div>
                  </div>
                  <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 4 }}>
                    <div style={{ width: 6, height: 6, borderRadius: "50%", border: "1.5px solid var(--gold-l)" }} />
                    <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg, var(--gold-l), rgba(190,147,74,.3))" }} />
                    <Icon name="plane" size={14} color="var(--gold-l)" style={{ transform: "rotate(90deg)" }} />
                  </div>
                  <div style={{ textAlign: "center" }}>
                    <div style={{ fontFamily: "var(--sans)", fontSize: 18, fontWeight: 700, color: "#fff" }}>08:25</div>
                    <div style={{ fontSize: 11, color: "rgba(255,255,255,.5)", fontWeight: 600, marginTop: 2 }}>JED</div>
                  </div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }}>
                  <div style={{ color: "rgba(255,255,255,.5)", fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}>
                    <Icon name="clock" size={12} color="rgba(255,255,255,.4)" stroke={1.5} />
                    2h 10m
                  </div>
                  <div style={{ color: "rgba(255,255,255,.5)", fontSize: 12 }}>{t("hero.card.cabin")}</div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 16 }}>
                  <div>
                    <span style={{ fontSize: 11, color: "rgba(255,255,255,.45)", textTransform: "uppercase", letterSpacing: ".1em" }}>SAR</span>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 34, fontWeight: 600, color: "var(--gold-l)", lineHeight: 1, letterSpacing: "-.02em" }}>940</div>
                  </div>
                  <button className="btn btn-gold btn-sm" onClick={function () { document.getElementById("smartsearch") && document.getElementById("smartsearch").scrollIntoView({ behavior: "smooth", block: "center" }); }}>
                    {t("book.now")} <Icon name="arrow" size={14} />
                  </button>
                </div>
              </div>
            </div>
            {/* Ambient glow behind card */}
            <div style={{ position: "absolute", top: "15%", left: "-30%", width: "160%", height: "70%", background: "radial-gradient(ellipse at center, rgba(190,147,74,.18), transparent 60%)", filter: "blur(50px)", pointerEvents: "none", zIndex: -1 }} />
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{ position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)", zIndex: 3, textAlign: "center", opacity: loaded ? 0.5 : 0, transition: "opacity 1s ease 1.2s" }}>
        <div style={{ color: "rgba(255,255,255,.5)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", marginBottom: 8 }}>{t("hero.scroll")}</div>
        <div style={{ width: 1, height: 32, margin: "0 auto", background: "linear-gradient(to bottom, var(--gold-l), transparent)", animation: "scrollPulse 2s ease-in-out infinite" }} />
      </div>
    </header>
  );
}

function SearchBand() {
  return (
    <div id="smartsearch" className="wrap search-band" style={{ position: "relative", zIndex: 5, marginTop: -54 }}>
      <SmartSearch />
    </div>
  );
}

function Vision() {
  var L = useLang(), t = L.t;
  var S = useStore(), nav = S.nav;
  var reveal = useReveal(), ref = reveal[0], visible = reveal[1];
  var items = [
    { key: "alula", slot: "vis_alula", tone: "sand" },
    { key: "jeddah", slot: "vis_jeddah", tone: "gold" },
    { key: "asir", slot: "vis_asir", tone: "emerald" }
  ];
  return (
    <section className="section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
          <SectionHead eyebrow={t("vision.eyebrow")} title={t("vision.title")} sub={t("vision.sub")} />
          <button className="btn btn-ghost" onClick={function () { nav("packages"); }}>{t("vision.explore")} <Icon name="arrow" size={16} /></button>
        </div>
        <div ref={ref} className="rcol" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22, marginTop: 48 }}>
          {items.map(function (it, i) {
            return <article key={it.key} className="hover-lift" role="button" tabIndex={0} aria-label={t("vision." + it.key)}
              style={{ borderRadius: "var(--r-xl)", overflow: "hidden", position: "relative", cursor: "pointer",
                height: i === 1 ? 460 : 420, marginTop: i === 1 ? 0 : 24,
                opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(40px)",
                transition: "opacity .6s cubic-bezier(.2,.7,.2,1) " + (i * 0.12) + "s, transform .6s cubic-bezier(.2,.7,.2,1) " + (i * 0.12) + "s" }}
              onClick={function () { nav("packages"); }}
              onKeyDown={function (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); nav("packages"); } }}>
              <Placeholder slot={it.slot} label={t("vision." + it.key)} h="100%" tone={it.tone} r="0" style={{ height: "100%" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top,rgba(10,30,22,.85) 0%,transparent 55%)" }} />
              <div style={{ position: "absolute", insetInline: 0, bottom: 0, padding: 26 }}>
                <h3 style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 27, color: "#fff" }}>{t("vision." + it.key)}</h3>
                <p style={{ color: "rgba(255,255,255,.78)", fontSize: 14, marginTop: 6, fontWeight: 300 }}>{t("vision." + it.key + ".d")}</p>
              </div>
            </article>;
          })}
        </div>
      </div>
    </section>
  );
}

function Metrics() {
  var L = useLang(), t = L.t;
  var reveal = useReveal(0.3), ref = reveal[0], visible = reveal[1];
  var c1 = useCountUp("$5M+", 2000, visible);
  var c2 = useCountUp("95%", 1600, visible);
  var c3 = useCountUp("250+", 1800, visible);
  var counts = [c1, c2, c3];
  var labels = [t("m.revenue"), t("m.sat"), t("m.projects")];
  var raws = ["$5M+", "95%", "250+"];

  return (
    <section style={{ background: "var(--ink)", color: "#fff", padding: 0 }}>
      <div className="wrap" style={{ padding: "64px 32px" }}>
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <span className="eyebrow center" style={{ color: "var(--gold-l)" }}>{t("m.eyebrow")}</span>
        </div>
        <div ref={ref} className="rcol" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0 }}>
          {counts.map(function (c, i) {
            return <div key={i} style={{ textAlign: "center", padding: "18px 24px", borderInlineStart: i ? "1px solid rgba(255,255,255,.12)" : "none",
              opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(20px)",
              transition: "opacity .5s ease " + (i * 0.12) + "s, transform .5s ease " + (i * 0.12) + "s" }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(48px,6vw,76px)", fontWeight: 600, color: "var(--gold-l)", lineHeight: 1 }}>{visible ? c : raws[i]}</div>
              <div style={{ marginTop: 12, fontSize: 13, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(255,255,255,.6)" }}>{labels[i]}</div>
            </div>;
          })}
        </div>
      </div>
    </section>
  );
}

function PromiseSection() {
  var L = useLang(), t = L.t;
  var reveal = useReveal(), ref = reveal[0], visible = reveal[1];
  var vals = [
    { k: "h", icon: "shield" }, { k: "r", icon: "check" }, { k: "c", icon: "clock" }, { k: "f", icon: "chat" }
  ];
  return (
    <section className="section" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <span className="eyebrow center" style={{ color: "var(--gold-d)" }}>{t("promise.eyebrow")} · {t("about.fw")}</span>
          <h2 className="section-title" style={{ marginTop: 18 }}>&ldquo;{t("promise.title")}&rdquo;</h2>
        </div>
        <div ref={ref} className="rcol-2" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginTop: 56 }}>
          {vals.map(function (v, i) {
            return <div key={v.k} className="card card-pad hover-lift" style={{ textAlign: "center",
              opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(24px)",
              transition: "opacity .5s ease " + (i * 0.08) + "s, transform .5s ease " + (i * 0.08) + "s" }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, margin: "0 auto", display: "grid", placeItems: "center", background: "var(--emerald-wash)", color: "var(--emerald)" }}>
                <Icon name={v.icon} size={26} stroke={1.6} />
              </div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 13, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--gold-d)", marginTop: 18, fontWeight: 600 }}>{v.k.toUpperCase()}</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600, marginTop: 4 }}>{t("hrcf." + v.k)}</h3>
              <p className="muted" style={{ fontSize: 14, marginTop: 10 }}>{t("hrcf." + v.k + ".d")}</p>
            </div>;
          })}
        </div>
      </div>
    </section>
  );
}

function WingTeaser() {
  var L = useLang(), t = L.t, lang = L.lang;
  var S = useStore(), setWingOpen = S.setWingOpen, setWingSeed = S.setWingSeed;
  var reveal = useReveal(), ref = reveal[0], visible = reveal[1];
  var examples = lang === "ar"
    ? ["ابحث عن رحلة السعودية إلى جدة غدًا صباحًا", "احجز فيرمونت الرياض ليلتين على بطاقة مدى", "انقل حجز فندقي إلى الجمعة"]
    : ["Find a Saudia flight to Jeddah tomorrow morning", "Book the Fairmont Riyadh for 2 nights on my Mada card", "Move my Thursday hotel to Friday"];

  return (
    <section className="section" style={{ background: "linear-gradient(160deg,#2f2114,#1c130a)", color: "#fff", overflow: "hidden", position: "relative" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 60% at 85% 20%,rgba(201,162,75,.22),transparent 60%)" }} />
      <div ref={ref} className="wrap split" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 60, alignItems: "center",
        opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(30px)", transition: "opacity .7s ease, transform .7s ease" }}>
        <div>
          <span className="eyebrow" style={{ color: "var(--gold-l)" }}>{t("wing.teaser.eyebrow")}</span>
          <h2 className="section-title" style={{ color: "#fff", marginTop: 18 }}>{t("wing.title", { name: t("wing.name") })}</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,.72)", marginTop: 18 }}>{t("wing.teaser.body")}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 26 }}>
            {examples.map(function (ex, i) {
              return <button key={i} onClick={function () { setWingSeed(ex); setWingOpen(true); }}
                style={{ background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.18)", color: "rgba(255,255,255,.9)", padding: "10px 16px", borderRadius: 100, cursor: "pointer", fontSize: 13.5, fontFamily: "var(--sans)", transition: "all .2s" }}
                onMouseEnter={function (e) { e.currentTarget.style.background = "var(--gold)"; e.currentTarget.style.color = "#2a2206"; }}
                onMouseLeave={function (e) { e.currentTarget.style.background = "rgba(255,255,255,.08)"; e.currentTarget.style.color = "rgba(255,255,255,.9)"; }}>
                &ldquo;{ex}&rdquo;
              </button>;
            })}
          </div>
          <button className="btn btn-gold btn-lg" style={{ marginTop: 30 }} onClick={function () { setWingOpen(true); }}>
            <Icon name="chat" size={18} /> {t("wing.teaser.cta")}
          </button>
        </div>
        <div className="card" style={{ padding: 0, overflow: "hidden", borderRadius: "var(--r-xl)", boxShadow: "var(--shadow-lg)", background: "var(--card)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
            <WingAvatar size={38} />
            <div><div style={{ fontWeight: 700, color: "var(--ink)" }}>{t("wing.name")}</div><div style={{ fontSize: 12, color: "var(--emerald)", display: "flex", alignItems: "center", gap: 6 }}><span className="badge-dot" style={{ background: "var(--ok)" }}></span>{t("wing.online")}</div></div>
          </div>
          <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 12, background: "var(--paper)" }}>
            <Bubble who="user">{lang === "ar" ? "ابحث عن رحلة السعودية إلى جدة غدًا صباحًا" : "Find a Saudia flight to Jeddah tomorrow morning"}</Bubble>
            <Bubble who="wing">{lang === "ar" ? "وجدت خيارين صباحيين على السعودية. رحلة 06:15 (SV1021) تصل 07:55 — رجال أعمال بسعر 940 ريال. أحجزها على بطاقة مدى؟" : "Found 2 morning options on Saudia. The 06:15 (SV1021) arrives 07:55 — Business at SAR 940. Shall I hold it on your Mada card?"}</Bubble>
            <div className="card" style={{ borderColor: "var(--emerald-tint)", padding: 14, background: "#fff" }}>
              <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--gold-d)", fontWeight: 700 }}>{t("wing.confirmBooking")}</div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontWeight: 600, color: "var(--ink)" }}><span>RUH → JED · SV1021</span><span><Money value={940} /></span></div>
              <button className="btn btn-primary btn-sm btn-block" style={{ marginTop: 12 }}><Icon name="check" size={15} /> {t("wing.confirm")}</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WingAvatar(props) {
  var size = (props && props.size) || 40;
  return (
    <div style={{ width: size, height: size, borderRadius: "50%", background: "linear-gradient(150deg,var(--emerald),var(--emerald-d))", display: "grid", placeItems: "center", flexShrink: 0, boxShadow: "0 4px 12px rgba(60,45,28,.3)" }}>
      <WingMark size={size * 0.62} dark={true} />
    </div>
  );
}

function Bubble(props) {
  var who = props.who, children = props.children;
  var isUser = who === "user";
  return (
    <div style={{ alignSelf: isUser ? "flex-end" : "flex-start", maxWidth: "85%",
      background: isUser ? "var(--emerald)" : "#fff", color: isUser ? "#fff" : "var(--ink)",
      border: isUser ? "none" : "1px solid var(--line)", padding: "11px 15px", borderRadius: 16,
      borderBottomRightRadius: isUser ? 4 : 16, borderBottomLeftRadius: isUser ? 16 : 4, fontSize: 14, lineHeight: 1.5, boxShadow: "var(--shadow-sm)" }}>
      {children}
    </div>
  );
}

function Home() {
  return (
    <div>
      <Hero />
      <SearchBand />
      <Vision />
      <Metrics />
      <PromiseSection />
      <WingTeaser />
    </div>
  );
}

Object.assign(window, { Home, WingAvatar, Bubble, useReveal, useCountUp });