/* HQWS pages: Home, Work, CaseStudy, Capabilities, About, Clients, Contact */

const HQT2 = () => window.HQWS_DATA.TRANSLATIONS;

/* ─── HOME ─── */
function PageHome({ lang, navigate, onBrief }) {
  const t = HQT2()[lang];
  const { CATEGORIES, PROJECTS } = window.HQWS_DATA;
  const featured = PROJECTS.slice(0, 6);
  const heroImg = "media/work-alula-constellations.webp";

  // counts per category
  const counts = {};
  CATEGORIES.forEach(c => { counts[c.id] = PROJECTS.filter(p => p.category === c.id).length; });

  return (
    <div className="page">
      {/* ── HERO ── */}
      <section className="hero">
        <div className="hero-media">
          <img src={heroImg} alt="" />
        </div>
        <div className="wrap hero-content">
          <div className="hero-tag"><span className="dot" /> {t.hero.tag}</div>
          <h1>
            {t.hero.h1a}<br />
            <span className="grad">{t.hero.h1b}</span><br />
            {t.hero.h1c}
          </h1>
          <p className="hero-lede">{t.hero.lede}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={onBrief}>{t.hero.cta1} <Arrow /></button>
            <button className="btn btn-ghost" onClick={() => navigate("work")}>{t.hero.cta2} <Arrow /></button>
          </div>
          <div className="hero-meta">
            <div><div className="m-k">{t.hero.m1k}</div><div className="m-v">{t.hero.m1v}</div></div>
            <div><div className="m-k">{t.hero.m2k}</div><div className="m-v">{t.hero.m2v}</div></div>
            <div><div className="m-k">{t.hero.m3k}</div><div className="m-v">{t.hero.m3v}</div></div>
            <div><div className="m-k">{t.hero.m4k}</div><div className="m-v">{t.hero.m4v}</div></div>
          </div>
        </div>
      </section>

      {/* ── CATEGORIES ── */}
      <section className="dark" style={{ borderTop: "1px solid var(--line-dark)" }}>
        <div className="wrap" style={{ paddingBlock: "var(--section-y)" }}>
          <div className="section-head">
            <h2>{t.sectionWork.h}</h2>
            <p className="right">{t.sectionWork.r}</p>
          </div>
          <div className="cat-grid">
            {CATEGORIES.map(c => (
              <button key={c.id} className="cat" onClick={() => navigate("work", { cat: c.id })}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                  <span className="cat-num">{c.num}</span>
                  <span className="cat-arrow"><Arrow size={12} /></span>
                </div>
                <h3 className="cat-title">{c[lang]}</h3>
                <p className="cat-desc">{c.blurb[lang]}</p>
                <div className="cat-stats">
                  <div className="cat-stat-n">{counts[c.id]}</div>
                  <div className="cat-stat-l">{ lang === "ar" ? "مشاريع" : "case studies" }</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURED WORK ── */}
      <section className="dark" style={{ borderTop: "1px solid var(--line-dark)" }}>
        <div className="wrap" style={{ paddingBlock: "var(--section-y)" }}>
          <div className="section-head">
            <h2>{ lang === "ar" ? "أعمال مختارة." : "Featured work." }</h2>
            <p className="right">{ lang === "ar"
              ? "ست لحظات من المحفظة. كل واحد قابل للتطوير إلى دراسة حالة كاملة بعد تخليص الحقوق."
              : "Six moments from the portfolio. Each scales to a full case study once per-project rights clear." }</p>
          </div>
          <div className="work-grid">
            {featured.map(p => <ProjectCard key={p.id} p={p} lang={lang} navigate={navigate} />)}
          </div>
          <div style={{ marginTop: 48, display: "flex", justifyContent: "center" }}>
            <button className="btn btn-ghost" onClick={() => navigate("work")}>
              { lang === "ar" ? "كل الأعمال" : "All work" } <Arrow />
            </button>
          </div>
        </div>
      </section>

      {/* ── CAPABILITY SHORT ── */}
      <section className="dark" style={{ borderTop: "1px solid var(--line-dark)" }}>
        <div className="wrap" style={{ paddingBlock: "var(--section-y)" }}>
          <div className="section-head">
            <h2>{t.sectionCap.h}</h2>
            <p className="right">{t.sectionCap.r}</p>
          </div>
          <div className="cap-grid">
            {window.HQWS_DATA.CAPABILITIES.map(c => (
              <div key={c.num} className="cap-cell">
                <div className="num">— {c.num}</div>
                <h3>{c.title[lang]}</h3>
                <p>{c.desc[lang]}</p>
                <ul className="cap-bullets">{c.bullets.map((b, i) => <li key={i}>{b[lang]}</li>)}</ul>
              </div>
            ))}
            <div className="cap-cell" style={{ background: "transparent", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center" }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--brand-amber)", marginBottom: 16 }}>
                  { lang === "ar" ? "نموذج كامل النطاق" : "FULL-SCALE MODEL" }
                </div>
                <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.005em", lineHeight: 1.3, color: "rgba(245,243,236,0.9)", textWrap: "balance" }}>
                  { lang === "ar"
                    ? "خمس قدرات. كتيب واحد. منصة واحدة."
                    : "Five capabilities. One run-book. One stage."}
                </p>
                <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => navigate("capabilities")}>
                  { lang === "ar" ? "التفاصيل" : "See the model" } <Arrow />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── CREDIBILITY ── */}
      <section className="dark" style={{ borderTop: "1px solid var(--line-dark)" }}>
        <div className="wrap" style={{ paddingBlock: "clamp(72px, 9vw, 120px)" }}>
          <div className="credibility">
            <div className="cred accent"><div className="n">1996</div><div className="l">{ lang === "ar" ? "تأسست في دبي" : "Founded in Dubai" }</div></div>
            <div className="cred accent"><div className="n">29</div><div className="l">{ lang === "ar" ? "عاماً من الإنتاج" : "Years staging shows" }</div></div>
            <div className="cred accent"><div className="n">4</div><div className="l">{ lang === "ar" ? "مكاتب — دبي · أبوظبي · الرياض · سيدني" : "Offices — Dubai · Abu Dhabi · Riyadh · Sydney" }</div></div>
            <div className="cred accent"><div className="n">Banijay</div><div className="l">{ lang === "ar" ? "جزء من المجموعة (2023)" : "Part of the group (2023)" }</div></div>
          </div>
        </div>
      </section>

      {/* ── CTA BAND ── */}
      <section className="dark" style={{ borderTop: "1px solid var(--line-dark)" }}>
        <div className="wrap" style={{ paddingBlock: "clamp(72px, 9vw, 120px)", display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 56, alignItems: "end" }}>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 96px)", margin: 0, textWrap: "balance" }}>
            { lang === "ar" ? "هل تخطّط لشيء " : "Planning something " }
            <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
              { lang === "ar" ? "على مستوى الدولة؟" : "country-scale?" }
            </span>
          </h2>
          <div>
            <p style={{ color: "rgba(245,243,236,0.78)", marginBottom: 24, fontSize: 15, lineHeight: 1.6 }}>
              { lang === "ar"
                ? "موجز فئوي مختصر يصلنا إلى الفريق الصحيح خلال يوم عمل واحد."
                : "A category-qualified brief lands with the right team inside one working day." }
            </p>
            <button className="btn btn-primary" onClick={onBrief}>{t.nav.brief} <Arrow /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─── WORK ─── */
function PageWork({ lang, navigate, initialCat = "all" }) {
  const { CATEGORIES, PROJECTS } = window.HQWS_DATA;
  const [active, setActive] = useState(initialCat);
  useEffect(() => { setActive(initialCat); }, [initialCat]);

  const filtered = active === "all" ? PROJECTS : PROJECTS.filter(p => p.category === active);
  const counts = { all: PROJECTS.length };
  CATEGORIES.forEach(c => { counts[c.id] = PROJECTS.filter(p => p.category === c.id).length; });

  return (
    <div className="page dark" style={{ minHeight: "70vh" }}>
      <div className="wrap" style={{ paddingBlock: "clamp(64px, 8vw, 120px)" }}>
        <div className="kicker" style={{ color: "var(--brand-amber)", marginBottom: 16 }}>— { lang === "ar" ? "الأعمال" : "PORTFOLIO" }</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 8vw, 120px)", margin: 0, color: "var(--text-on-dark)" }}>
          { lang === "ar" ? "كل ما أنتجناه" : "Everything we've staged," }
          <br />
          <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
            { lang === "ar" ? "في فئة واحدة." : "by category." }
          </span>
        </h1>
        <p style={{ marginTop: 24, maxWidth: 640, color: "rgba(245,243,236,0.7)", fontSize: 16, lineHeight: 1.6 }}>
          { lang === "ar"
            ? "العروض والاحتفالات · تجارب العلامات · الرياضة والترفيه · الحكومي والمؤسسي. كل بطاقة دراسة حالة محتملة بعد إذن النشر."
            : "Shows & Ceremonies · Brand Experiences · Sports & Entertainment · Government & Institutional. Each card is a case study once per-project rights are cleared." }
        </p>

        <div style={{ marginTop: 56 }}>
          <CategoryFilter active={active} setActive={setActive} lang={lang} counts={counts} />
        </div>

        <div className="work-grid" style={{ marginTop: 56 }}>
          {filtered.map((p, i) => {
            // give every project a balanced span — first item bigger
            const span = i % 6 === 0 ? "span-8" : i % 6 === 1 ? "span-4" : i % 6 === 2 ? "span-4" : i % 6 === 3 ? "span-4" : i % 6 === 4 ? "span-4" : "span-4";
            return <ProjectCard key={p.id} p={{ ...p, span }} lang={lang} navigate={navigate} />;
          })}
        </div>
      </div>
    </div>
  );
}

/* ─── CASE STUDY ─── */
function PageCase({ lang, navigate, id, onBrief }) {
  const { PROJECTS, CATEGORIES } = window.HQWS_DATA;
  const p = PROJECTS.find(x => x.id === id) || PROJECTS[0];
  const cat = CATEGORIES.find(c => c.id === p.category);
  const related = PROJECTS.filter(x => x.id !== p.id && x.category === p.category).slice(0, 3);

  const phases = p.phases || [
    { n: "Strategy",   d: { en: "Detailed strategy narrative pending per-project rights clearance.", ar: "ملخص الاستراتيجية مرتبط بإذن النشر." } },
    { n: "Design",     d: { en: "Design narrative pending per-project rights clearance.",            ar: "ملخص التصميم مرتبط بإذن النشر." } },
    { n: "Production", d: { en: "Production narrative pending per-project rights clearance.",        ar: "ملخص الإنتاج مرتبط بإذن النشر." } },
    { n: "Protocol",   d: { en: "Protocol narrative pending per-project rights clearance.",          ar: "ملخص البروتوكول مرتبط بإذن النشر." } },
  ];
  const outcomes = p.outcomes || [
    { n: "TBC", l: { en: "audience",         ar: "الجمهور" } },
    { n: "TBC", l: { en: "lead-time",        ar: "زمن الإنتاج" } },
    { n: "TBC", l: { en: "broadcast reach",  ar: "وصول البث" } },
    { n: "TBC", l: { en: "territory",        ar: "النطاق" } },
  ];
  const gallery = p.gallery || [p.img];

  return (
    <div className="page dark cs-hero">
      <div className="img-wrap">
        <img src={p.img} alt={p.name[lang]} />
      </div>
      <div className="wrap" style={{ paddingTop: 56, paddingBottom: 0 }}>
        <button className="chip" style={{ background: "var(--ink-3)", border: 0 }} onClick={() => navigate("work")}>
          <Arrow size={12} />
          <span style={{ transform: "scaleX(-1)" }}>{ lang === "ar" ? "كل الأعمال" : "All work" }</span>
        </button>
        <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", margin: "32px 0 0", color: "var(--text-on-dark)" }}>
          {p.name[lang]}
        </h1>
        {p.summary && (
          <p style={{ maxWidth: 720, marginTop: 28, color: "rgba(245,243,236,0.78)", fontSize: 17, lineHeight: 1.6 }}>
            {p.summary[lang]}
          </p>
        )}

        <div className="cs-meta-row">
          <div><div className="k">{ lang === "ar" ? "الفئة" : "Category" }</div><div className="v">{cat ? cat[lang] : "—"}</div></div>
          <div><div className="k">{ lang === "ar" ? "العميل / الموقع" : "Client / Venue" }</div><div className="v">{p.client || "—"}</div></div>
          <div><div className="k">{ lang === "ar" ? "المكان" : "Location" }</div><div className="v">{p.location || "—"}</div></div>
          <div><div className="k">{ lang === "ar" ? "السنة" : "Year" }</div><div className="v">{p.year || "—"}</div></div>
          <div><div className="k">{ lang === "ar" ? "النطاق" : "Scale" }</div><div className="v" style={{ fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 500 }}>{p.scale || "TBC"}</div></div>
        </div>

        <div className="cs-body">
          <div>
            <h2>{ lang === "ar" ? "من الاستراتيجية إلى البروتوكول." : "Strategy to protocol." }</h2>
            <p>{ lang === "ar"
              ? "نموذج HQWS الكامل ينقل المشروع من الفكرة الأولى إلى ليلة العرض كقطعة واحدة — لا تسليمات، لا تجزئة."
              : "The full HQWS model carries a project from first idea to show-night as one piece — no hand-offs, no fragmentation." }</p>
            <p style={{ marginTop: 24, color: "var(--text-on-dark-faint)", fontSize: 13, fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>
              { lang === "ar" ? "⚠ نسخة تجريبية — السرد بانتظار التخليص." : "⚠ Demo build — narrative pending rights clearance." }
            </p>
          </div>
          <div className="phase-list">
            {phases.map((ph, i) => (
              <div key={i} className="phase">
                <div className="phase-n">— 0{i + 1}</div>
                <div>
                  <h3 className="phase-h">{ph.n}</h3>
                  <p className="phase-d">{ph.d[lang]}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ paddingBlock: "clamp(40px, 6vw, 80px)" }}>
          <div className="eyebrow" style={{ color: "var(--brand-amber)" }}>— { lang === "ar" ? "النتائج" : "Outcomes" }</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 3.5vw, 52px)", margin: "16px 0 0", color: "var(--text-on-dark)" }}>
            { lang === "ar" ? "أرقام قابلة للقياس." : "Measurable, not marketed." }
          </h2>
          <div className="outcomes">
            {outcomes.map((o, i) => (
              <div key={i} className="outcome"><div className="n">{o.n}</div><div className="l">{o.l[lang]}</div></div>
            ))}
          </div>
        </div>

        <div style={{ paddingBottom: "clamp(40px, 6vw, 80px)" }}>
          <div className="eyebrow" style={{ color: "var(--brand-amber)" }}>— { lang === "ar" ? "المعرض" : "Gallery" }</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 3.5vw, 52px)", margin: "16px 0 32px", color: "var(--text-on-dark)" }}>
            { lang === "ar" ? "لقطات من ليلة العرض." : "From the show-night cut." }
          </h2>
          <div className="gallery-grid">
            {gallery.slice(0, 4).map((g, i) => (
              <div key={i} className="g"><img src={g} alt="" loading="lazy" /></div>
            ))}
          </div>
          <div className="credit-line" style={{ marginTop: 24 }}>
            { lang === "ar"
              ? "© إتش كيو وورلدوايد شوز — جميع الصور قيد التخليص لكل مشروع."
              : "© HQ Worldwide Shows — all imagery pending per-project rights clearance." }
          </div>
        </div>

        {/* related */}
        <div style={{ paddingBottom: "clamp(56px, 8vw, 96px)" }}>
          <div className="eyebrow" style={{ color: "var(--brand-amber)" }}>— { lang === "ar" ? "ذات صلة" : "Related work" }</div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 3.5vw, 52px)", margin: "16px 0 32px", color: "var(--text-on-dark)" }}>
            { lang === "ar" ? "أعمال في نفس الفئة." : "More in this category." }
          </h2>
          <div className="work-grid">
            {related.map(rp => <ProjectCard key={rp.id} p={{ ...rp, span: "span-4" }} lang={lang} navigate={navigate} hideCategory />)}
          </div>
        </div>

        {/* CTA band */}
        <div style={{ paddingBottom: "var(--section-y)", borderTop: "1px solid var(--line-dark)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "end", paddingTop: 56 }}>
            <h3 className="display" style={{ fontSize: "clamp(28px, 4vw, 56px)", margin: 0, color: "var(--text-on-dark)" }}>
              { lang === "ar" ? "هل لديك " : "Got a " }
              <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
                {cat ? cat[lang].toLowerCase() : ""}
              </span>
              { lang === "ar" ? " مماثل؟" : " brief?" }
            </h3>
            <button className="btn btn-primary" onClick={() => onBrief(p.category)} style={{ justifySelf: "end" }}>
              { lang === "ar" ? "أرسل الموجز" : "Brief us" } <Arrow />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── CAPABILITIES ─── */
function PageCapabilities({ lang, navigate, onBrief }) {
  const { CAPABILITIES } = window.HQWS_DATA;
  return (
    <div className="page dark">
      <div className="wrap" style={{ paddingBlock: "clamp(64px, 8vw, 120px)" }}>
        <div className="kicker" style={{ color: "var(--brand-amber)", marginBottom: 16 }}>— { lang === "ar" ? "القدرات" : "CAPABILITIES" }</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 8vw, 120px)", margin: 0, color: "var(--text-on-dark)" }}>
          { lang === "ar" ? "نموذج " : "One " }
          <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
            { lang === "ar" ? "كامل النطاق." : "full-scale" }
          </span>
          { lang === "ar" ? "" : " model." }
        </h1>
        <p style={{ marginTop: 24, maxWidth: 640, color: "rgba(245,243,236,0.74)", fontSize: 17, lineHeight: 1.6 }}>
          { lang === "ar"
            ? "خمس قدرات تعمل ككتيب واحد. لا وكالات وسيطة، لا تسليمات، لا فجوات بين الفكرة وليلة العرض."
            : "Five capabilities, one run-book. No middle agencies, no hand-offs, no gap between the idea and the show-night." }
        </p>
        <div className="cap-grid" style={{ marginTop: 56 }}>
          {CAPABILITIES.map(c => (
            <div key={c.num} className="cap-cell">
              <div className="num">— {c.num}</div>
              <h3>{c.title[lang]}</h3>
              <p>{c.desc[lang]}</p>
              <ul className="cap-bullets">{c.bullets.map((b, i) => <li key={i}>{b[lang]}</li>)}</ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 80, display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap" }}>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4.5vw, 64px)", margin: 0, color: "var(--text-on-dark)", maxWidth: "16ch" }}>
            { lang === "ar"
              ? "اختر الفئة. سنجمع الفريق."
              : "Pick the category. We assemble the team." }
          </h2>
          <button className="btn btn-primary" onClick={onBrief}>{ lang === "ar" ? "اطلب عرضاً" : "Request a proposal" } <Arrow /></button>
        </div>
      </div>
    </div>
  );
}

/* ─── ABOUT ─── */
function PageAbout({ lang, navigate, onBrief }) {
  const { LEADERSHIP } = window.HQWS_DATA;
  const t = HQT2()[lang];
  return (
    <div className="page dark">
      <div className="wrap" style={{ paddingBlock: "clamp(64px, 8vw, 120px)" }}>
        <div className="kicker" style={{ color: "var(--brand-amber)", marginBottom: 16 }}>— { lang === "ar" ? "الاستوديو" : "THE STUDIO" }</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 110px)", margin: 0, color: "var(--text-on-dark)", maxWidth: "22ch" }}>
          {t.sectionAbout.h}
        </h1>
        <p style={{ marginTop: 24, maxWidth: 720, color: "rgba(245,243,236,0.78)", fontSize: 17, lineHeight: 1.6 }}>
          {t.sectionAbout.r}
        </p>

        {/* Timeline */}
        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line-dark)" }}>
          {[
            { y: "1996", t: { en: "Founded in Dubai as HQ Creative.", ar: "تأسست في دبي باسم HQ كرييتيف." } },
            { y: "2008", t: { en: "First state-protocol mandate.", ar: "أول تكليف بروتوكول دولة." } },
            { y: "2019", t: { en: "Qasr Al Watan grand opening.", ar: "افتتاح قصر الوطن." } },
            { y: "2023", t: { en: "Joined Banijay Group; HQWS brand consolidated.", ar: "الانضمام إلى مجموعة بانيجاي؛ توحيد علامة HQWS." } },
          ].map((it, i) => (
            <div key={i} style={{ background: "var(--ink)", padding: "32px 28px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{it.y}</div>
              <p style={{ marginTop: 10, color: "rgba(245,243,236,0.78)", fontSize: 14, lineHeight: 1.5 }}>{it.t[lang]}</p>
            </div>
          ))}
        </div>

        {/* Leadership */}
        <div style={{ marginTop: 96 }}>
          <div className="section-head">
            <h2>{ lang === "ar" ? "القيادة." : "Leadership." }</h2>
            <p className="right">{ lang === "ar"
              ? "ست شخصيات قيادية تغطّي الإبداع والعمليات والمالية والأسواق الإقليمية. الصور بانتظار الموافقة."
              : "Six leads covering creative, operations, finance, and regional markets. Portraits pending consented hi-res supply." }</p>
          </div>
          <div className="lead-grid">
            {LEADERSHIP.map(l => (
              <div key={l.name} className="lead">
                <div className="portrait"><span className="ini">{l.ini}</span></div>
                <div>
                  <div className="name">{l.name}</div>
                  <div className="role">{l.role[lang]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Banijay panel */}
        <div style={{ marginTop: 96, background: "var(--ink-2)", border: "1px solid var(--line-dark)", padding: "clamp(40px, 6vw, 80px)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
          <div>
            <div className="kicker" style={{ color: "var(--brand-amber)" }}>— { lang === "ar" ? "الانتماء" : "AFFILIATION" }</div>
            <h2 className="display" style={{ fontSize: "clamp(28px, 3.5vw, 52px)", margin: "16px 0 0", color: "var(--text-on-dark)" }}>
              { lang === "ar" ? "جزء من مجموعة بانيجاي منذ 2023." : "Part of Banijay Group since 2023." }
            </h2>
          </div>
          <p style={{ color: "rgba(245,243,236,0.78)", fontSize: 15, lineHeight: 1.66, margin: 0 }}>
            { lang === "ar"
              ? "بانيجاي هي أكبر استوديو إنتاج محتوى مستقل في العالم. الانتماء يفتح وصولاً إلى مكتبة قوالب وشبكة بث وكفاءات دولية — مع الاحتفاظ بفِرق دبي وأبوظبي والرياض وسيدني على رأس كل تسليم."
              : "Banijay is the world's largest independent content-production studio. The affiliation unlocks a global format library, broadcast distribution, and international talent — while Dubai, Abu Dhabi, Riyadh and Sydney teams remain on point for every delivery." }
          </p>
        </div>
      </div>
    </div>
  );
}

/* ─── CLIENTS ─── */
function PageClients({ lang, navigate }) {
  const { CLIENT_NAMES, PROJECTS } = window.HQWS_DATA;
  return (
    <div className="page dark">
      <div className="wrap" style={{ paddingBlock: "clamp(64px, 8vw, 120px)" }}>
        <div className="kicker" style={{ color: "var(--brand-amber)", marginBottom: 16 }}>— { lang === "ar" ? "العملاء" : "CLIENTS" }</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 110px)", margin: 0, color: "var(--text-on-dark)", maxWidth: "20ch" }}>
          { lang === "ar"
            ? "الجهات التي تنشئ اللحظات معنا."
            : "The institutions that stage moments with us." }
        </h1>
        <p style={{ marginTop: 24, maxWidth: 720, color: "rgba(245,243,236,0.78)", fontSize: 17, lineHeight: 1.6 }}>
          { lang === "ar"
            ? "حكومات، علامات تجارية، وحقوق رياضية. كل شعار يحتاج إلى إذن نشر مكتوب — أدناه النصوص فقط ريثما تكتمل التراخيص."
            : "Governments, brands, and rights-holders. Every logo requires written consent — text-only marks below until per-client clearance lands." }
        </p>

        <div className="logo-wall" style={{ marginTop: 56 }}>
          {CLIENT_NAMES.map((n, i) => (
            <div key={n} className="logo-cell">
              <span className="pending">PENDING</span>
              {n}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
          <div>
            <h2 className="display" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", margin: 0, color: "var(--text-on-dark)" }}>
              { lang === "ar" ? "نسلّم في 4 قطاعات." : "We deliver across 4 sectors." }
            </h2>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            {window.HQWS_DATA.CATEGORIES.map(c => (
              <button key={c.id} onClick={() => navigate("work", { cat: c.id })} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 0", borderTop: "1px solid var(--line-dark)", color: "var(--text-on-dark)" }}>
                <div style={{ textAlign: "left" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-on-dark-mute)", letterSpacing: "0.14em" }}>— {c.num}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, marginTop: 4 }}>{c[lang]}</div>
                </div>
                <Arrow />
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── CONTACT ─── */
function PageContact({ lang, navigate, onBrief }) {
  const { OFFICES, CATEGORIES } = window.HQWS_DATA;
  const [cat, setCat] = useState("shows");

  return (
    <div className="page dark">
      <div className="wrap" style={{ paddingBlock: "clamp(64px, 8vw, 120px)" }}>
        <div className="kicker" style={{ color: "var(--brand-amber)", marginBottom: 16 }}>— { lang === "ar" ? "تواصل" : "GET IN TOUCH" }</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 8vw, 120px)", margin: 0, color: "var(--text-on-dark)", maxWidth: "16ch" }}>
          { lang === "ar" ? "أربعة مكاتب. " : "Four offices. " }
          <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
            { lang === "ar" ? "موجز واحد." : "One brief." }
          </span>
        </h1>

        <div className="contact-grid" style={{ marginTop: 80 }}>
          {/* offices */}
          <div>
            <div className="eyebrow" style={{ color: "var(--text-on-dark-mute)", marginBottom: 24 }}>— { lang === "ar" ? "المكاتب" : "Offices" }</div>
            {OFFICES.map(o => (
              <div key={o.city.en} className="office">
                <div className="office-row">
                  <div className="office-city">
                    {o.city[lang]}
                    <span className="tag">{o.tag[lang]}</span>
                  </div>
                  <div className="office-addr">{o.addr[lang]}</div>
                  <div className="office-phone"><a href={`tel:${o.phone.replace(/[^0-9+]/g, "")}`}>{o.phone}</a></div>
                </div>
              </div>
            ))}
            <div style={{ marginTop: 40, display: "grid", gap: 12 }}>
              <div className="eyebrow" style={{ color: "var(--text-on-dark-mute)" }}>— { lang === "ar" ? "عام" : "General" }</div>
              <a href="mailto:info@hqws.com" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, letterSpacing: "-0.01em", color: "var(--text-on-dark)" }}>info@hqws.com</a>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-on-dark-mute)", letterSpacing: "0.1em" }}>
                { lang === "ar" ? "الساعات قيد التأكيد · إحداثيات الخريطة قيد التأكيد" : "HOURS PENDING CONFIRMATION · MAP COORDS PENDING" }
              </div>
            </div>
          </div>

          {/* inline brief form */}
          <div className="brief-card">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--brand-amber)", marginBottom: 14 }}>
              { lang === "ar" ? "اطلب عرضاً — مؤهَّل بالفئة" : "REQUEST A PROPOSAL — CATEGORY-QUALIFIED" }
            </div>
            <h3>{ lang === "ar" ? "حدِّد الفئة، نوصلك بالفريق." : "Pick the category. We route you." }</h3>
            <p className="sub">
              { lang === "ar"
                ? "لا أسعار — جميع الإنتاج مخصّص. الموجز يصل خلال يوم عمل."
                : "No prices — every brief is bespoke. We respond in one working day." }
            </p>
            <div className="field">
              <label>{ lang === "ar" ? "الفئة" : "Category" }</label>
              <div className="cat-radio-grid">
                {CATEGORIES.map(c => (
                  <button key={c.id} type="button" className={`cat-radio ${cat === c.id ? "on" : ""}`} onClick={() => setCat(c.id)}>
                    <span className="dot" /> {c[lang]}
                  </button>
                ))}
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>{ lang === "ar" ? "الاسم" : "Your name" }</label>
                <input placeholder={ lang === "ar" ? "اسمك" : "Full name" } />
              </div>
              <div className="field">
                <label>{ lang === "ar" ? "الجهة" : "Organisation" }</label>
                <input placeholder={ lang === "ar" ? "الجهة" : "Org / ministry" } />
              </div>
            </div>
            <div className="field">
              <label>{ lang === "ar" ? "البريد الإلكتروني" : "Work email" }</label>
              <input type="email" placeholder="name@org.com" />
            </div>
            <div className="field">
              <label>{ lang === "ar" ? "ملخص" : "Brief summary" }</label>
              <textarea placeholder={ lang === "ar" ? "ما الذي تريد إخراجه؟" : "What are you staging?" } />
            </div>
            <button className="btn btn-primary" onClick={() => onBrief(cat)} style={{ width: "100%", justifyContent: "center" }}>
              { lang === "ar" ? "افتح الموجز الكامل" : "Open full brief form" } <Arrow />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageHome, PageWork, PageCase, PageCapabilities, PageAbout, PageClients, PageContact });