// SeriesPage.jsx — series statement + gallery; and the series index
const SeriesPage = ({ seriesId, onNav, onOpen }) => {
  const { SERIES, ARCHIVE, Reveal, Card } = window;

  // ---- Index (all series) ----
  if (!seriesId) {
    return (
      <div>
        <section className="band-ink" style={{padding:'88px 0 64px'}}>
          <div className="wrap">
            <div className="kicker-row" style={{marginBottom:18}}>
              <span className="flare-dot"></span><span className="eyebrow on-dark">The work</span>
            </div>
            <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                        fontSize:'clamp(38px,6vw,84px)', letterSpacing:'-0.025em', lineHeight:0.98, maxWidth:900}}>
              One instrument, shown from blueprint to transmission.
            </h1>
          </div>
        </section>
        <section className="band-veil">
          {SERIES.map((s, i) => (
            <Reveal key={s.id} className={"series-row" + (i % 2 ? " alt" : "")}>
              <div className="media" onClick={() => onNav('series/' + s.id)} style={{cursor:'pointer'}}>
                <img src={s.cover} alt={s.title} loading="lazy" />
              </div>
              <div className="info">
                <div className="num">{s.no} / {s.tag}</div>
                <h3>{s.title}</h3>
                <p className="body dim" style={{maxWidth:440}}>{s.short}</p>
                <div style={{display:'flex', alignItems:'center', gap:20, marginTop:6}}>
                  <button className="link-arrow" onClick={() => onNav('series/' + s.id)}>
                    Enter the series <span className="ar">→</span>
                  </button>
                  <span className="meta">{window.worksOf(s.id).length} works · {s.year}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </section>
        <section className="section band-earth" style={{'--sp':'84px'}}>
          <div className="wrap">
            <div className="kicker-row" style={{marginBottom:28}}>
              <span className="flare-dot"></span>
              <span className="eyebrow" style={{color:'var(--veil)'}}>Earlier work · archive</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48}}>
              {ARCHIVE.map(a => (
                <div key={a.id}>
                  <div className="meta" style={{color:'var(--veil)', opacity:0.75, marginBottom:12}}>{a.tag} · {a.year}</div>
                  <h3 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                              fontSize:30, letterSpacing:'-0.01em', marginBottom:12}}>{a.title}</h3>
                  <p className="body" style={{color:'rgba(228,219,198,0.85)', marginBottom:14}}>{a.text}</p>
                  <div className="meta" style={{color:'var(--veil)'}}>{a.range} · mostly collected</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }

  // ---- Single series ----
  const s = window.seriesById(seriesId);
  if (!s) return <div className="wrap section">Series not found.</div>;
  const works = window.worksOf(seriesId);
  const idx = SERIES.findIndex(x => x.id === seriesId);
  const next = SERIES[(idx + 1) % SERIES.length];

  return (
    <div>
      {/* statement header */}
      <section className="band-ink" style={{padding:'80px 0 72px'}}>
        <div className="wrap">
          <button className="link-arrow" style={{marginBottom:34}} onClick={() => onNav('series')}>
            <span className="ar" style={{transform:'rotate(180deg)'}}>→</span> All series
          </button>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end'}}>
            <div>
              <div className="meta on-dark" style={{marginBottom:20}}>{s.no} — {s.tag}</div>
              <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                          fontSize:'clamp(40px,6vw,88px)', letterSpacing:'-0.025em', lineHeight:0.95}}>
                {s.title}
              </h1>
            </div>
            <div>
              <p className="lead on-dark" style={{marginBottom:20}}>{s.lead}</p>
              {s.body.map((p,i) => (
                <p key={i} className="body on-dark" style={{marginBottom:14}}>{p}</p>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* gallery */}
      <section className="section band-veil" style={{'--sp':'80px'}}>
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline',
                       marginBottom:42, borderBottom:'1px solid var(--ink-line)', paddingBottom:18}}>
            <span className="eyebrow">{works.length} works</span>
            <span className="meta">{s.year}</span>
          </div>
          <div className="gal">
            {works.map(w => <Card key={w.id} work={w} onOpen={onOpen} />)}
          </div>
        </div>
      </section>

      {/* collect prompt */}
      <section className="section band-veil" style={{'--sp':'0', paddingBottom:96}}>
        <div className="wrap" style={{borderTop:'1px solid var(--ink-line)', paddingTop:56,
                                       display:'flex', justifyContent:'space-between', alignItems:'center',
                                       gap:32, flexWrap:'wrap'}}>
          <div style={{maxWidth:520}}>
            <h3 style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:'clamp(20px,2.2vw,28px)',
                        letterSpacing:'-0.01em', marginBottom:10}}>
              Considering a piece from {s.title}?
            </h3>
            <p className="body dim">
              Tell the studio what’s drawing you in. We’ll talk through the work, framing, and shipping
              before anything is decided — no deposit, no pressure.
            </p>
          </div>
          <button className="btn btn-ink" onClick={() => onNav('collect')}>Inquire with the studio →</button>
        </div>
      </section>

      {/* next series */}
      <section className="band-ink" onClick={() => onNav('series/' + next.id)}
               style={{cursor:'pointer', borderTop:'1px solid var(--ink-line)'}}>
        <div className="wrap" style={{padding:'48px 64px', display:'flex',
             justifyContent:'space-between', alignItems:'center', gap:24}}>
          <div>
            <div className="meta on-dark" style={{marginBottom:8}}>Next series — {next.no}</div>
            <div style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                         fontSize:'clamp(24px,3vw,40px)', letterSpacing:'-0.015em'}}>{next.title}</div>
          </div>
          <span className="link-arrow" style={{fontSize:14}}>Continue <span className="ar">→</span></span>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { SeriesPage });