/* HQWS components — Navbar, Footer, BriefModal, ProjectCard, CategoryFilter, RightsBanner, StickyCTA */

const { useState, useEffect, useMemo, useRef } = React;
const HQT = () => window.HQWS_DATA.TRANSLATIONS;

/* ─── shared bits ─── */
function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function HQLogo({ height = 26 }) {
  // small inline mark — we reference the SVG file for fidelity
  return (
    <img src="media/logo-hqws-icon.svg" alt="HQWS" style={{ height, width: "auto", display: "block" }} />
  );
}

/* ─── Navbar ─── */
function Navbar({ route, navigate, lang, setLang, onBrief, light = false }) {
  const t = HQT()[lang];
  const items = [
    { id: "work",         label: t.nav.work },
    { id: "capabilities", label: t.nav.capabilities },
    { id: "about",        label: t.nav.about },
    { id: "clients",      label: t.nav.clients },
    { id: "contact",      label: t.nav.contact },
  ];
  return (
    <header className={`nav ${light ? "light" : ""}`}>
      <div className="nav-inner">
        <div className="nav-logo" onClick={() => navigate("home")}>
          <HQLogo height={28} />
          <span className="wordmark">HQWS</span>
        </div>
        <nav className="nav-links">
          {items.map(it => (
            <a key={it.id} className={route.startsWith(it.id) ? "active" : ""} onClick={(e) => { e.preventDefault(); navigate(it.id); }} href={`#${it.id}`}>{it.label}</a>
          ))}
        </nav>
        <div className="nav-lang">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>عربي</button>
        </div>
        <button className="nav-cta" onClick={onBrief}>
          {t.nav.brief} <Arrow />
        </button>
      </div>
    </header>
  );
}

/* ─── Rights banner ─── */
function RightsBanner({ lang }) {
  const t = HQT()[lang].rights;
  return (
    <div className="rights-banner">
      <div className="wrap">
        <div className="group"><span className="dot" /> {t.l}</div>
        <div className="group">{t.r}</div>
      </div>
    </div>
  );
}

/* ─── Footer ─── */
function Footer({ navigate, lang, onBrief }) {
  const t = HQT()[lang];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <h3 className="footer-cta">
              <span style={{ background: "var(--brand-gradient)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
                {t.footer.tagline}
              </span>
            </h3>
            <button className="btn btn-ghost" onClick={onBrief}>{t.nav.brief} <Arrow /></button>
            <div style={{ marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--text-on-dark-mute)" }}>
              INFO@HQWS.COM &nbsp;·&nbsp; +971 (0)4 395 8881
            </div>
          </div>
          <div className="footer-col">
            <h4>{t.nav.work}</h4>
            <ul>
              {window.HQWS_DATA.CATEGORIES.map(c => (
                <li key={c.id}><a onClick={() => navigate("work", { cat: c.id })} href="#work">{c[lang]}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a onClick={() => navigate("capabilities")} href="#capabilities">{t.nav.capabilities}</a></li>
              <li><a onClick={() => navigate("about")} href="#about">{t.nav.about}</a></li>
              <li><a onClick={() => navigate("clients")} href="#clients">{t.nav.clients}</a></li>
              <li><a onClick={() => navigate("contact")} href="#contact">{t.nav.contact}</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Offices</h4>
            <ul>
              {window.HQWS_DATA.OFFICES.map(o => (
                <li key={o.city.en}>{o.city[lang]}</li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>Social</h4>
            <ul>
              <li><a href="#" onClick={e => e.preventDefault()}>Instagram</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>LinkedIn</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>YouTube</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>Vimeo</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 1996–{new Date().getFullYear()} HQ WORLDWIDE SHOWS L.L.C. · PART OF BANIJAY GROUP</div>
          <div className="ws-bar" />
          <div>HQWS.COM · DUBAI · ABU DHABI · RIYADH · SYDNEY</div>
        </div>
      </div>
    </footer>
  );
}

/* ─── BriefModal ─── */
function BriefModal({ open, onClose, lang, initialCategory }) {
  const t = HQT()[lang];
  const [cat, setCat] = useState(initialCategory || "shows");
  const [sent, setSent] = useState(false);
  useEffect(() => { if (open) { setSent(false); setCat(initialCategory || "shows"); } }, [open, initialCategory]);
  if (!open) return null;
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
        </button>
        {!sent ? (
          <>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--brand-amber)", marginBottom: 14 }}>
              { lang === "ar" ? "اطلب عرضاً" : "REQUEST A PROPOSAL" }
            </div>
            <h3>{ lang === "ar" ? "أخبرنا عن المشروع." : "Tell us about the project." }</h3>
            <p className="sub">
              { lang === "ar"
                ? "نحدّد فئة واحدة على الأقل لتوجيه طلبك إلى الفريق المناسب — لا أسعار، التصميم بحسب المشروع."
                : "Pick at least one category so we route this to the right team. No prices — every brief is bespoke." }
            </p>

            <div className="field">
              <label>{ lang === "ar" ? "نوع المشروع" : "Project category" }</label>
              <div className="cat-radio-grid">
                {window.HQWS_DATA.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" ? "الشركة / الجهة" : "Company / entity" }</label>
                <input placeholder={ lang === "ar" ? "اسم المنظمة" : "Organisation" } />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>{ lang === "ar" ? "البريد الإلكتروني" : "Work email" }</label>
                <input type="email" placeholder="name@org.com" />
              </div>
              <div className="field">
                <label>{ lang === "ar" ? "الجدول الزمني" : "Timeline" }</label>
                <select defaultValue="">
                  <option value="" disabled>{ lang === "ar" ? "اختر" : "Select" }</option>
                  <option>&lt; 8 weeks</option>
                  <option>2–6 months</option>
                  <option>6–12 months</option>
                  <option>{ lang === "ar" ? "تخطيط طويل المدى" : "Long-horizon planning" }</option>
                </select>
              </div>
            </div>

            <div className="field">
              <label>{ lang === "ar" ? "ملخّص المشروع" : "Project brief" }</label>
              <textarea placeholder={ lang === "ar" ? "ما الذي تخطّط له؟ المكان، الحجم، الجمهور…" : "What are you staging? Venue, scale, audience…" } />
            </div>

            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 28, flexWrap: "wrap" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--text-on-dark-mute)", textTransform: "uppercase" }}>
                { lang === "ar"
                  ? "يُحال إلى info@hqws.com + سير CRM"
                  : "Routed to info@hqws.com + CRM webhook"}
              </div>
              <button className="btn btn-primary" onClick={() => setSent(true)}>
                { lang === "ar" ? "أرسل الموجز" : "Send brief" } <Arrow />
              </button>
            </div>
          </>
        ) : (
          <div style={{ paddingBlock: 48, textAlign: "center" }}>
            <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--brand-gradient)", margin: "0 auto 24px", display: "grid", placeItems: "center" }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0a0a0c" strokeWidth="3"><path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
            <h3 style={{ margin: 0 }}>{ lang === "ar" ? "تمّ الاستلام." : "Brief received." }</h3>
            <p className="sub" style={{ marginTop: 12 }}>
              { lang === "ar"
                ? "سيتواصل فريق التطوير خلال يوم عمل واحد. شكراً."
                : "Our new-business team will reply within one working day. Thank you." }
            </p>
            <button className="btn btn-ghost" onClick={onClose} style={{ marginTop: 8 }}>
              { lang === "ar" ? "إغلاق" : "Close" }
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── Sticky CTA ─── */
function StickyCTA({ onClick, lang }) {
  return (
    <button className="sticky-cta" onClick={onClick}>
      <span className="pulse" />
      { lang === "ar" ? "اطلب عرضاً" : "Brief us" }
      <Arrow />
    </button>
  );
}

/* ─── Project Card ─── */
function ProjectCard({ p, lang, navigate, hideCategory }) {
  const cats = window.HQWS_DATA.CATEGORIES;
  const cat = cats.find(c => c.id === p.category);
  return (
    <article className={`work-card ${p.span || "span-4"}`} onClick={() => navigate(`case:${p.id}`)}>
      <div className="img">
        {!hideCategory && cat && <span className="cat-tag">{cat[lang]}</span>}
        <img src={p.img} alt={p.name[lang]} loading="lazy" />
      </div>
      <div className="info">
        <h3>{p.name[lang]}</h3>
        <div className="meta">
          <span>{p.location} · {p.client}</span>
          <span className="yr">{p.year}</span>
        </div>
      </div>
    </article>
  );
}

/* ─── Category Filter (chips) ─── */
function CategoryFilter({ active, setActive, lang, counts }) {
  const cats = window.HQWS_DATA.CATEGORIES;
  return (
    <div className="filter-bar">
      <span className="lbl">{ lang === "ar" ? "صفِّ حسب" : "Filter" }</span>
      <button className={`chip ${active === "all" ? "on" : ""}`} onClick={() => setActive("all")}>
        { lang === "ar" ? "الكل" : "All" } <span className="n">{counts.all}</span>
      </button>
      {cats.map(c => (
        <button key={c.id} className={`chip ${active === c.id ? "on" : ""}`} onClick={() => setActive(c.id)}>
          {c[lang]} <span className="n">{counts[c.id] || 0}</span>
        </button>
      ))}
    </div>
  );
}

/* expose */
Object.assign(window, { Arrow, HQLogo, Navbar, Footer, BriefModal, StickyCTA, ProjectCard, CategoryFilter, RightsBanner });