// Home — high-emotion, portfolio-led
// Hero · credibility strip · category tiles · featured work teaser · BE values · client wall · CTA band

const HomeHero = () => (
  <section className="hero" data-screen-label="01 Home — Hero">
    <div className="hero__media">
      <img src="media/home-hero-og.webp" alt="" loading="eager" />
    </div>
    <div className="hero__top">
      <div className="kicker" style={{ color: "rgba(246,245,239,0.7)" }}>
        <span className="dot"></span>
        <span>Experiential event production · Dubai · since 2003</span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
          <span>Live brief queue</span>
          <span className="tw-pulse-bar"><span className="b"></span><span className="b"></span><span className="b"></span></span>
        </span>
      </div>
    </div>
    <div className="hero__main">
      <div className="hero__body">
        <h1 className="hero__lockup">
          Beyond local.<br/>
          Globally <em>driven</em>.
        </h1>
        <p className="hero__sub">
          We are a Dubai-headquartered experiential event agency producing sports,
          festivals, ceremonies and brand activations across the GCC and beyond.
          End-to-end — concept, build, live delivery.
        </p>
        <div className="hero__cta">
          <BriefBtn size="xl" label="Brief us" />
          <a className="btn btn--ghost btn--xl" href="#work" onClick={(e) => { e.preventDefault(); window.go && window.go({ page: "work" }); }}>
            See the work <ArrowRight />
          </a>
        </div>
        <div className="hero__meta">
          <div className="hero__meta-item">
            <span className="hero__meta-key">Since</span>
            <span className="hero__meta-val">2003</span>
          </div>
          <div className="hero__meta-item">
            <span className="hero__meta-key">Offices</span>
            <span className="hero__meta-val">Dubai · Riyadh · Doha</span>
          </div>
          <div className="hero__meta-item">
            <span className="hero__meta-key">Credentials</span>
            <span className="hero__meta-val">Guinness World Record holder (collaboration, 2018)</span>
          </div>
          <div className="hero__meta-item">
            <span className="hero__meta-key">Languages</span>
            <span className="hero__meta-val">EN · AR · (RU / ZH on request)</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HomeMarquee = () => {
  const items = [
    "Sports Management", "Brand Activation", "Festival Production", "Conference",
    "Gala & Ceremony", "Product Launch", "Mall Activation", "Crowd Management",
    "Motorsports", "Showrunning", "Broadcast",
  ];
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {row.map((t, i) => (
          <span key={i} className="marquee__item">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1L8.6 5.4L13 7L8.6 8.6L7 13L5.4 8.6L1 7L5.4 5.4L7 1Z" fill="currentColor"/></svg>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
};

const CredibilityStrip = () => (
  <section className="bg-ink">
    <div className="container" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="credstrip">
        <div className="cred">
          <span className="cred__head">Founded</span>
          <span className="cred__main">2003 — Dubai HQ</span>
          <span className="cred__sub">Two decades, three offices</span>
        </div>
        <div className="cred">
          <span className="cred__head">Citable credential</span>
          <span className="cred__main">Guinness World Record</span>
          <span className="cred__sub">962,168 fireworks · Largest display in multiple cities · 2018 — in collaboration with GEA &amp; Fireworks by Grucci</span>
        </div>
        <div className="cred">
          <span className="cred__head">Regional first</span>
          <span className="cred__main">FEI World Cup Finals 2024</span>
          <span className="cred__sub">First Middle-East edition · Riyadh</span>
        </div>
        <div className="cred">
          <span className="cred__head">Scope</span>
          <span className="cred__main">End-to-end production</span>
          <span className="cred__sub">Concept · build · live delivery · broadcast</span>
        </div>
      </div>
    </div>
  </section>
);

const HomeCategories = ({ goWork }) => {
  const tiles = [
    { id: "sports",     label: "Sports & Motorsports",    img: "media/work-fei-world-cup-finals-2024.webp",          n: "01" },
    { id: "festival",   label: "Festivals & Entertainment", img: "media/work-alula-azimuth-festival-2024.webp",      n: "02" },
    { id: "activation", label: "Brand Activations",       img: "media/work-red-bull-car-park-drift-riyadh-2024.webp", n: "03" },
    { id: "ceremony",   label: "Ceremonies & Galas",      img: "media/work-layali-diriyah-2025.webp",                n: "04" },
    { id: "conference", label: "Conferences & Summits",   img: "media/work-loreal-kick-off-2025.webp",               n: "05" },
  ];
  return (
    <Section tone="paper">
      <SecHead
        eyebrow="Practice areas / Index 01"
        title="Five disciplines. One production house."
        lead="Filter the portfolio by what you're trying to make happen. Every category routes the right regional lead into your brief."
        right={<BriefBtn variant="outline-ink" label="Brief us" />}
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
        {tiles.map((t, i) => {
          const span = i === 0 ? 8 : i === 1 ? 4 : i === 2 ? 4 : i === 3 ? 4 : 4;
          return (
            <Reveal key={t.id} delay={i * 80} style={{ gridColumn: `span ${span}` }}>
              <button onClick={() => goWork(t.id)} style={{ display: "block", textAlign: "left", width: "100%" }}>
                <div className="work-card" style={{ gridColumn: "unset" }}>
                  <div className="work-card__media" style={{ aspectRatio: i === 0 ? "16 / 9" : "4 / 3" }}>
                    <img src={t.img} alt="" loading="lazy" />
                    <div className="work-card__overlay">
                      <div className="work-card__overlay-top">
                        <span className="chip chip--accent"><PinDot/>{t.n}</span>
                      </div>
                      <div className="work-card__overlay-bot">
                        <div>
                          <div className="work-card__title" style={{ color: "var(--paper)" }}>{t.label}</div>
                          <div className="work-card__rights" style={{ marginTop: 6 }}>
                            <span className="rights-dot"></span> Filter the work →
                          </div>
                        </div>
                        <div className="arrow"><ArrowUpRight /></div>
                      </div>
                    </div>
                  </div>
                </div>
              </button>
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
};

const HomeFeatured = ({ goCase }) => {
  const feat = PROJECTS.filter(p => p.feature);
  return (
    <Section tone="bone">
      <SecHead
        eyebrow="Featured work / Index 02"
        title="Recent productions, rights pending."
        lead="Each case study carries category · client · location · year · scale and a measurable-outcomes layer. Imagery in this prototype is reference-only until per-project usage permission is confirmed."
        right={
          <button className="btn btn--outline-ink" onClick={() => window.go({ page: "work" })}>
            All work <ArrowRight />
          </button>
        }
      />
      <div className="work-grid">
        {feat.map((p, i) => (
          <Reveal key={p.slug} className={`work-card ${i === 0 ? "work-card--feat" : ""}`} delay={i * 100}>
            <button onClick={() => goCase(p.slug)} style={{ display: "contents", textAlign: "left" }}>
              <div className="work-card__media">
                <img src={p.image} alt="" loading="lazy" />
                <div className="work-card__overlay">
                  <div className="work-card__overlay-top">
                    <span className="chip"><PinDot/>{CATEGORIES.find(c => c.id === p.category)?.label}</span>
                    {p.credibility && <span className="chip chip--accent">{p.credibility}</span>}
                  </div>
                  <div className="work-card__overlay-bot">
                    <div>
                      <div className="work-card__rights"><span className="rights-dot"></span> Rights status: clearance pending</div>
                    </div>
                    <div className="arrow"><ArrowUpRight /></div>
                  </div>
                </div>
              </div>
              <div>
                <div className="work-card__title">{p.title}</div>
                <div className="work-card__meta" style={{ marginTop: 8 }}>
                  <span>{p.client}</span><span className="sep"></span>
                  <span>{p.location}</span><span className="sep"></span>
                  <span>{p.year}</span>
                </div>
              </div>
            </button>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

const HomeValues = () => (
  <Section tone="ink">
    <SecHead
      eyebrow="BE values / Index 03"
      title="The 'BE' device."
      lead="A working brief reads the same to a producer in Dubai, a stagehand in Riyadh and a security lead in Doha. These six words keep that brief honest."
    />
    <div className="values">
      {VALUES.map((v, i) => (
        <Reveal key={v.word} className="value" delay={i * 60}>
          <div>
            <div className="value__be">BE / 0{i + 1}</div>
            <div className="value__word">{v.word}</div>
          </div>
          <div className="value__desc">{v.desc}</div>
        </Reveal>
      ))}
    </div>
  </Section>
);

const HomeClients = () => {
  const placeholders = 8 - CLIENTS_PERMITTED.length;
  return (
    <Section tone="paper">
      <SecHead
        eyebrow="Selected partners / Index 04"
        title="Trusted by the region's largest IPs."
        lead="Permitted-set logos only — the full client roster is shared on request, subject to NDA and brand-usage clearance."
      />
      <div className="client-wall">
        {CLIENTS_PERMITTED.map(c => (
          <div key={c.name} className="client-tile" title={c.name}>
            <img src={c.src} alt={c.name} loading="lazy" />
          </div>
        ))}
        {Array.from({ length: placeholders }).map((_, i) => (
          <div key={i} className="client-tile client-tile--placeholder">
            Logo<br/>pending clearance
          </div>
        ))}
      </div>
      <p style={{ marginTop: 18, color: "var(--muted)", fontSize: 13, fontFamily: "JetBrains Mono, monospace" }}>
        + 40 more permitted on request · Confirmed partners: <span style={{ color: "var(--ink)" }}>Red Bull · NEOM · AlUla · Diriyah · FIFA Club World Cup 2023 · GEA · Saudi Ministry of Tourism · Mastercard · BMW · Nissan · Ford · Lenovo · ADSC</span>
      </p>
    </Section>
  );
};

const HomeCTA = () => (
  <section className="bg-yellow">
    <div className="container" style={{ padding: "clamp(64px, 9vw, 128px) var(--pad)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end", flexWrap: "wrap" }}>
        <div>
          <div className="kicker" style={{ color: "rgba(10,10,12,0.6)" }}>
            <span className="dot" style={{ background: "var(--ink)" }}></span>
            <span>Working on an RFP?</span>
          </div>
          <h2 style={{ fontWeight: 800, fontSize: "clamp(48px, 8vw, 140px)", letterSpacing: "-0.035em", lineHeight: 0.9, margin: "16px 0 0", textWrap: "balance" }}>
            Let's get<br/>on a brief call.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-end" }}>
          <BriefBtn variant="ink" size="xl" label="Brief us" />
          <a className="btn btn--outline-ink btn--lg" href="tel:+97143553444">+971 4 355 3444 <ArrowRight /></a>
        </div>
      </div>
    </div>
  </section>
);

const Home = ({ go }) => (
  <div className="page" data-screen-label="01 Home">
    <HomeHero />
    <HomeMarquee />
    <CredibilityStrip />
    <HomeCategories goWork={(cat) => go({ page: "work", filter: cat })} />
    <HomeFeatured goCase={(slug) => go({ page: "case", slug })} />
    <HomeValues />
    <HomeClients />
    <HomeCTA />
  </div>
);

Object.assign(window, { Home });