/* Page components for Sevil Dolmacı Gallery */
const { useState, useEffect, useMemo } = React;
const { exhibitions: EXS, artists: ARTISTS, publications: PUBS, fairs: FAIRS, press: PRESS } = window.SD;

// =====================================================================
// HOME
// =====================================================================
function HomePage() {
  const current = EXS.find(e => e.status === "current");
  const upcoming = EXS.filter(e => e.status === "upcoming");
  const recent = EXS.filter(e => e.status === "past").slice(0, 3);
  const featured = ARTISTS.slice(0, 9);

  return (
    <div className="fade">
      {/* HERO */}
      <section className="hero">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
            <div className="eyebrow"><span className="dot"></span>Now on view · Istanbul</div>
            <div className="meta">{current.isoStart} — {current.isoEnd}</div>
          </div>
          <div className="hero-grid">
            <div>
              <ImgFig src={current.cover} aspect="3x4" alt={current.title} credit="© Courtesy of the artists and Sevil Dolmacı Gallery" />
            </div>
            <div>
              <h1 className="h1">
                <em>{current.title}</em>
              </h1>
              <div className="lede curator" style={{ maxWidth: 640 }}>
                {current.deck}
              </div>
              <div className="hero-meta">
                <div>
                  <div className="label">Curator</div>
                  <div className="val">Robert Fleck</div>
                </div>
                <div>
                  <div className="label">Space</div>
                  <div className="val">Villa Ipranosyan, Istanbul</div>
                </div>
                <div>
                  <div className="label">Dates</div>
                  <div className="val mono">9 April — 31 May, 2026</div>
                </div>
                <div>
                  <div className="label">Hours</div>
                  <div className="val mono">Tue — Sat &nbsp; 10:30–18:00</div>
                </div>
              </div>
              <div style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap" }}>
                <a href={"#/exhibitions/" + current.slug} className="btn">View exhibition</a>
                <a href="#/contact" className="btn btn-ghost">Plan a visit</a>
                <a href="#/contact" className="btn-arrow" style={{ marginLeft: 8 }}>
                  <span className="ln"></span> Request catalogue
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee artists ticker */}
      <ArtistMarquee artists={ARTISTS} />

      {/* TWO CITIES */}
      <section className="cities">
        <div className="city">
          <ImgFig src="media/space-istanbul-villa-ipranosyan.webp" aspect="16x9" alt="Villa Ipranosyan, Istanbul" credit="Villa Ipranosyan, Beşiktaş · gallery view" />
          <div className="kicker">Istanbul · Since 2017</div>
          <h2 className="name">Villa Ipranosyan</h2>
          <div className="since">Grade‑II Historical Monument · Four Floors · Terrace</div>
          <div className="addr">Cihannüma Mahallesi, Çömezler Sokağı No: 16, Beşiktaş / İstanbul, Türkiye</div>
          <div className="hours">
            <div className="h-day">Tue — Sat</div><div>10:30 — 18:00</div>
            <div className="h-day">Monday</div><div>By appointment</div>
          </div>
          <div className="actions">
            <a className="link-u" href="#/about">About the space</a>
            <a className="link-u" href="#/contact">Plan a visit →</a>
          </div>
        </div>
        <div className="city">
          <ImgFig src="media/space-dubai-d3-interior.webp" aspect="16x9" alt="Dubai Design District, Building R04" credit="Dubai Design District · Building R04, 11 · interior view" />
          <div className="kicker">Dubai · Since 6 November 2023</div>
          <h2 className="name">Dubai Design District</h2>
          <div className="since">Building R04, 11 · White‑cube single‑volume space</div>
          <div className="addr">Dubai Design District, Building R04, 11, Dubai, United Arab Emirates</div>
          <div className="hours">
            <div className="h-day">Tue — Sat</div><div>10:00 — 19:00</div>
            <div className="h-day">Monday</div><div>By appointment</div>
          </div>
          <div className="actions">
            <a className="link-u" href="#/about">About the space</a>
            <a className="link-u" href="#/contact">Plan a visit →</a>
          </div>
        </div>
      </section>

      {/* RECENT + UPCOMING */}
      <section className="s-pad">
        <div className="wrap">
          <SectionHead
            kicker="Programme — Selected 2024 / 2026"
            title={<>Exhibitions, <em>recent and on view</em></>}
            rightLabel="View all exhibitions"
            rightHref="#/exhibitions"
          />
          <div className="g3">
            <ExhibitionCard ex={current} />
            {recent.slice(0, 2).map(ex => <ExhibitionCard key={ex.slug} ex={ex} />)}
          </div>
        </div>
      </section>

      {/* FEATURED ARTISTS */}
      <section className="s-pad" style={{ background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <SectionHead
            kicker="The Roster — 40 Artists"
            title={<>Artists, <em>in alphabetical order</em></>}
            rightLabel="Full roster"
            rightHref="#/artists"
          />
          <div className="artist-strip">
            {ARTISTS.map((a, i) => (
              <React.Fragment key={a.name}>
                <a className="a" href={"#/artists/" + a.name.toLowerCase().replace(/[^a-z]+/g, "-")}>{a.name}</a>
                {i < ARTISTS.length - 1 && <span style={{ color: "var(--border-strong)", padding: "4px 0" }}>—</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* PUBLICATIONS TEASER */}
      <section className="s-pad">
        <div className="wrap">
          <SectionHead
            kicker="Publications · Catalogues"
            title={<>A library of <em>monographs</em></>}
            rightLabel="All publications"
            rightHref="#/publications"
          />
          <div className="g4">
            {PUBS.slice(0, 4).map(p => <PublicationCard key={p.title} pub={p} />)}
          </div>
        </div>
      </section>

      {/* PRESS + ABOUT TEASER */}
      <section className="s-pad" style={{ background: "var(--primary)", color: "var(--bg)" }}>
        <div className="wrap" style={{ color: "var(--bg)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
            <div>
              <div className="kicker" style={{ color: "var(--accent)" }}>About the gallery</div>
              <h2 className="h2" style={{ color: "var(--bg)", marginTop: 18 }}>
                A bridge between the<br/>
                <em>Western art world</em><br/>
                and the <em>Middle East.</em>
              </h2>
              <p className="lede" style={{ color: "rgba(250,250,248,.78)", marginTop: 24, maxWidth: 520 }}>
                Founded in 2017 by art historian Sevil Dolmacı, the gallery presents Turkish and international contemporary art across two cities. The programme is built around exhibitions, publications and discreet collector enquiry — credibility from the work, not the noise around it.
              </p>
              <div style={{ marginTop: 36 }}>
                <a href="#/about" className="btn-arrow" style={{ color: "var(--bg)" }}>
                  <span className="ln"></span> Read about the gallery
                </a>
              </div>
            </div>
            <div>
              <div className="kicker" style={{ color: "var(--accent)" }}>Press · Selected</div>
              <h3 className="h2" style={{ color: "var(--bg)", marginTop: 18, fontSize: "clamp(28px, 2.6vw, 40px)" }}>
                In the journals
              </h3>
              <div style={{ marginTop: 28 }}>
                {PRESS.slice(0, 4).map((p, i) => (
                  <a key={i} href="#/press" className="press-row" style={{ borderColor: "rgba(250,250,248,.15)", color: "var(--bg)" }}>
                    <div className="pub" style={{ color: "var(--bg)" }}>{p.pub}</div>
                    <div className="head" style={{ color: "var(--bg)" }}>{p.head}</div>
                    <div className="date" style={{ color: "rgba(250,250,248,.55)" }}>{p.date}</div>
                    <div className="arr" style={{ color: "rgba(250,250,248,.55)" }}><Icon.ArrowSmall /></div>
                  </a>
                ))}
              </div>
              <div style={{ marginTop: 24 }}>
                <a href="#/press" className="btn-arrow" style={{ color: "var(--bg)" }}>
                  <span className="ln"></span> Full press archive
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// EXHIBITIONS index
// =====================================================================
function ExhibitionsPage() {
  const [filter, setFilter] = useState("all");
  const tabs = [
    ["all", "All"],
    ["current", "On view"],
    ["upcoming", "Upcoming"],
    ["past", "Past"],
  ];
  const filtered = EXS.filter(e => filter === "all" ? true : e.status === filter);

  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Programme</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Exhibitions</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            A continuous, two‑city programme across Villa Ipranosyan, Istanbul and Building R04, 11 in Dubai Design District. Updated as the calendar moves.
          </p>
        </div>
      </section>

      <section className="s-pad-sm">
        <div className="wrap">
          <div className="tabs">
            {tabs.map(([k, label]) => {
              const count = k === "all" ? EXS.length : EXS.filter(e => e.status === k).length;
              return (
                <button key={k} onClick={() => setFilter(k)} className={filter === k ? "active" : ""}>
                  {label}<span className="count">{count}</span>
                </button>
              );
            })}
          </div>

          {/* List view */}
          <div className="row-list">
            {filtered.map((ex, i) => (
              <a key={ex.slug} href={"#/exhibitions/" + ex.slug} className="row">
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="title-cell"><em>{ex.title}</em></div>
                <div className="who">{ex.curator}</div>
                <div className="when">{ex.start} — {ex.end}</div>
                <div className="where">{ex.city}</div>
                <div className="arrow"><Icon.ArrowSmall /></div>
              </a>
            ))}
          </div>

          {/* Visual recap */}
          <div className="g4" style={{ marginTop: 80 }}>
            {filtered.slice(0, 8).map(ex => (
              <ExhibitionCard key={ex.slug} ex={ex} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// EXHIBITION DETAIL
// =====================================================================
function ExhibitionDetailPage({ slug }) {
  const ex = EXS.find(e => e.slug === slug) || EXS[0];
  return (
    <div className="fade">
      <section className="detail-hero">
        <div className="wrap">
          <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
            <a href="#/exhibitions" className="meta">← All exhibitions</a>
            {ex.status === "current" && <span className="pill live"><span className="dot"></span>Now on view</span>}
          </div>
          <ImgFig src={ex.panorama || ex.installs[0] || ex.cover} aspect="21x9" alt={ex.title} credit="© Courtesy of the artists and Sevil Dolmacı Gallery" />
        </div>
      </section>

      <section>
        <div className="wrap">
          <div className="detail-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>{ex.city} · {ex.space}</div>
              <h1 className="h1" style={{ marginTop: 14 }}><em>{ex.title}</em></h1>
              <div className="deck" style={{ marginTop: 24 }}>{ex.deck}</div>
              <div style={{ display: "flex", gap: 16, marginTop: 36, flexWrap: "wrap" }}>
                <a href="#/contact" className="btn">Enquire on availability</a>
                <a href="#/contact" className="btn btn-ghost">Request catalogue</a>
              </div>
            </div>
            <div className="detail-side">
              <div className="row-mini"><div className="l">Curator</div><div className="v">{ex.curator}</div></div>
              <div className="row-mini"><div className="l">Dates</div><div className="v">{ex.start} — {ex.end}</div></div>
              <div className="row-mini"><div className="l">Location</div><div className="v">{ex.space}, {ex.city}</div></div>
              <div className="row-mini">
                <div className="l">Hours</div>
                <div className="v">{ex.city === "Istanbul" ? "Tue — Sat 10:30 — 18:00" : "Tue — Sat 10:00 — 19:00"}<br/><span style={{color:"var(--muted)"}}>Monday by appointment</span></div>
              </div>
              <div className="row-mini">
                <div className="l">Press</div>
                <div className="v"><a href="mailto:press@sevildolmaci.com" className="link-u">press@sevildolmaci.com</a></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Essay */}
      {ex.essay && (
        <section className="s-pad">
          <div className="wrap-tight">
            <div className="eyebrow" style={{ textAlign: "center", marginBottom: 32 }}>Curatorial Note — {ex.curator.replace("Curated by ", "")}</div>
            <div className="essay">
              {ex.essay.map((p, i) => <p key={i}>{p}</p>)}
              <div className="pull">
                "Painting can hold a public, and a public can still be addressed at the scale of a room."
              </div>
              <p style={{ fontSize: 14, color: "var(--muted)", fontStyle: "italic" }}>
                — Robert Fleck, from the exhibition essay. Full text available on request.
              </p>
            </div>
          </div>
        </section>
      )}

      {/* Installation views */}
      {ex.installs && ex.installs.length > 0 && (
        <section className="s-pad-sm" style={{ background: "var(--surface)", paddingTop: 80, paddingBottom: 80 }}>
          <div className="wrap">
            <SectionHead
              kicker="Installation views"
              title={<><em>From the rooms</em></>}
            />
            <div className="install-grid">
              {ex.installs.slice(0, 7).map((src, i) => (
                <div key={i} className={"img-wrap ig-" + (i + 1)}>
                  <img src={src} alt={"Installation view " + (i + 1)} loading="lazy" />
                  <span className="credit-overlay">Installation view, {ex.title}, {ex.space}, {ex.start} — {ex.end}.</span>
                </div>
              ))}
            </div>
            <p className="credit" style={{ marginTop: 24, maxWidth: 720 }}>
              All works © the respective artists. Installation photography by Sevil Dolmacı Gallery. Reproduction by permission only.
            </p>
          </div>
        </section>
      )}

      {/* Artists in show */}
      {ex.artists && ex.artists.length > 0 && (
        <section className="s-pad">
          <div className="wrap">
            <SectionHead
              kicker="Featured artists"
              title={<>Artists in <em>{ex.title}</em></>}
              rightLabel="Full roster"
              rightHref="#/artists"
            />
            <div className="artist-strip">
              {ex.artists.map((name, i) => (
                <React.Fragment key={name}>
                  <a className="a" href={"#/artists/" + name.toLowerCase().replace(/[^a-z]+/g, "-")}>{name}</a>
                  {i < ex.artists.length - 1 && <span style={{ color: "var(--border-strong)", padding: "4px 0" }}>—</span>}
                </React.Fragment>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Other exhibitions */}
      <section className="s-pad-sm" style={{ borderTop: "1px solid var(--border)" }}>
        <div className="wrap">
          <SectionHead
            kicker="Continue reading"
            title={<>Other <em>exhibitions</em></>}
          />
          <div className="g3">
            {EXS.filter(e => e.slug !== ex.slug).slice(0, 3).map(o => <ExhibitionCard key={o.slug} ex={o} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ARTISTS index
// =====================================================================
function ArtistsPage() {
  const letters = "ABCDEFGHIJKLMNOPRSTUVWY".split("");
  const ascii = s => s
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[İI]/gi, "I")
    .toUpperCase();
  const [letter, setLetter] = useState("ALL");
  const filtered = letter === "ALL"
    ? ARTISTS
    : ARTISTS.filter(a => ascii(a.name).startsWith(letter));

  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>The Roster · 40 Artists</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Artists</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            Forty contemporary practices represented across painting, sculpture, installation and the digital. Browse the full roster or filter by initial.
          </p>
        </div>
      </section>

      <section className="s-pad-sm">
        <div className="wrap">
          <div className="az">
            <button className={letter === "ALL" ? "active" : ""} onClick={() => setLetter("ALL")}>ALL</button>
            {letters.map(L => {
              const has = ARTISTS.some(a => ascii(a.name).startsWith(L));
              return (
                <button
                  key={L}
                  className={(letter === L ? "active " : "") + (has ? "" : "disabled")}
                  onClick={() => has && setLetter(L)}
                  disabled={!has}
                >{L}</button>
              );
            })}
          </div>

          <div className="artist-grid">
            {filtered.map(a => {
              const slug = a.name.toLowerCase().replace(/[^a-z]+/g, "-");
              return (
                <a key={a.name} href={"#/artists/" + slug} className="a-card">
                  <div className="thumb placeholder"></div>
                  <div>
                    <div className="name">{a.name}</div>
                    <div className="meta-row">{a.born} · {a.medium}</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ARTIST DETAIL
// =====================================================================
function ArtistDetailPage({ slug }) {
  const artist = ARTISTS.find(a => a.name.toLowerCase().replace(/[^a-z]+/g, "-") === slug) || ARTISTS[0];
  const exhibitionsBy = EXS.filter(e => e.artists && e.artists.includes(artist.name));

  return (
    <div className="fade">
      <section style={{ padding: "48px 0", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <a href="#/artists" className="meta">← All artists</a>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, marginTop: 28, alignItems: "end" }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Artist</div>
              <h1 className="h1" style={{ marginTop: 14 }}>{artist.name}</h1>
              <div className="meta" style={{ marginTop: 16 }}>{artist.born} · Lives and works in {artist.lives} · {artist.medium}</div>
            </div>
            <div className="img-wrap aspect-4x3" style={{ background: "var(--surface)" }}>
              <div style={{
                width: "100%", height: "100%",
                background: "repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--surface-2) 8px 16px)"
              }} />
              <span className="credit-overlay" style={{ color: "var(--muted)" }}>Portrait pending — artist to supply</span>
            </div>
          </div>
        </div>
      </section>

      <section className="s-pad">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
            <div>
              <div className="kicker">Biography</div>
              <p className="lede" style={{ marginTop: 18 }}>
                {artist.name.split(" ").pop()} works at the intersection of {artist.medium.toLowerCase()} and historical reference, with practices held at the gallery since {2018 + ((artist.name.length % 7))}.
              </p>
              <p className="body" style={{ marginTop: 24 }}>
                A working biography and full CV will appear here on artist confirmation. Sevil Dolmacı Gallery represents {artist.name} for Türkiye and the wider GCC; selected works are exhibited at Villa Ipranosyan, Istanbul and Building R04, Dubai. Availability and provenance via <a className="link-u" href="mailto:sales@sevildolmaci.com">sales@sevildolmaci.com</a>.
              </p>
              <p className="body">
                Press and image requests: <a className="link-u" href="mailto:press@sevildolmaci.com">press@sevildolmaci.com</a>.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 16, flexWrap: "wrap" }}>
                <a href="#/contact" className="btn">Enquire about works</a>
                <a href="#/contact" className="btn btn-ghost">Request CV (PDF)</a>
              </div>
            </div>

            <div>
              <div className="kicker">Exhibitions at Sevil Dolmacı</div>
              <div style={{ marginTop: 20 }}>
                {(exhibitionsBy.length ? exhibitionsBy : EXS.slice(0, 3)).map(ex => (
                  <a key={ex.slug} href={"#/exhibitions/" + ex.slug} className="press-row" style={{ gridTemplateColumns: "1fr 100px" }}>
                    <div>
                      <div className="head"><em>{ex.title}</em></div>
                      <div className="meta" style={{ marginTop: 6 }}>{ex.city} · {ex.start} — {ex.end}</div>
                    </div>
                    <div className="arr"><Icon.ArrowSmall /></div>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Works placeholder grid */}
      <section className="s-pad" style={{ background: "var(--surface)" }}>
        <div className="wrap">
          <SectionHead
            kicker="Selected works"
            title={<>Works, <em>by enquiry</em></>}
            rightLabel="Enquire about availability"
            rightHref="#/contact"
          />
          <div className="g3">
            {[1,2,3,4,5,6].map(i => (
              <div key={i}>
                <div className="img-wrap aspect-4x3" style={{
                  background: "repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--bg) 10px 20px)"
                }}>
                  <span className="credit-overlay" style={{color: "var(--muted)"}}>Work {i} — image pending artist permission</span>
                </div>
                <div className="meta" style={{ marginTop: 14 }}>Untitled (study), 2024</div>
                <div className="serif-italic" style={{ fontSize: 18, marginTop: 4 }}>{artist.name}</div>
                <div className="credit" style={{ marginTop: 6 }}>{artist.medium}. © the artist. Courtesy Sevil Dolmacı Gallery. Price on request.</div>
              </div>
            ))}
          </div>
          <p className="credit" style={{ marginTop: 28 }}>
            Artwork availability is by enquiry. No prices are published. Every reproduced image carries a credit line and is published with artist permission.
          </p>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// PUBLICATIONS
// =====================================================================
function PublicationsPage() {
  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Publications · Catalogues · Editions</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Publications</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            Catalogues and monographs published in connection with the gallery's programme. Available by request — no PDFs are circulated without prior clearance.
          </p>
        </div>
      </section>

      <section className="s-pad">
        <div className="wrap">
          <div className="g3">
            {PUBS.map(p => <PublicationCard key={p.title} pub={p} />)}
          </div>

          <div style={{ marginTop: 80, padding: 40, background: "var(--surface)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
            <div>
              <div className="kicker">Catalogue requests</div>
              <h3 className="h3" style={{ marginTop: 12 }}><em>Receive a printed copy by post</em></h3>
              <p className="body" style={{ marginTop: 12 }}>
                Selected catalogues are available to collectors, institutions and press. Provide your shipping address and we will respond within five working days.
              </p>
            </div>
            <a href="#/contact" className="btn" style={{ justifySelf: "end" }}>Request a catalogue</a>
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// FAIRS
// =====================================================================
function FairsPage() {
  const confirmed = FAIRS.filter(f => f.status === "Confirmed");
  const archive = FAIRS.filter(f => f.status === "Archive");
  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Art Fairs · International</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Fairs</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            Selected international fairs at which Sevil Dolmacı Gallery has shown. Latest confirmed entries from 2025; archive seasons listed below.
          </p>
        </div>
      </section>

      <section className="s-pad-sm">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>2025 — Confirmed</div>
          <div className="row-list" style={{ borderTopColor: "var(--text)" }}>
            {confirmed.map((f, i) => (
              <div key={f.name + f.year} className="row" style={{ gridTemplateColumns: "80px 1.4fr 1fr 200px 160px 40px" }}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="title-cell" style={{ fontStyle: "italic" }}>{f.name}</div>
                <div className="who">{f.city}</div>
                <div className="when">{f.dates}</div>
                <div className="where">{f.booth}</div>
                <div className="arrow"><Icon.ArrowSmall /></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="s-pad-sm" style={{ background: "var(--surface)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Archive</div>
          <div className="row-list" style={{ borderTopColor: "var(--border-strong)" }}>
            {archive.map((f, i) => (
              <div key={f.name + f.year + i} className="row" style={{ gridTemplateColumns: "80px 1.4fr 1fr 200px 160px 40px" }}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="title-cell" style={{ fontStyle: "italic", color: "var(--secondary)" }}>{f.name}</div>
                <div className="who">{f.city}</div>
                <div className="when">{f.dates}</div>
                <div className="where">Archive</div>
                <div className="arrow"><Icon.ArrowSmall /></div>
              </div>
            ))}
          </div>
          <p className="credit" style={{ marginTop: 24 }}>
            Booth photography and works lists from each fair are available to press on request. Earlier seasons (2023 and prior) are catalogued internally — please write to <a href="mailto:press@sevildolmaci.com" className="link-u" style={{color:"var(--accent)"}}>press@sevildolmaci.com</a>.
          </p>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// PRESS
// =====================================================================
function PressPage() {
  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Press · News · Publications</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Press</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            Attributed press coverage from the gallery's programme. Each title links to the original publication; image requests via <a href="mailto:press@sevildolmaci.com" className="link-u">press@sevildolmaci.com</a>.
          </p>
        </div>
      </section>

      <section className="s-pad-sm">
        <div className="wrap">
          <div style={{ borderTop: "1px solid var(--text)" }}>
            {PRESS.map((p, i) => (
              <a key={i} href={p.url} className="press-row">
                <div className="pub">{p.pub}</div>
                <div>
                  <div className="head">{p.head}</div>
                  <div className="body" style={{ fontSize: 13, marginTop: 6, color: "var(--muted)" }}>{p.excerpt}</div>
                </div>
                <div className="date">{p.date}</div>
                <div className="arr"><Icon.ArrowSmall /></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="s-pad-sm" style={{ background: "var(--surface)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
          <div>
            <div className="kicker">Press kit</div>
            <h3 className="h3" style={{ marginTop: 12 }}><em>High‑resolution materials, by request</em></h3>
            <p className="body" style={{ marginTop: 12 }}>
              Approved press images, exhibition texts, fact sheets and the gallery boilerplate are available to credentialed media on request. We respond within two working days.
            </p>
          </div>
          <div style={{ alignSelf: "center" }}>
            <a href="mailto:press@sevildolmaci.com" className="btn">Request press kit</a>
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ABOUT
// =====================================================================
function AboutPage() {
  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>About · Two cities, one programme</div>
          <h1 className="h1" style={{ marginTop: 14, maxWidth: 1100 }}>
            <em>A contemporary art gallery</em> between Istanbul and Dubai — a bridge between the Western art world and the Middle East.
          </h1>
        </div>
      </section>

      {/* Founder */}
      <section className="s-pad">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
            <div>
              <ImgFig src="media/founder-sevil-dolmaci.webp" aspect="3x4" alt="Sevil Dolmacı, Founder" credit="Sevil Dolmacı, Founder & Director · portrait pending official credit" />
            </div>
            <div>
              <div className="kicker">The Founder</div>
              <h2 className="h2" style={{ marginTop: 12 }}>Sevil Dolmacı, art historian.</h2>
              <p className="lede" style={{ marginTop: 24 }}>
                Sevil Dolmacı holds an MA and PhD in art history, with academic training spanning courses at the Royal Academy of Arts and museum work at the Saatchi Gallery and Tate Modern, London.
              </p>
              <p className="body">
                She founded Sevil Dolmacı Art Consultancy in 2015, and opened the gallery proper in Istanbul in 2017. The Dubai space at Building R04, 11 in Dubai Design District opened on 6 November 2023 — a white‑cube, single‑volume room that complements the four‑floor heritage of Villa Ipranosyan in Beşiktaş.
              </p>
              <p className="body">
                Her work has centred on curating contemporary practices that move between Türkiye, continental Europe and the Gulf — and on building a publishing and collector programme around them.
              </p>
              <div style={{ marginTop: 32 }}>
                <a href="#/contact" className="btn-arrow"><span className="ln"></span>Schedule a studio or office visit</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="s-pad-sm" style={{ background: "var(--primary)", color: "var(--bg)" }}>
        <div className="wrap" style={{ color: "var(--bg)" }}>
          <div className="kicker" style={{ color: "var(--accent)" }}>A short chronology</div>
          <h2 className="h2" style={{ color: "var(--bg)", marginTop: 12, marginBottom: 48 }}>From consultancy to gallery, <em>2015 — present</em>.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
              ["2015", "Consultancy", "Sevil Dolmacı Art Consultancy is founded — advisory work for private collections and institutions."],
              ["2017", "Istanbul", "The gallery is founded in Istanbul, curating Turkish and international contemporary practices."],
              ["2020", "Villa Ipranosyan", "The Istanbul space moves to Villa Ipranosyan, a Grade‑II historical monument in Beşiktaş."],
              ["2023", "Dubai", "The Dubai space opens on 6 November at Building R04, 11, Dubai Design District."],
            ].map(([year, t, body]) => (
              <div key={year}>
                <div className="serif" style={{ fontSize: 64, lineHeight: 0.9, color: "var(--bg)" }}>{year}</div>
                <div className="kicker" style={{ marginTop: 12, color: "var(--accent)" }}>{t}</div>
                <p className="body" style={{ color: "rgba(250,250,248,.74)", marginTop: 12 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Spaces */}
      <section className="s-pad">
        <div className="wrap">
          <SectionHead
            kicker="The spaces"
            title={<>Two rooms, <em>two grammars</em>.</>}
          />
          <div className="g2">
            <div>
              <ImgFig src="media/space-istanbul-villa-ipranosyan.webp" aspect="4x3" alt="Villa Ipranosyan, Istanbul" credit="Villa Ipranosyan, Beşiktaş, Istanbul — exterior and salon." />
              <div className="kicker" style={{ marginTop: 18 }}>Istanbul</div>
              <h3 className="h3" style={{ marginTop: 8 }}><em>Villa Ipranosyan</em></h3>
              <p className="body" style={{ marginTop: 12 }}>
                A four‑floor Grade‑II heritage villa with terrace and garden, in Cihannüma, Beşiktaş. Daylight, plaster, and a slow vertical reading.
              </p>
            </div>
            <div>
              <ImgFig src="media/space-dubai-d3-interior.webp" aspect="4x3" alt="Dubai d3, Building R04" credit="Building R04, 11, Dubai Design District — single‑volume white‑cube." />
              <div className="kicker" style={{ marginTop: 18 }}>Dubai</div>
              <h3 className="h3" style={{ marginTop: 8 }}><em>Building R04, 11 · d3</em></h3>
              <p className="body" style={{ marginTop: 12 }}>
                A single‑volume white‑cube with high ceilings and large wall runs, in Dubai Design District. Designed for single‑exhibition immersion.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// CONTACT
// =====================================================================
function ContactPage() {
  const [route, setRoute] = useState("general");
  const routes = [
    ["sales", "Availability & sales", "sales@sevildolmaci.com"],
    ["catalogue", "Catalogue requests", "info@sevildolmaci.com"],
    ["press", "Press & media", "press@sevildolmaci.com"],
    ["dubai", "Dubai general enquiry", "dubai@sevildolmaci.com"],
    ["general", "General enquiry", "info@sevildolmaci.com"],
  ];
  const active = routes.find(r => r[0] === route);
  const [submitted, setSubmitted] = useState(false);

  return (
    <div className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Contact · Istanbul & Dubai</div>
          <h1 className="h1" style={{ marginTop: 14 }}><em>Contact</em></h1>
          <p className="lede" style={{ marginTop: 18, maxWidth: 760 }}>
            Two cities, distinct addresses and hours. Choose the right desk below and we will respond within two working days.
          </p>
        </div>
      </section>

      {/* Two-city block */}
      <section className="cities" style={{ borderTop: 0 }}>
        <div className="city">
          <ImgFig src="media/space-istanbul-villa-ipranosyan.webp" aspect="16x9" alt="Villa Ipranosyan, Istanbul" credit="Villa Ipranosyan, Beşiktaş" />
          <div className="kicker">Istanbul</div>
          <h2 className="name">Villa Ipranosyan</h2>
          <div className="addr">
            Cihannüma Mahallesi, Çömezler Sokağı<br/>
            No: 16, Beşiktaş / İstanbul, Türkiye
          </div>
          <div className="hours">
            <div className="h-day">Tue — Sat</div><div>10:30 — 18:00</div>
            <div className="h-day">Monday</div><div>By appointment</div>
          </div>
          <div className="addr" style={{ marginTop: 18 }}>
            <strong>+90 (212) 258 95 85</strong><br/>
            <a href="mailto:info@sevildolmaci.com" className="link-u" style={{color: "var(--accent)"}}>info@sevildolmaci.com</a>
          </div>
          <div className="actions">
            <a className="link-u" href="#">Open in Maps ↗</a>
            <span className="meta">Address‑based map</span>
          </div>
        </div>
        <div className="city">
          <ImgFig src="media/space-dubai-d3-interior.webp" aspect="16x9" alt="Dubai d3" credit="Building R04, 11, d3" />
          <div className="kicker">Dubai</div>
          <h2 className="name">Building R04, 11</h2>
          <div className="addr">
            Dubai Design District<br/>
            Dubai, United Arab Emirates
          </div>
          <div className="hours">
            <div className="h-day">Tue — Sat</div><div>10:00 — 19:00</div>
            <div className="h-day">Monday</div><div>By appointment</div>
          </div>
          <div className="addr" style={{ marginTop: 18 }}>
            <strong>+971 58 571 61 86</strong><br/>
            <a href="mailto:dubai@sevildolmaci.com" className="link-u" style={{color: "var(--accent)"}}>dubai@sevildolmaci.com</a>
          </div>
          <div className="actions">
            <a className="link-u" href="#">Open in Maps ↗</a>
            <span className="meta">Address‑based map</span>
          </div>
        </div>
      </section>

      {/* Form */}
      <section className="s-pad">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <div>
            <div className="kicker">Enquiry routing</div>
            <h2 className="h2" style={{ marginTop: 12 }}>Write to the <em>right desk</em>.</h2>
            <p className="body" style={{ marginTop: 16 }}>
              Each enquiry is routed to a named address. No automated reply, no marketing emails. We respond within two working days.
            </p>
            <div style={{ marginTop: 32, display: "grid", gap: 8 }}>
              {routes.map(([key, label, addr]) => (
                <button
                  key={key}
                  onClick={() => setRoute(key)}
                  style={{
                    textAlign: "left",
                    background: route === key ? "var(--primary)" : "transparent",
                    color: route === key ? "var(--bg)" : "var(--primary)",
                    border: "1px solid " + (route === key ? "var(--primary)" : "var(--border-strong)"),
                    padding: "16px 20px",
                    display: "grid",
                    gridTemplateColumns: "1fr auto",
                    gap: 16,
                    alignItems: "center",
                  }}
                >
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic" }}>{label}</div>
                    <div className="meta" style={{ color: route === key ? "rgba(250,250,248,.5)" : "var(--muted)", marginTop: 4 }}>{addr}</div>
                  </div>
                  <Icon.ArrowSmall />
                </button>
              ))}
            </div>
          </div>

          <div>
            <div className="kicker">{active[1]}</div>
            <h2 className="h2" style={{ marginTop: 12 }}>
              {route === "sales" && <em>Enquire about availability</em>}
              {route === "catalogue" && <em>Request a catalogue</em>}
              {route === "press" && <em>Press & image requests</em>}
              {route === "dubai" && <em>Plan a visit to Dubai</em>}
              {route === "general" && <em>Say hello</em>}
            </h2>
            <p className="meta" style={{ marginTop: 12, textTransform: "none", letterSpacing: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, color: "var(--secondary)" }}>
              This form sends to <a href={"mailto:" + active[2]} className="link-bronze">{active[2]}</a>
            </p>

            {submitted ? (
              <div style={{ marginTop: 32, padding: 32, border: "1px solid var(--accent)", background: "var(--surface)" }}>
                <div className="kicker">Sent</div>
                <h3 className="h3" style={{ marginTop: 12 }}><em>Thank you — your message is on its way.</em></h3>
                <p className="body" style={{ marginTop: 12 }}>We respond within two working days. For urgent press, please call the gallery directly.</p>
                <button className="btn-arrow" style={{ marginTop: 20 }} onClick={() => setSubmitted(false)}><span className="ln"></span>Send another</button>
              </div>
            ) : (
              <form className="form" style={{ marginTop: 32, maxWidth: "none" }} onSubmit={(e) => { e.preventDefault(); setSubmitted(true); window.scrollTo({top: 0, behavior: "smooth"}); }}>
                <div className="row2">
                  <div className="field">
                    <label>First name</label>
                    <input type="text" required />
                  </div>
                  <div className="field">
                    <label>Last name</label>
                    <input type="text" required />
                  </div>
                </div>
                <div className="row2">
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required defaultValue="" />
                  </div>
                  <div className="field">
                    <label>Telephone (optional)</label>
                    <input type="tel" />
                  </div>
                </div>
                {(route === "sales" || route === "catalogue") && (
                  <div className="field">
                    <label>{route === "sales" ? "Artist / work of interest" : "Catalogue title"}</label>
                    <input type="text" placeholder={route === "sales" ? "e.g. Peter Halley, recent works" : "e.g. Ekrem Yalçındağ (2022)"} />
                  </div>
                )}
                {route === "press" && (
                  <div className="field">
                    <label>Publication</label>
                    <input type="text" placeholder="e.g. Frieze, The Art Newspaper" />
                  </div>
                )}
                {route === "dubai" && (
                  <div className="row2">
                    <div className="field">
                      <label>Preferred date</label>
                      <input type="date" />
                    </div>
                    <div className="field">
                      <label>Party size</label>
                      <input type="number" min="1" defaultValue="1" />
                    </div>
                  </div>
                )}
                <div className="field">
                  <label>Message</label>
                  <textarea required placeholder="Brief context — we'll route to the right person."></textarea>
                </div>
                <div className="check">
                  <input type="checkbox" id="ml-opt" />
                  <label htmlFor="ml-opt" style={{ letterSpacing: 0, textTransform: "none", color: "var(--secondary)", fontSize: 12 }}>
                    Subscribe me to the gallery's quarterly mailing list. (Optional.)
                  </label>
                </div>
                <button type="submit" className="btn submit">Send enquiry</button>
                <div className="note">By submitting, you agree to be contacted by Sevil Dolmacı Gallery regarding your enquiry. No marketing emails are sent without consent.</div>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  HomePage, ExhibitionsPage, ExhibitionDetailPage,
  ArtistsPage, ArtistDetailPage, PublicationsPage,
  FairsPage, PressPage, AboutPage, ContactPage,
});