// Contact — three offices, category-qualified brief

const PhoneIcon = () => (
  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
    <path d="M3 4.5c.5-1 1.5-1.5 2.5-1.5h.5l1 2.5-1 1c.5 1.5 1.5 2.5 3 3l1-1 2.5 1v.5c0 1-.5 2-1.5 2.5-3 1-7-3-8-6z" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const MailIcon = () => (
  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
    <rect x="2" y="3.5" width="12" height="9" rx="1.3" stroke="currentColor" strokeWidth="1.3" />
    <path d="M2.5 4.5l5.5 4 5.5-4" stroke="currentColor" strokeWidth="1.3" />
  </svg>
);

const Contact = () => (
  <div className="page" data-screen-label="06 Contact">
    <section className="bg-ink" style={{ paddingTop: "clamp(80px, 10vw, 140px)", paddingBottom: "clamp(56px, 7vw, 96px)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", flexWrap: "wrap" }}>
          <div>
            <Kicker>Index 06 / Contact · Three offices, one team</Kicker>
            <h1 className="t-h1" style={{ marginTop: 16, color: "var(--paper)" }}>
              Tell us about<br/>the event.
            </h1>
            <p className="t-lead" style={{ marginTop: 20, color: "rgba(246,245,239,0.7)", maxWidth: 600 }}>
              The fastest path is the structured brief — it routes to the right regional
              lead automatically. For everything else, the three offices below.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <BriefBtn size="xl" label="Start a brief" />
              <a className="btn btn--ghost btn--xl" href="mailto:info@blinkexperience.com">
                info@blinkexperience.com <ArrowRight />
              </a>
            </div>
          </div>
          <div style={{ background: "var(--ink-2)", borderRadius: 16, padding: 28, color: "var(--paper)" }}>
            <div className="t-mono" style={{ color: "var(--accent)", marginBottom: 14 }}>NEW BUSINESS</div>
            <div style={{ fontSize: 14, color: "rgba(246,245,239,0.8)", lineHeight: 1.6 }}>
              For proposals, RFPs and tenders:
            </div>
            <a href="mailto:proposals@blinkexperience.com" style={{ display: "block", marginTop: 6, fontWeight: 600, fontSize: 18 }}>
              proposals@blinkexperience.com
            </a>
            <div style={{ height: 1, background: "var(--line-dk)", margin: "20px 0" }}></div>
            <div className="t-mono" style={{ color: "rgba(246,245,239,0.6)", marginBottom: 8 }}>HOURS · CONFIRM WORKING WEEK</div>
            <div style={{ fontSize: 14, lineHeight: 1.6 }}>
              Mon–Fri 09:00–18:00 GST<br/>
              <span style={{ color: "rgba(246,245,239,0.55)", fontSize: 12 }}>(schema-listed · client to confirm — unusual for GCC)</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Offices */}
    <Section tone="paper">
      <SecHead eyebrow="Offices" title="Dubai · Riyadh · Doha." />
      <div className="offices">
        {OFFICES.map(o => (
          <Reveal key={o.city} className={`office ${o.isHQ ? "office--hq" : ""}`}>
            <span className="office__flag">{o.flag}</span>
            <div>
              <div className="office__role">{o.role}</div>
              <div className="office__city">{o.city}</div>
            </div>
            <div className="office__address">{o.address}</div>
            {o.coords && (
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted)", letterSpacing: "0.05em" }}>
                {o.coords} · <span style={{ color: "var(--accent-ink)", background: "var(--accent)", padding: "2px 6px", borderRadius: 3 }}>{o.coordsNote}</span>
              </div>
            )}
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: "auto", paddingTop: 24 }}>
              {o.phoneRaw ? (
                <a className="office__phone" href={`tel:${o.phoneRaw}`}><PhoneIcon/> {o.phone}</a>
              ) : (
                <span className="office__phone" style={{ opacity: 0.5 }}><PhoneIcon/> {o.phone}</span>
              )}
              <a className="office__email" href={`mailto:${o.email}`}><MailIcon/> {o.email}</a>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>

    {/* Map placeholder + departments */}
    <section className="bg-bone">
      <div className="container" style={{ padding: "clamp(64px, 8vw, 112px) var(--pad)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 32, alignItems: "stretch" }}>
          <div style={{ background: "var(--ink)", borderRadius: 16, position: "relative", overflow: "hidden", minHeight: 460, color: "var(--paper)" }}>
            {/* Stylised map placeholder */}
            <svg viewBox="0 0 800 460" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="800" height="460" fill="url(#grid)" />
              {/* Three pin points roughly arranged */}
              {[
                { cx: 260, cy: 240, label: "Dubai", c: "#faed21", hq: true },
                { cx: 420, cy: 280, label: "Riyadh", c: "#faed21" },
                { cx: 340, cy: 230, label: "Doha", c: "#faed21" },
              ].map((p, i) => (
                <g key={i}>
                  <circle cx={p.cx} cy={p.cy} r="40" fill="rgba(250,237,33,0.08)" />
                  <circle cx={p.cx} cy={p.cy} r="20" fill="rgba(250,237,33,0.15)" />
                  <circle cx={p.cx} cy={p.cy} r="6" fill={p.c} />
                  <text x={p.cx + 14} y={p.cy + 4} fontFamily="JetBrains Mono, monospace" fontSize="13" fontWeight="600" fill="#fff">
                    {p.label} {p.hq && "· HQ"}
                  </text>
                </g>
              ))}
              <text x="40" y="40" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="rgba(255,255,255,0.5)" letterSpacing="0.1em">GCC FOOTPRINT — SCHEMATIC</text>
              <text x="40" y="440" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.5)">REPLACE WITH VERIFIED MAP EMBED · LAZY-LOADED</text>
            </svg>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              { dept: "New business",     email: "proposals@blinkexperience.com", note: "RFPs, tenders, proposal requests" },
              { dept: "Press",            email: "press@blinkexperience.com",     note: "Media enquiries, interviews" },
              { dept: "Careers",          email: "join@blinkexperience.com",      note: "Producers, technical, creative" },
              { dept: "General",          email: "info@blinkexperience.com",      note: "Everything else" },
            ].map(d => (
              <div key={d.dept} style={{ background: "var(--paper)", borderRadius: 12, padding: 22, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
                <div>
                  <div className="t-mono" style={{ color: "var(--muted)" }}>{d.dept.toUpperCase()}</div>
                  <a href={`mailto:${d.email}`} style={{ fontWeight: 700, fontSize: 16, display: "block", marginTop: 4 }}>{d.email}</a>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{d.note}</div>
                </div>
                <ArrowUpRight />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* Honest gaps band */}
    <section className="bg-ink">
      <div className="container" style={{ padding: "64px var(--pad)" }}>
        <Eyebrow>Honest gaps · client to fill</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 24 }}>
          {[
            { k: "Doha phone number", v: "Not published on the live site. We've left the contact card flagged." },
            { k: "Working week", v: "Schema lists Mon–Fri 09:00–18:00. Unusual for GCC — confirm with client before publishing." },
            { k: "Dubai map pin", v: "Schema lat/lng 25.2206, 55.2860. Verify the pin resolves to The Offices 2, One Central before embedding." },
            { k: "WhatsApp", v: "No verified WhatsApp business number on the live site. Wire only if supplied." },
            { k: "Founder name", v: "Ahmed Al Shehhi listed by aggregators (Crunchbase). Not confirmed on-site — re-verify before publishing." },
            { k: "Per-project rights", v: "Every published photo & event name needs client clearance + photographer credit. None included on the live site by default." },
          ].map(g => (
            <div key={g.k} style={{ color: "rgba(246,245,239,0.8)", fontSize: 13, lineHeight: 1.55 }}>
              <div className="t-mono" style={{ color: "var(--accent)", marginBottom: 6 }}>{g.k.toUpperCase()}</div>
              {g.v}
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

Object.assign(window, { Contact });