/* Pages: Home, Exhibitions list+detail, Artists index+dossier */
const { useState: useStateP, useMemo: useMemoP } = React;

function HomePage({ onRoute, onEnquire }) {
  const data = window.TGP_DATA;
  const cur = data.current.exhibition;
  return (
    <React.Fragment>
      {/* HERO — Museum poster for the current exhibition */}
      <section className="hero">
        <div className="shell">
          <div className="hero-topline">
            <div className="l">
              <span className="num">Nº 01</span>
              <span>· Current exhibition · Dubai</span>
            </div>
            <div className="c">
              <span className="dot"></span>Now on view<span className="dot" style={{ background: "var(--secondary)", animation: "none" }}></span>{cur.datesShort}
            </div>
            <div className="r">Warehouse 31A · Alserkal Avenue</div>
          </div>

          <div className="hero-poster">
            <div className="kicker">{cur.kicker}</div>
            <h1 className="poster-title">
              Five<span className="amp">&amp;</span>Painters
            </h1>
            <div className="poster-artists">
              {cur.artists.map((a, i) => (
                <React.Fragment key={a}>
                  {a}
                  {i < cur.artists.length - 1 && <span className="sep">·</span>}
                </React.Fragment>
              ))}
            </div>
            <div className="poster-curator">{cur.curator}</div>
          </div>

          <div className="hero-figure">
            <img src={cur.hero} alt="Install view of Five Painters" />
            <div className="stage-corner">
              <span className="accent-dot"></span>Install view · 17.05.26 — present
            </div>
            <div className="hero-credit credit">
              <span className="name">Five Painters</span>, install view, Warehouse 31A, Alserkal Avenue, May 2026.<br />
              Photo: gallery (subject mapped to source page; final credit &amp; rights to confirm).
            </div>
          </div>

          <div className="hero-bar">
            <div>
              <div className="k">Dates</div>
              <div className="v">17 May — 11 July<small>2026 · twenty-six days remaining</small></div>
            </div>
            <div>
              <div className="k">Opening</div>
              <div className="v">Friday 16 May<small>6 — 9pm · open to the public</small></div>
            </div>
            <div>
              <div className="k">Location</div>
              <div className="v">Dubai · Warehouse 31A<small>Alserkal Avenue · Lane 4 · Al Quoz 1</small></div>
            </div>
            <div className="cta" onClick={() => onRoute({ name: "exhibition", slug: cur.slug })}>
              <div className="k">View exhibition</div>
              <div className="v">→</div>
            </div>
          </div>

          <div className="hero-belt">
            <div className="platform">
              A <span className="em">project-led</span> contemporary art gallery — Dubai &amp; London — working across and between the Global South and the West, since 2013.
            </div>
            <div className="right">
              <div className="stat">
                <div className="v">65</div>
                <div className="k">Artists in the<br />programme · live</div>
              </div>
              <div className="stat">
                <div className="v">103</div>
                <div className="k">Exhibitions<br />since 2013</div>
              </div>
              <div className="stat">
                <div className="v">27</div>
                <div className="k">Online<br />presentations</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED EXHIBITION */}
      <section className="section shell">
        <SectionHead num="01 / Now on view" kicker="Current exhibition · Dubai" title={null}
          end={<button className="btn-line" onClick={() => onRoute({ name: "exhibitions" })}>All exhibitions <span className="arrow">→</span></button>} />
        <div className="feat" onClick={() => onRoute({ name: "exhibition", slug: cur.slug })}>
          <div className="feat-figure">
            <img src={cur.hero} alt={cur.title} />
          </div>
          <div className="feat-meta">
            <div className="tag"><span className="pulse"></span> Now showing · Dubai</div>
            <h3>{cur.title}</h3>
            <div className="by">{cur.kicker} — {cur.artists.slice(0, 3).join(", ")} &amp; 2 more</div>
            <p>{cur.body}</p>
            <dl className="keyline">
              <dt>Dates</dt><dd>{cur.dates}</dd>
              <dt>Opening</dt><dd>{cur.opening.replace("Opening reception · ", "")}</dd>
              <dt>Location</dt><dd>{cur.location}</dd>
              <dt>Curator</dt><dd>{cur.curator.replace("Curated and text by ", "")}</dd>
            </dl>
            <div className="cta-row">
              <button className="btn" onClick={(e) => { e.stopPropagation(); onEnquire({ heading: "Enquire about Five Painters", sub: "Group exhibition · Dubai · 17.05 — 11.07.26", pre: { artist: cur.title, title: " — group exhibition, Dubai", img: cur.hero, note: "Credit & rights to confirm with gallery." } }); }}>
                Enquire about works <span className="arrow">→</span>
              </button>
              <button className="btn-line" onClick={(e) => { e.stopPropagation(); onRoute({ name: "exhibition", slug: cur.slug }); }}>
                View exhibition <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ONLINE TEASER */}
      <section className="section-tight shell">
        <SectionHead num="02 / Online" kicker="Online presentation · current" title={null}
          end={<button className="btn-line" onClick={() => onRoute({ name: "online" })}>Enter viewing room <span className="arrow">→</span></button>} />
        <div className="feat" onClick={() => onRoute({ name: "online" })}>
          <div className="feat-meta">
            <div className="tag"><span className="pulse"></span> One work · one month</div>
            <h3 style={{ marginTop: 14 }}>{data.current.online.title}</h3>
            <div className="by">{data.current.online.artist} · 5 May — 2 June 2026</div>
            <p>{data.current.online.blurb}</p>
            <dl className="keyline">
              <dt>Format</dt><dd>Online presentation</dd>
              <dt>On view</dt><dd>One oil painting</dd>
              <dt>Access</dt><dd>Public viewing room</dd>
            </dl>
            <div className="cta-row">
              <button className="btn-ghost btn" onClick={(e) => { e.stopPropagation(); onRoute({ name: "online" }); }}>
                Enter viewing room <span className="arrow">→</span>
              </button>
            </div>
          </div>
          <div className="feat-figure" style={{ aspectRatio: "4/5", background: "#FFFFFF", border: "1px solid var(--border)" }}>
            <img src={data.current.online.hero} alt={data.current.online.title} style={{ objectFit: "contain", padding: "8%" }} />
          </div>
        </div>
      </section>

      {/* PRESS STRIP */}
      <section className="shell" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="press-strip">
          <div className="lbl">In the press</div>
          <div className="marquee">
            {data.press.slice(0, 4).map((p, i) => (
              <div key={i} className="item">
                "{p.title.length > 70 ? p.title.slice(0, 70) + "…" : p.title}" <span>{p.outlet} · {p.date}</span>
              </div>
            ))}
          </div>
          <button className="btn-line" onClick={() => onRoute({ name: "press" })}>All press <span className="arrow">→</span></button>
        </div>
      </section>

      {/* VISIT */}
      <section className="section shell">
        <SectionHead num="03 / Visit" kicker="Two spaces · one programme" title={null}
          end={<button className="btn-line" onClick={() => onRoute({ name: "contact" })}>Plan a visit <span className="arrow">→</span></button>} />
        <div className="visit">
          <div className="visit-card">
            <h4><small>Primary space · Dubai</small>Alserkal Avenue</h4>
            <div className="addr">Warehouse 31A, Lane 4<br />Alserkal Avenue, Al Quoz 1<br />Dubai, United Arab Emirates</div>
            <div className="hours">Mon — Sat · 11am — 7pm GST · Closed 25–31 May for Eid Al Adha</div>
            <div className="ph">+971 4 286 9627 · info@taymourgrahne.com</div>
          </div>
          <div className="visit-card">
            <h4><small>London</small>Television Centre</h4>
            <div className="addr">Unit 2, Television Centre<br />101 Wood Lane · W12 7FA<br />London, United Kingdom</div>
            <div className="hours">By appointment only · please write ahead</div>
            <div className="ph">info@taymourgrahne.com</div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============== Exhibitions list ============== */
function ExhibitionsPage({ onRoute }) {
  const [tab, setTab] = useStateP("current");
  const data = window.TGP_DATA;
  const filtered = data.exhibitions.filter((e) => e.status === tab);
  const tabs = [
    ["current", "Current", 1],
    ["upcoming", "Upcoming", 0],
    ["past", "Past", 102]
  ];
  return (
    <React.Fragment>
      <section className="section shell">
        <div className="eyebrow"><span className="dot"></span>Exhibitions · since 2013</div>
        <h1 className="display display-2" style={{ marginTop: 12, maxWidth: "18ch" }}>
          One hundred and three<br /><span className="italic" style={{ color: "var(--secondary)" }}>exhibitions, and counting.</span>
        </h1>
        <p style={{ marginTop: 24, maxWidth: "60ch", color: "var(--muted)", fontSize: 15 }}>
          A project-led programme across Dubai, London and online — curated shows, solo presentations and
          collaborations. Browse current and upcoming; the archive holds 102 past exhibitions, paginated.
        </p>

        <div style={{ marginTop: 48, display: "flex", gap: 36, borderBottom: "1px solid var(--border)" }}>
          {tabs.map(([k, label, n]) => (
            <button
              key={k}
              onClick={() => setTab(k)}
              style={{
                padding: "16px 0",
                fontFamily: "var(--mono)",
                fontSize: 11.5,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                color: tab === k ? "var(--text)" : "var(--muted)",
                borderBottom: tab === k ? "1px solid var(--text)" : "1px solid transparent",
                marginBottom: -1
              }}
            >
              {label} <span style={{ color: "var(--muted)", marginLeft: 4 }}>·&nbsp;{n}</span>
            </button>
          ))}
          <div style={{ marginLeft: "auto", padding: "16px 0", fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>
            Filter · <span style={{ color: "var(--text)" }}>All locations</span> · Year
          </div>
        </div>

        <div className="ex-grid" style={{ marginTop: 40 }}>
          {filtered.map((ex) => (
            <ExhibitionCard key={ex.slug} ex={ex} onRoute={onRoute} />
          ))}
          {tab === "upcoming" && filtered.length === 0 && (
            <div style={{ gridColumn: "1 / -1", padding: "80px 0", textAlign: "center", color: "var(--muted)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22 }}>
              No public dates announced yet — join the mailing list for the next programme.
            </div>
          )}
        </div>
        {tab === "past" && (
          <div style={{ marginTop: 64, textAlign: "center" }}>
            <button className="btn-ghost btn">Load more — 92 archived</button>
          </div>
        )}
      </section>
    </React.Fragment>
  );
}

function ExhibitionCard({ ex, onRoute }) {
  return (
    <div className={"ex-card " + (ex.status === "current" ? "current" : "")} onClick={() => onRoute({ name: "exhibition", slug: ex.slug })}>
      <div className="frame">
        <img src={ex.img} alt={ex.title} />
        {ex.status === "current" && <div className="tag-pill">Now showing</div>}
      </div>
      <div className="meta">
        <div className="l">
          <h4>{ex.title}</h4>
          <div className="by">{ex.by}</div>
        </div>
        <div className="r">
          {ex.dates}
          <span className="where">{ex.where}</span>
        </div>
      </div>
    </div>
  );
}

/* ============== Exhibition detail ============== */
function ExhibitionDetailPage({ slug, onRoute, onEnquire }) {
  const data = window.TGP_DATA;
  const ex = data.exhibitions.find((e) => e.slug === slug) || data.exhibitions[0];
  const cur = data.current.exhibition;
  const isCurrent = ex.slug === cur.slug;
  return (
    <section className="shell">
      <div style={{ padding: "24px 0", fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em" }}>
        <button onClick={() => onRoute({ name: "exhibitions" })} style={{ color: "var(--muted)" }}>← Exhibitions</button>
        <span style={{ margin: "0 12px" }}>/</span>
        <span style={{ color: "var(--text)" }}>{ex.title}</span>
      </div>

      <div className="hero-figure" style={{ marginTop: 0, aspectRatio: "16/9" }}>
        <img src={ex.img} alt={ex.title} />
        <div className="hero-credit credit">
          <span className="name">{ex.title}</span>, install view{isCurrent ? ", Warehouse 31A, May 2026" : ""}.<br />
          Photo: gallery (subject mapped to source page; final credit &amp; rights to confirm).
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 64, marginTop: 56 }}>
        <div>
          <div className="eyebrow">
            <span className="dot"></span>{isCurrent ? "Now showing · Dubai" : "Past exhibition"}
          </div>
          <h1 className="display display-1" style={{ marginTop: 12, fontSize: "clamp(48px, 6vw, 96px)" }}>
            {ex.title}
          </h1>
          <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 26, color: "var(--secondary)", marginTop: 8 }}>
            {ex.by}
          </div>

          <p className="lede" style={{ marginTop: 32, maxWidth: "44ch" }}>
            {isCurrent ? cur.body : "A project-led presentation continuing the gallery's painting-led conversation between the Global South and the West. Curatorial text, install views and a credited work list are available on request — the full press release can be downloaded from the press section."}
          </p>

          {isCurrent && (
            <React.Fragment>
              <h3 className="display display-3" style={{ marginTop: 48, marginBottom: 16 }}>Participating artists</h3>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, maxWidth: 520 }}>
                {cur.artists.map((a, i) => (
                  <button key={a} onClick={() => onRoute({ name: "artist", name2: a })} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderBottom: "1px solid var(--border)", fontFamily: "var(--serif)", fontSize: 20, color: "var(--text)" }}>
                    {a} <span className="meta" style={{ color: "var(--accent)" }}>→</span>
                  </button>
                ))}
              </div>
            </React.Fragment>
          )}
        </div>

        <aside style={{ position: "sticky", top: 96, alignSelf: "start", background: "var(--surface)", padding: 28, border: "1px solid var(--border)" }}>
          <div className="meta" style={{ color: "var(--accent)", marginBottom: 12 }}>EXHIBITION DETAILS</div>
          <dl style={{ display: "grid", gridTemplateColumns: "max-content 1fr", rowGap: 14, columnGap: 18, fontFamily: "var(--mono)", fontSize: 11.5, margin: 0 }}>
            <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Dates</dt>
            <dd style={{ margin: 0, color: "var(--text)" }}>{ex.dates}</dd>
            {isCurrent && <React.Fragment>
              <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Opening</dt>
              <dd style={{ margin: 0, color: "var(--text)" }}>16 May 2026, 6 — 9pm</dd>
            </React.Fragment>}
            <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Location</dt>
            <dd style={{ margin: 0, color: "var(--text)" }}>{ex.where}{isCurrent ? " · Warehouse 31A" : ""}</dd>
            {isCurrent && <React.Fragment>
              <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Curator</dt>
              <dd style={{ margin: 0, color: "var(--text)" }}>Sara bin Safwan</dd>
              <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Hours</dt>
              <dd style={{ margin: 0, color: "var(--text)" }}>Mon–Sat 11–7</dd>
            </React.Fragment>}
            <dt style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Prices</dt>
            <dd style={{ margin: 0, color: "var(--accent)" }}>POA · by enquiry</dd>
          </dl>
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
            <button className="btn" onClick={() => onEnquire({ heading: "Enquire about " + ex.title, sub: ex.by + " · " + ex.dates, pre: { artist: ex.title, title: " — " + ex.by, img: ex.img, note: "Credit & rights to confirm with gallery." } })} style={{ justifyContent: "center" }}>
              Enquire about works <span className="arrow">→</span>
            </button>
            <button className="btn-ghost btn" style={{ justifyContent: "center" }} onClick={() => onRoute({ name: "press" })}>
              Press release · PDF
            </button>
          </div>
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, ExhibitionsPage, ExhibitionDetailPage, ExhibitionCard });