// Page components — Home, Exhibitions index/detail, Artists index/detail,
// Viewing Rooms, Rekord, About, Visit.
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;
const D = window.EFIE_DATA;

// ---------------- HOME ----------------
function HomePage({ goTo, openEnquire }) {
  const current = D.EXHIBITIONS.find(e => e.slug === "in-abstracto-in-concreto");
  const programme = [
    D.EXHIBITIONS.find(e => e.slug === "in-abstracto-in-concreto"),
    D.EXHIBITIONS.find(e => e.slug === "campos-pons-venice-2026"),
    D.EXHIBITIONS.find(e => e.slug === "this-bloom-i-borrow"),
    D.EXHIBITIONS.find(e => e.slug === "shape-of-things-to-come")
  ];
  const featured = [
    D.ARTISTS_REPRESENTED[0], D.ARTISTS_REPRESENTED[3], D.ARTISTS_REPRESENTED[2], D.ARTISTS_REPRESENTED[5]
  ];

  return (
    <main className="page-fade" data-screen-label="01 Home">

      {/* HERO */}
      <section className="hero container">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="hero__meta eyebrow">
              <span><span className="dot"></span>Now showing · Dubai</span>
              <span style={{ color: "var(--muted)" }}>{current.start} — {current.end}</span>
            </div>
            <h1 className="hero__title display-1" data-comment-anchor="home-hero-title">
              In <em style={{ fontStyle: "italic" }}>Abstracto</em>,
              <br/>In Concreto
            </h1>
            <p className="hero__sub lead">On Memory and Presence — a group exhibition in four chambers.</p>
            <p className="hero__intro body-l">
              Curated by Brice Arsène Yonkeu and held across the ground floor of Warehouse 61, the exhibition assembles four practices that hold abstraction and the concrete in tension — Luke Agada, Tunji Adeniyi-Jones, Ludovic Nkoth and Naïla Opiangah.
            </p>
            <div className="hero__cta">
              <button className="btn btn--primary" onClick={() => goTo({ page: "exhibition", slug: current.slug })}>
                View exhibition <span className="arrow">→</span>
              </button>
              <button className="btn btn--text" onClick={() => openEnquire({ kind: "exhibition", title: current.title, image: current.hero, label: "Exhibition · In Abstracto, In Concreto", meta: "Curatorial enquiry" })}>
                Enquire about a work
              </button>
            </div>
          </div>
          <div>
            <div className="hero__image">
              <img src={current.hero} alt="Install view — In Abstracto, In Concreto" />
            </div>
            <div className="hero__caption">
              <div>
                <div className="serif italic" style={{ fontSize: 17 }}>Install view, In Abstracto, In Concreto</div>
                <div className="mono" style={{ marginTop: 6 }}>Photography · Efie Gallery</div>
              </div>
              <span className="creditpending">credit pending</span>
            </div>
          </div>
        </div>
      </section>

      {/* PROGRAMME STRIP */}
      <section className="prog container">
        {programme.map((p, i) => p && (
          <div key={p.slug} className="prog__row" onClick={() => goTo({ page: "exhibition", slug: p.slug })}>
            <span className="prog__num">{String(i+1).padStart(2,"0")}</span>
            <span className="prog__name serif">{p.title}{p.subtitle ? <em> · {p.subtitle}</em> : null}</span>
            <span className={`prog__status prog__status--${p.status}`}>{p.status}</span>
            <span className="prog__dates">{p.start} — {p.end}</span>
            <span className="prog__arrow">→</span>
          </div>
        ))}
      </section>

      {/* FEATURED ARTISTS */}
      <section className="section container">
        <div className="section__head">
          <div className="eyebrow"><span className="dot"></span>Represented</div>
          <h2 className="display-2">Eight artists working between the continent and its diaspora.</h2>
          <a onClick={() => goTo({ page: "artists" })} className="link mono" href="#">View the full roster →</a>
        </div>
        <div className="featured">
          {featured.map((a, i) => (
            <article key={a.slug} className="featured__card" onClick={() => goTo({ page: "artist", slug: a.slug })}>
              <div className="featured__img"><img src={a.image} alt={a.name} /></div>
              <div className="featured__cap">
                <div className="featured__name">{a.name}</div>
                <div className="featured__num">{String(i+1).padStart(2,"0")} / 08</div>
              </div>
              <div className="featured__meta">{a.born} · {a.lead}</div>
            </article>
          ))}
        </div>
      </section>

      {/* MISSION */}
      <section className="mission container">
        <div className="mission__inner">
          <div className="eyebrow"><span className="dot"></span>Mission</div>
          <p className="mission__quote display-2" style={{ marginTop: 24 }}>
            “Efie” means home in Twi. We champion modern and contemporary <em style={{fontStyle:"italic"}}>African and diasporic</em> artists — and the conversations between them — from a two-storey gallery on Alserkal Avenue.
          </p>
          <div className="mission__attr">
            <span className="bar"></span>
            <span>Valentina, Kwame & Kobi Mintah · Founders</span>
          </div>
        </div>
      </section>

      {/* REKORD TEASER */}
      <section className="rekord-band">
        <div className="container">
          <div className="rekord-band__grid">
            <img src="media/rekord-listening-room.webp" alt="Rekord Gallery listening room" />
            <div>
              <div className="eyebrow mono">A cultural extension</div>
              <h2 className="display-2">Rekord Gallery — listening, film, community.</h2>
              <p>
                Beneath the gallery, reached by a trap door, sits a hi-fi listening room anchored by a founders' collection of more than 2,000 vinyl and shellac records dating to the 1940s. Open programming runs across music, film and conversation.
              </p>
              <button className="btn btn--primary" onClick={() => goTo({ page: "rekord" })}>
                Enter Rekord <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <section className="newsletter container">
        <div className="newsletter__grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Stay close</div>
            <h2 className="display-3" style={{ marginTop: 18, maxWidth: "20ch" }}>The Efie newsletter — exhibitions, viewing rooms, and the residency.</h2>
          </div>
          <div>
            <form className="newsletter__form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="Your email address" />
              <button type="submit">Subscribe →</button>
            </form>
            <p className="newsletter__note">By subscribing you consent to receive emails from Efie Gallery. Unsubscribe at any time.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------------- EXHIBITIONS INDEX ----------------
function ExhibitionsPage({ goTo }) {
  const [tab, setTab] = useStateP("current");
  const rows = D.EXHIBITIONS.filter(e => e.status === tab);
  const counts = {
    current: D.EXHIBITIONS.filter(e => e.status === "current").length,
    upcoming: D.EXHIBITIONS.filter(e => e.status === "upcoming").length,
    past: D.EXHIBITIONS.filter(e => e.status === "past").length
  };

  return (
    <main className="page-fade" data-screen-label="02 Exhibitions">
      <section className="page-head container">
        <div className="page-head__grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Programme</div>
            <h1 className="page-head__title display-1" style={{ marginTop: 18 }}>Exhibitions</h1>
            <p className="page-head__intro">A continually updated programme of solo and group exhibitions at Warehouse 61, and the gallery's presentations in international art fairs and biennials.</p>
          </div>
          <div className="mono" style={{ paddingBottom: 12 }}>{D.EXHIBITIONS.length} entries · 2025 — 2026</div>
        </div>
      </section>

      <section className="container">
        <div className="tabs" role="tablist">
          {[["current","Current"],["upcoming","Upcoming"],["past","Past"]].map(([k, label]) => (
            <button key={k} data-on={tab===k} onClick={() => setTab(k)} role="tab" aria-selected={tab===k}>
              {label}<span className="tabs__count">{counts[k] || 0}</span>
            </button>
          ))}
        </div>
      </section>

      <section className="ex-list container">
        {rows.length === 0 && (
          <div style={{ padding: 64, textAlign: "center", color: "var(--muted)" }}>
            <p className="lead">No exhibitions in this tab. See current programming.</p>
          </div>
        )}
        {rows.map((ex) => (
          <article key={ex.slug} className="ex-row" onClick={() => goTo({ page: "exhibition", slug: ex.slug })}>
            <div className="ex-row__img"><img src={ex.hero} alt={ex.title} /></div>
            <div>
              <div className="eyebrow"><span className="dot"></span>{ex.status}</div>
              <h2 className="ex-row__title display-2">{ex.title}</h2>
              {ex.subtitle && <p className="ex-row__sub lead">{ex.subtitle}</p>}
              <dl className="ex-row__meta">
                <div><dt>Dates</dt><dd>{ex.start} — {ex.end}</dd></div>
                <div><dt>Location</dt><dd>{ex.location}</dd></div>
                <div><dt>Artists</dt><dd>{ex.artists.join(", ")}</dd></div>
                {ex.curator && <div><dt>Curator</dt><dd>{ex.curator}</dd></div>}
              </dl>
            </div>
          </article>
        ))}
      </section>
    </main>
  );
}

// ---------------- EXHIBITION DETAIL ----------------
function ExhibitionDetailPage({ slug, goTo, openEnquire }) {
  const ex = D.EXHIBITIONS.find(e => e.slug === slug) || D.EXHIBITIONS[0];

  return (
    <main className="page-fade" data-screen-label={`02b Exhibition · ${ex.title}`}>
      <section className="container ex-hero">
        <button onClick={() => goTo({ page: "exhibitions" })} className="mono" style={{ marginBottom: 32 }}>← All exhibitions</button>
        <div className="ex-hero__meta eyebrow">
          <span><span className="dot"></span>{ex.status}</span>
          <span>{ex.start} — {ex.end}</span>
          <span>{ex.location}</span>
        </div>
        <h1 className="ex-hero__title display-1" data-comment-anchor="ex-detail-title">{ex.title}</h1>
        {ex.subtitle && <p className="ex-hero__subtitle lead">{ex.subtitle}</p>}
        <div className="ex-hero__image"><img src={ex.hero} alt={ex.title} /></div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="serif italic" style={{ fontSize: 17, color: "var(--muted)" }}>Hero image · {ex.title}</span>
          <span className="creditpending">credit pending</span>
        </div>
      </section>

      <section className="container ex-info">
        <div className="ex-info__col">
          <h3>Artists</h3>
          <ul>
            {ex.artists.map(a => <li key={a}>{a}</li>)}
          </ul>
        </div>
        <div className="ex-info__col">
          <h3>{ex.curator ? "Curator" : "Programme"}</h3>
          <p>{ex.curator || "Efie Gallery"}</p>
          <h3 style={{ marginTop: 28 }}>Dates</h3>
          <p>{ex.start} — {ex.end}</p>
        </div>
      </section>

      {ex.essay.length > 0 && (
        <section className="container ex-essay">
          <div className="ex-essay__label">Curatorial Text</div>
          <div className="ex-essay__body">
            {ex.essay.map((para, i) => <p key={i}>{para}</p>)}
          </div>
        </section>
      )}

      {ex.works.length > 0 && (
        <section className="container works">
          <div className="section__head" style={{ marginBottom: 32 }}>
            <div className="eyebrow"><span className="dot"></span>Selected works</div>
            <h2 className="display-3">Available works from the exhibition.</h2>
            <span className="mono">{ex.works.length} works · POA</span>
          </div>
          <div className="works__grid">
            {ex.works.map((src, i) => (
              <figure key={src} className="work">
                <div className="work__frame"><img src={src} alt={`Work ${i+1}`} /></div>
                <figcaption className="work__cap">
                  <div>
                    <div className="work__title">Untitled work, {i + 1}</div>
                    <div className="work__credit">Artist tbd · year · medium · [credit pending]</div>
                  </div>
                  <button className="work__enq" onClick={(e) => { e.stopPropagation(); openEnquire({ kind: "work", title: `Work ${i+1} — ${ex.title}`, image: src, label: "Artwork enquiry", meta: "[credit pending] · POA" }); }}>
                    Enquire
                  </button>
                </figcaption>
              </figure>
            ))}
          </div>
        </section>
      )}

      {ex.install.length > 0 && (
        <section className="container install">
          <div className="section__head" style={{ marginBottom: 32 }}>
            <div className="eyebrow"><span className="dot"></span>Install views</div>
            <h2 className="display-3">Inside the chambers.</h2>
            <span className="mono">{ex.install.length} views</span>
          </div>
          <div className="install__grid">
            {ex.install.slice(0, 5).map((src, i) => (
              <div key={src} className={`install__cell install__cell--${"abcde"[i]}`}>
                <img src={src} alt={`Install view ${i+1}`} />
              </div>
            ))}
          </div>
        </section>
      )}

      <section className="container" style={{ padding: "96px 0", borderTop: "1px solid var(--border)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <h2 className="display-2" style={{ maxWidth: "16ch", textWrap: "balance" }}>
            Considering a work from <em style={{ fontStyle: "italic" }}>{ex.title}</em>?
          </h2>
          <div>
            <p className="body-l" style={{ color: "var(--muted)", maxWidth: "48ch", marginBottom: 28 }}>
              Pricing is on enquiry only. A member of the team will respond with the credit line, availability and price discreetly. We are also pleased to arrange a private view by appointment.
            </p>
            <button className="btn btn--primary" onClick={() => openEnquire({ kind: "exhibition", title: ex.title, image: ex.hero, label: "Exhibition enquiry", meta: ex.start + " — " + ex.end })}>
              Enquire about this exhibition <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------------- ARTISTS INDEX ----------------
function ArtistsPage({ goTo }) {
  return (
    <main className="page-fade" data-screen-label="03 Artists">
      <section className="page-head container">
        <div className="page-head__grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Roster</div>
            <h1 className="page-head__title display-1" style={{ marginTop: 18 }}>Artists</h1>
            <p className="page-head__intro">The artists Efie Gallery represents — and a separate list of those the gallery has exhibited. Represented and exhibited are kept distinct.</p>
          </div>
          <div className="mono" style={{ paddingBottom: 12 }}>
            {D.ARTISTS_REPRESENTED.length} represented · {D.ARTISTS_EXHIBITED.length} exhibited
          </div>
        </div>
      </section>

      <section className="container">
        <div className="section__head" style={{ paddingTop: 56, marginBottom: 24, borderBottom: 0 }}>
          <div className="eyebrow"><span className="dot"></span>Represented</div>
          <h2 className="display-3">The current roster.</h2>
          <span className="mono">A — Z · 2026</span>
        </div>
        <div className="artists-grid">
          {D.ARTISTS_REPRESENTED.map((a) => (
            <article key={a.slug} className="artist-card" onClick={() => goTo({ page: "artist", slug: a.slug })}>
              <div className="artist-card__frame"><img src={a.image} alt={a.name} /></div>
              <h3 className="artist-card__name">{a.name}</h3>
              <div className="artist-card__meta">{a.born} · {a.lives}</div>
            </article>
          ))}
        </div>
      </section>

      <section className="container exhibited-list">
        <div>
          <div className="eyebrow"><span className="dot"></span>Also exhibited</div>
          <p style={{ color: "var(--muted)", marginTop: 18, maxWidth: "42ch" }}>
            Artists, curators and collaborators whose work has appeared in Efie Gallery programming. This list is kept distinct from the represented roster.
          </p>
        </div>
        <ul className="exhibited-list__names">
          {D.ARTISTS_EXHIBITED.map((a, i) => (
            <li key={a.name}>{a.name}{i < D.ARTISTS_EXHIBITED.length - 1 ? "," : ""}</li>
          ))}
        </ul>
      </section>
    </main>
  );
}

// ---------------- ARTIST DETAIL ----------------
function ArtistDetailPage({ slug, goTo, openEnquire }) {
  const a = D.ARTISTS_REPRESENTED.find(x => x.slug === slug) || D.ARTISTS_REPRESENTED[0];
  const works = ["media/photo-04.webp","media/artwork-konate-teal.webp","media/artwork-blue-grid.webp","media/artwork-owusu-coins.webp","media/graphic-01.webp","media/photo-07.webp"];
  return (
    <main className="page-fade" data-screen-label={`03b Artist · ${a.name}`}>
      <section className="container artist-hero">
        <div>
          <button onClick={() => goTo({ page: "artists" })} className="mono" style={{ marginBottom: 24 }}>← All artists</button>
          <div className="artist-hero__img"><img src={a.image} alt={a.name} /></div>
        </div>
        <div>
          <div className="artist-hero__meta">{a.born} · {a.lives}</div>
          <h1 className="artist-hero__name display-1" data-comment-anchor="artist-name">{a.name}</h1>
          <p className="artist-hero__bio">
            Across three decades of practice, {a.name.split(" ")[0]} has developed a body of work that — to use the brief's language — sits between the continent and its diaspora. The full bio, CV and exhibition history are maintained as long-form on this dossier; the gallery is pleased to share confidential availability lists on request.
          </p>
          <div className="artist-hero__tags">
            <span className="tag">{a.lead}</span>
            <span className="tag">Represented since 2022</span>
            <span className="tag">CV on request</span>
          </div>
          <div style={{ marginTop: 36, display: "flex", gap: 16 }}>
            <button className="btn btn--primary" onClick={() => openEnquire({ kind: "artist", title: a.name, image: a.image, label: "Artist enquiry", meta: a.lead })}>
              Enquire about availability <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost">Download CV</button>
          </div>
        </div>
      </section>

      <section className="container works" style={{ borderTop: "1px solid var(--border)" }}>
        <div className="section__head" style={{ marginBottom: 32 }}>
          <div className="eyebrow"><span className="dot"></span>Selected works</div>
          <h2 className="display-3">From the studio.</h2>
          <span className="mono">{works.length} works · POA</span>
        </div>
        <div className="works__grid">
          {works.map((src, i) => (
            <figure key={i} className="work">
              <div className="work__frame"><img src={src} alt="" /></div>
              <figcaption className="work__cap">
                <div>
                  <div className="work__title">Untitled, {2020 + i}</div>
                  <div className="work__credit">{a.lead} · medium tbd · [credit pending]</div>
                </div>
                <button className="work__enq" onClick={(e)=>{ e.stopPropagation(); openEnquire({ kind:"work", title: `${a.name} — Untitled, ${2020+i}`, image: src, label: "Artwork enquiry", meta: "[credit pending] · POA" }); }}>
                  Enquire
                </button>
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      <section className="container" style={{ padding: "96px 0", borderTop: "1px solid var(--border)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64 }}>
          <div className="eyebrow"><span className="dot"></span>Selected exhibitions</div>
          <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {[
              ["2026", "Group · In Abstracto, In Concreto · Efie Gallery"],
              ["2026", "Art Dubai 2026 · Special Edition"],
              ["2025", "Solo presentation · Warehouse 61"],
              ["2024", "Biennial inclusion · International"],
              ["2023", "Group · A Continent in Motion"]
            ].map(([y, t], i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--border)" }}>
                <span className="mono">{y}</span>
                <span className="serif" style={{ fontSize: 20, letterSpacing: "-0.005em" }}>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </main>
  );
}

// ---------------- VIEWING ROOMS ----------------
function ViewingRoomsPage({ goTo, openEnquire }) {
  return (
    <main className="page-fade" data-screen-label="04 Viewing Rooms">
      <section className="page-head container">
        <div className="page-head__grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Private</div>
            <h1 className="page-head__title display-1" style={{ marginTop: 18 }}>Viewing Rooms</h1>
            <p className="page-head__intro">Online viewing rooms and by-appointment private views in the gallery's collector room at Warehouse 61. Access is granted on request.</p>
          </div>
          <button className="btn btn--ghost" style={{ marginBottom: 12 }} onClick={() => openEnquire({ kind: "viewing-room", title: "Private view", label: "Private view request", meta: "By appointment" })}>
            Request a private view
          </button>
        </div>
      </section>

      <section className="container vr-list">
        {D.VIEWING_ROOMS.map(v => (
          <article key={v.slug} className="vr-row" onClick={() => openEnquire({ kind: "viewing-room", title: v.title, image: v.lead, label: "Viewing room access", meta: v.dates })}>
            <div className="vr-row__img"><img src={v.lead} alt={v.title} /></div>
            <div>
              <h3 className="vr-row__title">{v.title}</h3>
              <div className="vr-row__meta">
                <span>{v.works} works</span>
                <span>·</span>
                <span>{v.dates}</span>
                <span>·</span>
                <span>POA</span>
              </div>
              <p className="vr-row__note">{v.note}</p>
            </div>
            <span className="vr-row__cta">Request access →</span>
          </article>
        ))}
      </section>

      <section className="container" style={{ padding: "96px 0", borderTop: "1px solid var(--border)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <h2 className="display-2" style={{ maxWidth: "16ch", textWrap: "balance" }}>How a viewing room works.</h2>
          <ol style={{ listStyle: "none", margin: 0, padding: 0, counterReset: "step" }}>
            {[
              ["Request", "Submit a brief request describing your interest. We respond discreetly within two working days."],
              ["Access", "On approval, you receive a private link to the works, credit lines and price on enquiry."],
              ["Private view", "An optional in-gallery private view at Warehouse 61, by appointment, with the gallery team."],
              ["Acquisition", "All transactions handled directly by the gallery. No third-party platform."]
            ].map(([label, body], i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "80px 140px 1fr", gap: 24, padding: "24px 0", borderTop: "1px solid var(--border)" }}>
                <span className="mono">{String(i+1).padStart(2,"0")}</span>
                <span className="serif" style={{ fontSize: 22, letterSpacing: "-0.005em" }}>{label}</span>
                <span className="body-m" style={{ color: "var(--muted)", maxWidth: "48ch" }}>{body}</span>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </main>
  );
}

// ---------------- REKORD ----------------
function RekordPage({ goTo }) {
  return (
    <div className="rekord-page page-fade" data-screen-label="05 Rekord">
      <main>
        <section className="container rekord-hero">
          <div>
            <div className="eyebrow"><span className="dot" style={{ background: "var(--mint)" }}></span>A cultural extension</div>
            <h1 className="display-1" style={{ marginTop: 18 }}>Rekord <em style={{ fontStyle: "italic" }}>Gallery</em></h1>
            <p>A hi-fi listening room reached by a trap door beneath the gallery, anchored by a founders' collection of more than 2,000 vinyl and shellac records dating to the 1940s. Programming runs across music, film, and conversation — a place where the gallery's mission of home extends beyond the white cube.</p>
          </div>
          <div>
            <div className="stat">2,000<span style={{ fontSize: 48, marginLeft: 6 }}>+</span></div>
            <div className="stat-label">Vinyl & shellac records · founders' collection</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--dark-border)" }}>
              <div>
                <div className="serif" style={{ fontSize: 36, color: "var(--mint)", letterSpacing: "-0.02em" }}>1940</div>
                <div className="stat-label">Earliest record in collection</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 36, color: "var(--mint)", letterSpacing: "-0.02em" }}>1,500<span style={{ fontSize: 20, marginLeft: 4 }}>ft²</span></div>
                <div className="stat-label">Ground-floor gallery above</div>
              </div>
            </div>
          </div>
        </section>

        <section className="container rekord-collage">
          <div><img src="media/rekord-listening-room.webp" alt="Listening room" /></div>
          <div><img src="media/rekord-speaker-records.webp" alt="Speaker and records" /></div>
          <div><img src="media/rekord-cassettes-detail.webp" alt="Cassette detail" /></div>
          <div><img src="media/rekord-screening-night.webp" alt="Screening night" /></div>
          <div><img src="media/rekord-vinyl-listening.webp" alt="Vinyl listening" /></div>
        </section>

        <section className="container rekord-prog">
          <div className="section__head" style={{ borderColor: "var(--dark-border)", marginBottom: 24 }}>
            <div className="eyebrow" style={{ color: "var(--mint)" }}><span className="dot" style={{ background: "var(--mint)" }}></span>Programme</div>
            <h2 className="display-2" style={{ color: "var(--dark-text)" }}>What's on at Rekord.</h2>
            <span className="mono" style={{ color: "var(--dark-muted)" }}>Open · by appointment</span>
          </div>
          <ul className="rekord-prog__rows">
            <li>
              <span className="rekord-prog__date">Thu 12 Jun</span>
              <div className="rekord-prog__title">Highlife → Afrobeats — A Listening Hour</div>
              <div className="rekord-prog__sub">A guided session through a corner of the founders' collection.</div>
              <span className="rekord-prog__cta">Reserve →</span>
            </li>
            <li>
              <span className="rekord-prog__date">Sat 21 Jun</span>
              <div className="rekord-prog__title">Film Night · Touki Bouki</div>
              <div className="rekord-prog__sub">Djibril Diop Mambéty's 1973 film, screened on 16mm.</div>
              <span className="rekord-prog__cta">Reserve →</span>
            </li>
            <li>
              <span className="rekord-prog__date">Wed 9 Jul</span>
              <div className="rekord-prog__title">In Conversation · The Mintah family on Efie</div>
              <div className="rekord-prog__sub">The founders on the meaning of home and ten years of collecting.</div>
              <span className="rekord-prog__cta">Reserve →</span>
            </li>
            <li>
              <span className="rekord-prog__date">Fri 25 Jul</span>
              <div className="rekord-prog__title">Shellac Hours · 1940s Selections</div>
              <div className="rekord-prog__sub">A late-evening listening session through the oldest records in the room.</div>
              <span className="rekord-prog__cta">Reserve →</span>
            </li>
          </ul>
        </section>

        <section className="container" style={{ padding: "96px 0", borderTop: "1px solid var(--dark-border)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <h2 className="display-2" style={{ color: "var(--dark-text)", maxWidth: "14ch", textWrap: "balance" }}>
              Listen, screen, gather. <em style={{ fontStyle: "italic", color: "var(--mint)" }}>Below the gallery.</em>
            </h2>
            <div>
              <p style={{ color: "var(--dark-muted)", fontSize: 17, lineHeight: 1.6, maxWidth: "48ch", marginBottom: 28 }}>
                Rekord is open by appointment during exhibitions and on event nights. Bring a friend, bring a record, or sit alone for an hour.
              </p>
              <a className="btn btn--primary" style={{ background: "var(--mint)", color: "var(--dark-bg)" }} href="#">
                Request the next session <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

// ---------------- ABOUT ----------------
function AboutPage() {
  return (
    <main className="page-fade" data-screen-label="06 About">
      <section className="container about-hero">
        <div className="eyebrow"><span className="dot"></span>About Efie Gallery</div>
        <h1 className="about-hero__title display-1" style={{ marginTop: 18 }} data-comment-anchor="about-title">
          A two-storey home for African contemporary art, on <em style={{ fontStyle: "italic" }}>Alserkal Avenue</em>.
        </h1>
        <p className="about-hero__lead lead">
          Founded in 2021 by the Ghanaian Mintah family and named after the Twi word for home, Efie Gallery champions modern and contemporary African and diasporic artists from a 4,400 sq ft flagship at Warehouse 61.
        </p>
      </section>

      <section className="container about-grid">
        <div>
          <img src="media/founders-mintah-gallery.webp" alt="The Mintah family in the gallery" />
          <div className="mono" style={{ marginTop: 12 }}>Founders · photo credit pending</div>
        </div>
        <div>
          <div className="eyebrow"><span className="dot"></span>The founders</div>
          <h3 style={{ marginTop: 18 }}>The Mintah family.</h3>
          <p>Valentina Mintah and her sons Kwame and Kobi opened Efie Gallery's first space in Al Quoz in March 2022 and relocated to Warehouse 61 on Alserkal Avenue in April 2025. The family had been collecting modern and contemporary African art for many years before opening to the public.</p>
          <p>Kwame and Kobi Mintah were named in The Apollo 40 — the magazine's annual list — in the 2026 business category.</p>
        </div>
      </section>

      <section className="container about-grid">
        <div style={{ order: 2 }}>
          <img src="media/gallery-exterior-warehouse61.webp" alt="Warehouse 61 exterior" />
          <div className="mono" style={{ marginTop: 12 }}>Warehouse 61 · Alserkal Avenue</div>
        </div>
        <div>
          <div className="eyebrow"><span className="dot"></span>The space</div>
          <h3 style={{ marginTop: 18 }}>Warehouse 61, designed with Suhaira Yousif.</h3>
          <p>The Alserkal flagship is a two-storey, approximately 410-square-metre (4,400 sq ft) venue, designed in collaboration with Dubai architect Suhaira Yousif. The ground-floor gallery offers around 1,500 sq ft of column-free hanging with roughly 30-foot ceilings — built for large-scale works.</p>
          <p>Beneath the gallery sits Rekord Gallery — a hi-fi listening room reached by a trap door, anchored by the founders' record collection.</p>
        </div>
      </section>

      <section className="container about-stats">
        <div>
          <div className="about-stat__n">2021</div>
          <div className="about-stat__label">Founded by the Mintah family</div>
        </div>
        <div>
          <div className="about-stat__n">4,400</div>
          <div className="about-stat__label">Sq ft across two storeys, Warehouse 61</div>
        </div>
        <div>
          <div className="about-stat__n">8</div>
          <div className="about-stat__label">Artists represented · 2026</div>
        </div>
        <div>
          <div className="about-stat__n">2,000<span style={{ fontSize: "0.4em" }}>+</span></div>
          <div className="about-stat__label">Records in Rekord, founders' collection</div>
        </div>
      </section>

      <section className="container press">
        <div className="section__head">
          <div className="eyebrow"><span className="dot"></span>Selected press</div>
          <h2 className="display-3">In print and online.</h2>
          <span className="mono">2025 — 2026</span>
        </div>
        <div className="press__list">
          {D.PRESS.map((p, i) => (
            <a key={i} href="#" className="press__row" onClick={(e)=>e.preventDefault()}>
              <span className="press__outlet">{p.outlet}</span>
              <span className="press__title">{p.title}</span>
              <span className="press__date">{p.date} →</span>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

// ---------------- VISIT ----------------
function VisitPage({ openEnquire }) {
  return (
    <main className="page-fade" data-screen-label="07 Visit">
      <section className="page-head container">
        <div className="page-head__grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Visit</div>
            <h1 className="page-head__title display-1" style={{ marginTop: 18 }}>Warehouse 61, <em style={{ fontStyle: "italic" }}>Alserkal Avenue</em>.</h1>
            <p className="page-head__intro">Open Monday to Saturday, eleven to seven. Sunday by appointment. Entry is free.</p>
          </div>
        </div>
      </section>

      <section className="container visit">
        <div>
          <dl>
            <div>
              <dt>Address</dt>
              <dd>
                Warehouse 61, Alserkal Avenue
                <em>17th St, Al Quoz Industrial Area 1, Dubai, UAE</em>
              </dd>
            </div>
            <div>
              <dt>Hours</dt>
              <dd>
                Mon — Sat, 11:00 — 19:00
                <em>Sunday, by appointment</em>
              </dd>
            </div>
            <div>
              <dt>Email</dt>
              <dd><a href="mailto:info@efiegallery.com">info@efiegallery.com</a></dd>
            </div>
            <div>
              <dt>Phone</dt>
              <dd><a href="tel:+97142524182">+971 (0)4 252 4182</a></dd>
            </div>
            <div>
              <dt>Getting here</dt>
              <dd>
                Taxi, ride-share, or private car
                <em>Limited street parking on 17th Street · 8-min walk from Noor Bank Metro (Red Line)</em>
              </dd>
            </div>
            <div>
              <dt>Accessibility</dt>
              <dd>
                Step-free ground floor
                <em>Accessible WC · Rekord Gallery requires stair access; please get in touch in advance</em>
              </dd>
            </div>
          </dl>
          <div style={{ marginTop: 48, display: "flex", gap: 16 }}>
            <button className="btn btn--primary" onClick={() => openEnquire({ kind: "general", title: "General enquiry", label: "Get in touch", meta: "Visit / general" })}>
              Get in touch <span className="arrow">→</span>
            </button>
            <button className="btn btn--ghost" onClick={() => openEnquire({ kind: "viewing-room", title: "Private view request", label: "Private view", meta: "By appointment" })}>
              Book a private view
            </button>
          </div>
        </div>
        <div className="visit__map" aria-label="Map of Warehouse 61, Alserkal Avenue, Dubai">
          {/* Schematic map placeholder — address-string embed in production */}
          <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg">
            <rect width="400" height="500" fill="#fafafa" />
            {/* Street grid */}
            <g stroke="#e0e0d8" strokeWidth="1">
              {Array.from({length: 10}).map((_, i) => (
                <line key={"h"+i} x1="0" y1={50*i} x2="400" y2={50*i} />
              ))}
              {Array.from({length: 8}).map((_, i) => (
                <line key={"v"+i} x1={50*i} y1="0" x2={50*i} y2="500" />
              ))}
            </g>
            {/* "17th St" labeled road */}
            <rect x="0" y="240" width="400" height="36" fill="#efeee8" />
            <text x="20" y="262" fontFamily="monospace" fontSize="10" letterSpacing="1.5" fill="#646f7f">17 ST · ALSERKAL AVE</text>
            {/* Alserkal Avenue block */}
            <rect x="150" y="180" width="180" height="60" fill="#0e1010" opacity="0.04" />
            <rect x="60" y="280" width="160" height="80" fill="#0e1010" opacity="0.04" />
            {/* Warehouse 61 block — accent */}
            <rect x="220" y="220" width="60" height="40" fill="#0b3619" />
            <text x="225" y="247" fontFamily="monospace" fontSize="9" fill="#ffffff" letterSpacing="0.5">W. 61</text>
            {/* Metro */}
            <circle cx="50" cy="450" r="6" fill="none" stroke="#c93838" strokeWidth="2" />
            <text x="62" y="454" fontFamily="monospace" fontSize="9" fill="#646f7f">METRO</text>
          </svg>
          <div className="visit__pin" style={{ alignItems: "center" }}>
            <div style={{ position: "absolute", top: "44%", left: "62%" }}>
              <div className="dot"></div>
              <div className="label">Warehouse 61</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ExhibitionsPage, ExhibitionDetailPage, ArtistsPage, ArtistDetailPage, ViewingRoomsPage, RekordPage, AboutPage, VisitPage });