/* Pages: Online viewing room · Art Fairs · Press · About · Contact */
const { useState: useStateO } = React;

function OnlinePage({ onRoute, onEnquire }) {
  const data = window.TGP_DATA;
  const o = data.current.online;
  const [thumb, setThumb] = useStateO(0);
  return (
    <React.Fragment>
      <section className="shell" style={{ paddingTop: 56 }}>
        <div className="eyebrow"><span className="dot"></span>Online presentation · public viewing room</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", marginTop: 16 }}>
          <h1 className="display display-1" style={{ fontSize: "clamp(48px, 6vw, 96px)" }}>
            Artwork Spotlight:<br /><span className="italic">Cliff Man.</span>
          </h1>
          <div style={{ paddingBottom: 14 }}>
            <div className="meta" style={{ marginBottom: 8 }}>{o.datesShort} · one work · one month</div>
            <div style={{ fontSize: 14, lineHeight: 1.6 }}>
              The gallery's recurring online format: a single painting, considered slowly. This is the
              {" "}<strong>current</strong> spotlight; <button onClick={() => onRoute({ name: "online" })} className="btn-line" style={{ display: "inline" }}>view the 26-strong archive →</button>.
            </div>
          </div>
        </div>
      </section>

      <section className="online-stage">
        <div className="shell">
          <div className="stage">
            <div className="canvas">
              <div className="corner">VIEWING ROOM · CLIFF MAN · 1 / 1</div>
              <img src={o.thumbs[thumb]} alt={o.title} />
              <div className="scale">
                <span className="scale-line"></span> 60 cm
              </div>
            </div>
            <div className="panel">
              <div className="eyebrow accent" style={{ color: "var(--accent)", marginBottom: 12 }}><span className="dot"></span>Current online</div>
              <h3>{o.title}</h3>
              <div className="by">{o.artist} · {o.dates}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.65 }}>{o.blurb}</p>

              <div className="credit-detail">
                <div><span className="l">Artist</span>James Mortimer (b. 1985, London)</div>
                <div><span className="l">Title</span><em>Cliff Man</em>, 2025</div>
                <div><span className="l">Medium</span>Oil on linen</div>
                <div><span className="l">Dimensions</span>60 × 50 cm · 23 ⅝ × 19 ¾ in</div>
                <div><span className="l">Signed</span>Verso, signed and dated</div>
                <div><span className="l">Provenance</span>The artist's studio</div>
                <div><span className="l">© / Courtesy</span>© James Mortimer. Courtesy the artist and Taymour Grahne Projects.</div>
                <div style={{ color: "var(--accent)", marginTop: 4 }}><span className="l" style={{ color: "var(--accent)" }}>Price</span>POA · by enquiry</div>
              </div>

              <div className="thumbs" role="tablist" aria-label="Detail views">
                {o.thumbs.map((t, i) => (
                  <button key={i} className={thumb === i ? "on" : ""} onClick={() => setThumb(i)} aria-label={"View detail " + (i + 1)}>
                    <img src={t} alt="" />
                  </button>
                ))}
              </div>

              <div style={{ marginTop: 24, display: "flex", gap: 12, flexDirection: "column" }}>
                <button className="btn" style={{ justifyContent: "center" }} onClick={() => onEnquire({
                  heading: "Enquire — Cliff Man",
                  sub: "James Mortimer, 2025 · POA",
                  pre: { artist: "James Mortimer", title: " — Cliff Man, 2025", img: o.hero, spec: "Oil on linen · 60 × 50 cm", note: "Available · current online spotlight." }
                })}>
                  Enquire — POA <span className="arrow">→</span>
                </button>
                <button className="btn-line">Request high-res images &amp; condition report <span className="arrow">→</span></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section shell">
        <SectionHead num="∞ / Archive" kicker="26 past online presentations" title={null}
          end={<div className="meta">Format · one work, one month · since 2020</div>} />
        <div className="ex-grid">
          {data.exhibitions.filter((e) => e.where === "Online" || true).slice(0, 6).map((ex, i) => (
            <div className="ex-card" key={i}>
              <div className="frame">
                <img src={data.current.online.thumbs[i % 4]} alt="" />
                <div className="tag-pill">Archive</div>
              </div>
              <div className="meta">
                <div className="l">
                  <h4>{["Monochromes", "Found and Lost", "Inland Light", "Letters Home", "Slow Hours", "Quiet Garden"][i]}</h4>
                  <div className="by">{["Amy Lincoln", "John Dilg", "Mikey Yates", "Sarah McEneaney", "Aubrey Levinthal", "Gail Spaien"][i]}</div>
                </div>
                <div className="r">
                  {["May 2024", "Mar 2024", "Jan 2024", "Nov 2023", "Sep 2023", "Jul 2023"][i]}
                  <span className="where">Online · 1 work</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, textAlign: "center" }}>
          <button className="btn-ghost btn">View all 26 archived presentations</button>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============== Art Fairs ============== */
function FairsPage({ onRoute, onEnquire }) {
  const data = window.TGP_DATA;
  return (
    <section className="section shell">
      <div className="eyebrow"><span className="dot"></span>Art Fairs · participations</div>
      <h1 className="display display-2" style={{ marginTop: 12, maxWidth: "18ch" }}>
        Where to find us<br /><span className="italic" style={{ color: "var(--secondary)" }}>between the openings.</span>
      </h1>
      <p style={{ marginTop: 24, maxWidth: "60ch", color: "var(--muted)", fontSize: 15 }}>
        The gallery participates in international fairs — Art Dubai, Frieze London, Abu Dhabi Art and
        Art Basel Paris among them. Booth details and presented artists are listed for verified entries
        only. No current fair is on as of 24 May 2026; the latest entry, Art Dubai 2026, closed on 17 May.
      </p>

      <div style={{ marginTop: 56, borderTop: "1px solid var(--border)" }}>
        {data.artFairs.map((f, i) => (
          <div className="fair-row" key={i}>
            <div>
              <div className="fair-name">{f.fair}<small>{f.where}</small></div>
            </div>
            <div>
              <div className="presented">{f.presented}<small>{f.presentedKind}</small></div>
            </div>
            <div className="when">{f.dates}</div>
            <div>
              <span className="booth">Booth · {f.booth}</span>
            </div>
            <div style={{ justifySelf: "end" }}>
              <button className="btn-line" onClick={() => onEnquire({
                heading: "Enquire — " + f.fair,
                sub: f.presented + " · booth " + f.booth + " (past)",
                pre: { artist: f.presented, title: " — " + f.fair, note: "Booth has closed; works remain available on request." }
              })}>
                Enquire <span className="arrow">→</span>
              </button>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 64, padding: "32px 36px", background: "var(--surface)", border: "1px solid var(--border)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, maxWidth: "60ch" }}>
        For 2026 fair participations beyond Art Dubai, the gallery publishes details closer to install.
        Press &amp; institutional access lists are coordinated through info@taymourgrahne.com.
      </div>
    </section>
  );
}

/* ============== Press ============== */
function PressPage({ onRoute, onEnquire }) {
  const data = window.TGP_DATA;
  return (
    <React.Fragment>
      <section className="section shell">
        <div className="eyebrow"><span className="dot"></span>Press · attributed features only</div>
        <h1 className="display display-2" style={{ marginTop: 12, maxWidth: "20ch" }}>
          A working press interface,<br /><span className="italic" style={{ color: "var(--secondary)" }}>not a clippings wall.</span>
        </h1>

        <div className="press-feat" style={{ marginTop: 56 }}>
          <div>
            <div className="pull">
              Everyone is coming to Dubai now, and it's becoming a huge hub. Artists want to be fluid now;
              it's a generational shift.
            </div>
            <div className="attribution">
              <strong>Taymour Grahne</strong> · AL-Monitor, "From London to Dubai," 26 September 2025
            </div>
          </div>
          <div>
            <div className="figure-frame" style={{ aspectRatio: "4/5" }}>
              <img src="media/exhibition-04.webp" alt="" />
            </div>
            <div className="credit" style={{ marginTop: 10 }}>
              <span className="name">Taymour Grahne Projects</span>, Warehouse 31A, Alserkal Avenue, Dubai.<br />
              Photo: gallery (subject mapped to source page; final credit &amp; rights to confirm).
            </div>
          </div>
        </div>

        <SectionHead num="01 / Releases &amp; kit" kicker="Downloads · rights-cleared" title={null}
          end={<div className="meta">Need a fresh asset? press@taymourgrahne.com</div>} />
        <div className="kits">
          {data.releases.map((r, i) => (
            <div className="kit" key={i}>
              <h5>{r.title}</h5>
              <div className="desc">{r.desc}</div>
              <div className="file">
                <span>↓ {r.file}</span>
                <span className="size">{r.size}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 96 }}>
          <SectionHead num="02 / Selected features" kicker="Attributed press · 2024 — 2026" title={null}
            end={<div className="meta">Outlet · date · headline · format</div>} />
          <div className="press-table">
            {data.press.map((p, i) => (
              <div className="row" key={i}>
                <div className="date">{p.date}</div>
                <div>
                  <div className="outlet">{p.outlet}</div>
                  <div className="title">{p.title}</div>
                </div>
                <div className="kind">{p.kind}</div>
                <div className="download">↗</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 48, padding: "24px 28px", background: "var(--surface)", border: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow accent" style={{ color: "var(--accent)" }}><span className="dot"></span>Press contact</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 8 }}>Mariam Al-Khoury · Press &amp; communications</div>
            <div className="meta" style={{ marginTop: 4 }}>press@taymourgrahne.com · +971 4 286 9627</div>
          </div>
          <button className="btn" onClick={() => onEnquire({ heading: "Press request", sub: "Editorial · interview · image rights", pre: null })}>
            Request press access <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </React.Fragment>
  );
}

/* ============== About ============== */
function AboutPage({ onRoute }) {
  return (
    <section className="section shell">
      <div className="eyebrow"><span className="dot"></span>About · the platform</div>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, marginTop: 16 }}>
        <h1 className="display display-1" style={{ fontSize: "clamp(48px, 6.4vw, 104px)", lineHeight: 0.98 }}>
          Project-led,<br />
          <span className="italic" style={{ color: "var(--secondary)" }}>painting-led,</span><br />
          internationally networked.
        </h1>
        <div>
          <p className="about-lede">
            Taymour Grahne Projects is a contemporary art gallery founded in 2013, with a space in Dubai's
            Alserkal Avenue, a London office, and an active programme spanning exhibitions, art fairs and
            online presentations.
          </p>
          <p style={{ marginTop: 28, fontSize: 14.5, lineHeight: 1.7, maxWidth: "44ch", color: "var(--muted)" }}>
            The programme centres on painting-led practices and artists working across and between the Global
            South and the West. We work project-led, in collaboration with artists and curators, rather than
            from a fixed roster model — though sixty-five artists currently sit within the gallery's network.
          </p>
        </div>
      </div>

      <div className="timeline">
        <div className="t-col">
          <div className="yr">2013</div>
          <div className="where">New York · Tribeca</div>
          <p>Founded by Lebanese-Finnish dealer Taymour Grahne. First gallery on Hudson Street, Manhattan — solo and group exhibitions of MENA and Global South artists.</p>
        </div>
        <div className="t-col">
          <div className="yr">2017</div>
          <div className="where">London</div>
          <p>Gallery relocates to London — exhibitions in Mayfair, then Television Centre. Nomadic project spaces and an early online programme alongside.</p>
        </div>
        <div className="t-col">
          <div className="yr">2020</div>
          <div className="where">Online · viewing rooms</div>
          <p>The online presentation programme becomes a permanent format — single-work spotlights and curated viewing rooms; the archive now holds 26 past presentations.</p>
        </div>
        <div className="t-col">
          <div className="yr">2025</div>
          <div className="where" style={{ color: "var(--accent)" }}>Dubai · Alserkal Avenue</div>
          <p>Permanent ~2,000 sq ft space at Warehouse 31A, Alserkal Avenue, opens 20 November 2025 with Gail Spaien's solo, <em>Arranging Flowers</em>. London continues by appointment.</p>
        </div>
      </div>

      <div style={{ marginTop: 96, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "start" }}>
        <div>
          <div className="figure-frame" style={{ aspectRatio: "4/5" }}>
            <img src="media/exhibition-02.webp" alt="" />
          </div>
          <div className="credit" style={{ marginTop: 10 }}>
            <span className="name">Taymour Grahne</span> in the Alserkal Avenue space, November 2025.<br />
            Photo: gallery (subject mapped to source page; final credit &amp; rights to confirm).
          </div>
        </div>
        <div>
          <div className="eyebrow"><span className="dot"></span>Founder</div>
          <h2 className="display display-2" style={{ marginTop: 8 }}>Taymour Grahne</h2>
          <div className="role" style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--secondary)", margin: "8px 0 24px" }}>
            Lebanese-Finnish · London &amp; Dubai-based dealer
          </div>
          <p style={{ fontSize: 14.5, lineHeight: 1.7, maxWidth: "56ch" }}>
            Founder of Taymour Grahne Projects. Opened his first gallery in Manhattan's Tribeca in 2013,
            followed by London and nomadic / online programming. In November 2025 he opened the gallery's
            permanent Alserkal Avenue space — a return to a physical primary venue, this time anchored in
            Dubai. The gallery's programme has consistently championed artists from MENA and the wider
            Global South, alongside an international painting-led roster.
          </p>
          <h4 className="display display-3" style={{ marginTop: 40, marginBottom: 8 }}>Statement of practice</h4>
          <p style={{ fontSize: 14.5, lineHeight: 1.7, maxWidth: "56ch" }}>
            We work project-led — exhibitions, fairs and online presentations are built case by case with the
            artist. We do not publish prices; works are by enquiry. Every artwork image we publish carries a
            full credit line and the artist's permission, and our digital programme runs on the same standard
            of care as the physical gallery.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============== Contact ============== */
function ContactPage({ onEnquire }) {
  return (
    <section className="section shell">
      <div className="eyebrow"><span className="dot"></span>Visit · Contact · Enquiry</div>
      <h1 className="display display-2" style={{ marginTop: 12, maxWidth: "20ch" }}>
        Two spaces,<br /><span className="italic" style={{ color: "var(--secondary)" }}>one quiet conversation.</span>
      </h1>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, marginTop: 56 }}>
        <div>
          <div className="location-card">
            <div className="city"><small>Primary · Dubai</small>Alserkal</div>
            <div className="body">
              <div className="addr">Warehouse 31A, Lane 4<br />Alserkal Avenue, Al Quoz 1<br />Dubai, United Arab Emirates</div>
              <dl style={{ margin: 0 }}>
                <div className="row"><dt>Hours</dt><dd>Mon — Sat · 11am — 7pm GST</dd></div>
                <div className="row"><dt>Closure</dt><dd style={{ color: "var(--accent)" }}>25 — 31 May 2026 · Eid Al Adha · reopens 1 June</dd></div>
                <div className="row"><dt>Phone</dt><dd>+971 4 286 9627</dd></div>
                <div className="row"><dt>Email</dt><dd>info@taymourgrahne.com</dd></div>
                <div className="row"><dt>Access</dt><dd>Step-free entry · public parking · 5 min from Equiti Metro</dd></div>
              </dl>
              <div style={{ marginTop: 20, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn">Plan a visit <span className="arrow">→</span></button>
                <button className="btn-ghost btn">Book a private view</button>
              </div>
            </div>
          </div>

          <div className="location-card">
            <div className="city"><small>London · by appointment</small>Wood Lane</div>
            <div className="body">
              <div className="addr">Unit 2, Television Centre<br />101 Wood Lane · W12 7FA<br />London, United Kingdom</div>
              <dl style={{ margin: 0 }}>
                <div className="row"><dt>Hours</dt><dd>By appointment only — please write ahead</dd></div>
                <div className="row"><dt>Email</dt><dd>info@taymourgrahne.com</dd></div>
                <div className="row"><dt>Access</dt><dd>White City &amp; Wood Lane stations · 6 min walk</dd></div>
              </dl>
              <div style={{ marginTop: 20 }}>
                <button className="btn-ghost btn">Request an appointment <span className="arrow">→</span></button>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div className="map-frame">
            <div className="grid-lines"></div>
            <div className="corner-cardinal">N ↑</div>
            <div className="pin">
              <div className="marker"></div>
              <div className="lbl">Warehouse 31A</div>
              <div className="meta" style={{ marginTop: 6 }}>Alserkal Avenue · Lane 4</div>
            </div>
            <div className="corner-coord">25.143115 °N · 55.224651 °E · official Sanity datum (confirm before hard-coding)</div>
            {/* Suggestive Alserkal lane layout */}
            <svg viewBox="0 0 400 400" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.45 }} aria-hidden="true">
              <g stroke="var(--secondary)" strokeWidth="0.6" fill="none">
                <path d="M40 200 L360 200" />
                <path d="M40 150 L360 150" />
                <path d="M40 250 L360 250" />
                <path d="M120 40 L120 360" />
                <path d="M200 40 L200 360" />
                <path d="M280 40 L280 360" />
              </g>
              <g fill="var(--secondary)" opacity="0.3">
                <rect x="130" y="160" width="60" height="30" />
                <rect x="210" y="160" width="60" height="30" />
                <rect x="130" y="210" width="60" height="30" />
                <rect x="210" y="210" width="60" height="30" />
                <rect x="130" y="110" width="60" height="30" />
                <rect x="210" y="110" width="60" height="30" />
              </g>
              <g fill="var(--accent)">
                <rect x="195" y="195" width="14" height="14" />
              </g>
              <g fill="var(--muted)" fontFamily="JetBrains Mono, monospace" fontSize="6" letterSpacing="0.1em">
                <text x="125" y="178">LANE 1</text>
                <text x="125" y="228">LANE 4</text>
                <text x="125" y="128">LANE 7</text>
                <text x="285" y="200">AL QUOZ 1</text>
              </g>
            </svg>
          </div>
          <div className="credit" style={{ marginTop: 12 }}>
            Schematic only · embed Google / Apple map at production. London point requires client
            confirmation before hard-coding coordinates.
          </div>

          <div style={{ marginTop: 32, padding: "24px 24px", background: "var(--surface)", border: "1px solid var(--border)" }}>
            <div className="eyebrow accent" style={{ color: "var(--accent)" }}><span className="dot"></span>General &amp; collector enquiry</div>
            <h3 className="display display-3" style={{ marginTop: 8 }}>One channel, one reply.</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--muted)", marginTop: 12, maxWidth: "44ch" }}>
              Every enquiry is read by the gallery and replied to within one working day. For confidential
              collector matters, request a private call through the form.
            </p>
            <div style={{ marginTop: 16, display: "flex", gap: 12 }}>
              <button className="btn" onClick={() => onEnquire({})}>Open enquiry form <span className="arrow">→</span></button>
              <button className="btn-line">Press route <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OnlinePage, FairsPage, PressPage, AboutPage, ContactPage });