// About — story since 2003, Guinness/FEI credibility, BE values, leadership placeholder

const TIMELINE = [
  { y: "2003", t: "Founded in Dubai",          d: "Blink Experience opens in Dubai as a regional experiential agency." },
  { y: "2018", t: "Guinness World Record",     d: "Largest fireworks display in multiple cities — 962,168 fireworks. In collaboration with GEA and Fireworks by Grucci, across Dammam · Riyadh · Jeddah." },
  { y: "2019", t: "Riyadh office",             d: "Permanent Riyadh team established to support a growing KSA portfolio of sports and festival work." },
  { y: "2023", t: "Doha office",               d: "Qatar office at QFC Tower 1 opens — completing the three-market footprint." },
  { y: "2024", t: "FEI World Cup Finals",      d: "First FEI World Cup Finals staged in the Middle East — produced in Riyadh." },
  { y: "2025", t: "Today",                     d: "Continuing to deliver tournament-scale sports, multi-day festivals, ceremonial moments and brand activations across the region." },
];

const About = () => (
  <div className="page" data-screen-label="05 About">
    {/* Big lockup */}
    <section className="bg-ink" style={{ paddingTop: "clamp(80px, 12vw, 160px)", paddingBottom: "clamp(64px, 8vw, 96px)" }}>
      <div className="container">
        <Kicker>Index 05 / About · Since 2003</Kicker>
        <h1 className="t-display" style={{ marginTop: 24, color: "var(--paper)" }}>
          Crafting<br/>
          experiences,<br/>
          <span style={{ background: "linear-gradient(92deg, var(--c-yellow), var(--c-magenta), var(--c-cyan), var(--c-green), var(--c-yellow))", backgroundSize: "300% 100%", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", animation: "hueShift 9s linear infinite" }}>connecting</span> globally.
        </h1>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginTop: 64, alignItems: "start" }}>
          <p className="t-lead" style={{ color: "rgba(246,245,239,0.78)", maxWidth: 560 }}>
            We are an end-to-end experiential event agency, headquartered in Dubai
            since 2003. We design, build and deliver sports tournaments, festivals,
            ceremonies and brand activations — in-house, across the GCC and beyond.
          </p>
          <p style={{ color: "rgba(246,245,239,0.7)", maxWidth: 560, fontSize: 16, lineHeight: 1.6 }}>
            Most of what we make is one-off and one-shot. A camel race in AlUla, a
            broadcast-grade competition floor in Riyadh, a wellness festival inside a
            UNESCO heritage site. So we organise around the work — a named producer,
            a regional lead, the right specialist — never around the org chart.
          </p>
        </div>
      </div>
    </section>

    {/* Guinness callout */}
    <section className="bg-yellow">
      <div className="container" style={{ padding: "80px var(--pad)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 48, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ minWidth: 200 }}>
            <div className="t-mono" style={{ color: "rgba(10,10,12,0.6)" }}>VERIFIED · GUINNESSWORLDRECORDS.COM</div>
            <div style={{ fontWeight: 800, fontSize: "clamp(64px, 10vw, 140px)", lineHeight: 0.9, letterSpacing: "-0.04em", marginTop: 16 }}>
              962,168
            </div>
            <div style={{ marginTop: 8, fontWeight: 600 }}>fireworks. Across three cities. One night.</div>
          </div>
          <div style={{ maxWidth: 640 }}>
            <h2 style={{ fontSize: "clamp(28px, 3vw, 44px)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.02em", margin: 0 }}>
              Guinness World Record — "Largest fireworks display in multiple cities."
            </h2>
            <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.55, opacity: 0.85 }}>
              23 September 2018, in Dammam, Riyadh and Jeddah. Delivered in collaboration with
              <strong> Saudi General Entertainment Authority (GEA)</strong> and
              <strong> Fireworks by Grucci</strong>. Independently verified — we attribute it
              as a collaboration, not a solo claim. It remains the single strongest citable credential
              on this site.
            </p>
            <a href="https://www.guinnessworldrecords.com/" target="_blank" rel="noopener" className="btn btn--ink" style={{ marginTop: 24 }}>
              See the record <ArrowUpRight />
            </a>
          </div>
        </div>
      </div>
    </section>

    {/* Timeline */}
    <Section tone="paper">
      <SecHead eyebrow="Index 05.02 / Story" title="Two decades, three markets, one team." />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
        {/* Left rail — the BE loop, sticky */}
        <div style={{ position: "sticky", top: 90, alignSelf: "start", height: "fit-content", paddingRight: 32 }}>
          <div style={{ fontWeight: 800, fontSize: "clamp(80px, 9vw, 160px)", letterSpacing: "-0.04em", lineHeight: 0.85 }}>
            BE.<br/>2003<span style={{ color: "var(--accent)" }}>—</span><br/>now.
          </div>
          <BELoop />
        </div>
        <div>
          {TIMELINE.map((m, i) => (
            <Reveal key={m.y} delay={i * 60} style={{ borderTop: i === 0 ? "1px solid var(--line)" : 0, borderBottom: "1px solid var(--line)", padding: "32px 0", display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, alignItems: "start" }}>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontWeight: 600, fontSize: 14, letterSpacing: "0.04em", color: "var(--accent-ink)" }}>{m.y}</div>
              <div>
                <h3 className="t-h3">{m.t}</h3>
                <p style={{ marginTop: 8, color: "var(--muted)", fontSize: 15, lineHeight: 1.55, maxWidth: 540 }}>{m.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>

    {/* BE values */}
    <Section tone="ink">
      <SecHead eyebrow="Index 05.03 / Values" title="BE." lead="A six-word brief everyone in the building can read the same way." />
      <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>

    {/* Leadership — placeholder portraits */}
    <Section tone="paper">
      <SecHead
        eyebrow="Index 05.04 / Leadership"
        title="The people in the room."
        right={<span className="t-mono" style={{ color: "var(--muted)" }}>4 portraits · consent pending</span>}
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {[
          { name: "Ahmed Al Shehhi", role: "Founder & CEO", note: "Name aggregator-sourced · client to confirm" },
          { name: "Name pending", role: "Managing Director, KSA" },
          { name: "Name pending", role: "Head of Sports" },
          { name: "Name pending", role: "Head of Festivals" },
        ].map((p, i) => (
          <div key={i}>
            <div style={{ background: "var(--bone)", aspectRatio: "3 / 4", borderRadius: 12, position: "relative", overflow: "hidden", display: "grid", placeItems: "center" }}>
              <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 8px, transparent 8px 16px)" }}></div>
              <div style={{ position: "relative", color: "var(--muted)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", textAlign: "center", padding: 24 }}>
                Portrait<br/>placeholder<br/><span style={{ opacity: 0.6 }}>consent pending</span>
              </div>
            </div>
            <div style={{ marginTop: 14, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em" }}>{p.name}</div>
            <div style={{ color: "var(--muted)", fontSize: 13 }}>{p.role}</div>
            {p.note && <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "var(--accent-ink)", marginTop: 6, padding: "3px 8px", background: "var(--accent)", borderRadius: 999, display: "inline-block", letterSpacing: "0.05em" }}>{p.note}</div>}
          </div>
        ))}
      </div>
    </Section>

    {/* CTA */}
    <section className="bg-bone">
      <div className="container" style={{ padding: "100px var(--pad)", textAlign: "center" }}>
        <h2 style={{ fontSize: "clamp(40px, 6vw, 96px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 0.95, margin: 0, maxWidth: 1000, textWrap: "balance", marginLeft: "auto", marginRight: "auto" }}>
          We're hiring across all three offices.
        </h2>
        <p className="t-lead" style={{ marginTop: 20, color: "var(--muted)", maxWidth: 560, marginLeft: "auto", marginRight: "auto" }}>
          Producers, technical leads, creatives, crowd-safety specialists. See open roles or send a portfolio in.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }}>
          <a href="#" className="btn btn--ink btn--lg">See open roles <ArrowRight /></a>
          <a href="mailto:join@blinkexperience.com" className="btn btn--outline-ink btn--lg">Send a portfolio</a>
        </div>
      </div>
    </section>
  </div>
);

Object.assign(window, { About });