// Home.jsx — landing page
const Home = ({ onNav, onOpen, headline }) => {
  const { SERIES, ARCHIVE, WORKS, Reveal, Card } = window;
  const hero = window.workById('tuning');
  const featured = ['frequency-translation','augur','receiving','sibyl','conduit','mneme']
    .map(window.workById);

  const headlines = {
    argument: <>The argument<br/><span className="em">is the work.</span></>,
    contact:  <>Art was once<br/>not expression.<br/><span className="em">It was contact.</span></>,
    becoming: <>Always in the<br/>middle of<br/><span className="em">becoming.</span></>,
  };

  return (
    <div>
      {/* ---------- HERO ---------- */}
      <section className="hero">
        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow">
              <span className="flare-dot"></span>
              <span className="eyebrow on-dark">The Seraphic Veil · 2025 — ongoing</span>
            </div>
            <h1 className="hero-h1">{headlines[headline] || headlines.argument}</h1>
            <p className="hero-lead lead on-dark">
              Mixed-media paintings made where Midjourney-originated imagery is brought into the
              studio — cut, pasted, ripped, and argued with in oil until something neither force
              could make alone arrives on the panel.
            </p>
            <div className="hero-actions">
              <button className="btn btn-veil" onClick={() => onNav('series/seraphic-veil')}>View the work →</button>
              <button className="btn btn-ghost-flare" onClick={() => onNav('about')}>Read the statement</button>
            </div>
          </div>
          <Reveal className="hero-figure">
            <div className="frame"><img src={hero.img} alt="Tuning" /></div>
            <div className="hero-cap">
              <span className="t">Tuning</span>
              <span className="meta on-dark">Oil, ink &amp; collage · 36 × 24 in · 2025</span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------- THE WORLD ---------- */}
      <section className="section band-veil">
        <div className="wrap world-grid">
          <Reveal>
            <div className="kicker-row">
              <span className="flare-dot"></span>
              <span className="eyebrow">The premise</span>
            </div>
            <p className="pullquote">
              The figures are not muses. They are artists — mid-receipt, interfacing with an
              intelligence that bypasses logic and moves through material.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div className="colrule">
              <p className="body" style={{marginBottom:18}}>
                The Seraphic Veil unfolds within an alternate mythology — one in which a being once
                celestial is born into human form to fulfil a forgotten promise: to spark a new
                flourishing of intelligence through art. This intelligence is not technological in
                the modern sense, but a convergence of the artificial and the spiritual.
              </p>
              <p className="body dim">
                Through studio rituals, the figures construct seraphic veils — headdresses of pigment,
                paper, and intention — which let them enter heightened states of creation and receive
                transmissions. Painting becomes their interface. The veil, their antenna.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------- SERIES INDEX ---------- */}
      <section className="band-veil" style={{paddingBottom:0}}>
        <div className="wrap" style={{paddingBottom:48}}>
          <div className="kicker-row" style={{marginBottom:8}}>
            <span className="eyebrow">The bodies of work</span>
          </div>
          <h2 style={{fontFamily:'var(--font-display)', fontWeight:900, fontSize:'clamp(26px,3vw,40px)',
                      letterSpacing:'-0.015em', maxWidth:680}}>
            Three series — one instrument, shown from blueprint to transmission.
          </h2>
        </div>
        <div>
          {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:420}}>{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>
          ))}
        </div>
      </section>

      {/* ---------- FEATURED WORKS ---------- */}
      <section className="section band-ink">
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end',
                       gap:24, marginBottom:48, flexWrap:'wrap'}}>
            <div>
              <div className="kicker-row" style={{marginBottom:14}}>
                <span className="flare-dot"></span><span className="eyebrow on-dark">Selected work</span>
              </div>
              <h2 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                          fontSize:'clamp(26px,3vw,42px)', letterSpacing:'-0.015em'}}>
                Recent transmissions
              </h2>
            </div>
            <button className="btn btn-ghost-veil" onClick={() => onNav('series')}>All work →</button>
          </div>
          <div className="gal">
            {featured.map(w => <Card key={w.id} work={w} onOpen={onOpen} />)}
          </div>
        </div>
      </section>

      {/* ---------- STATEMENT TEASER ---------- */}
      <section className="section band-veil">
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center'}}>
          <Reveal>
            <p className="pullquote" style={{fontSize:'clamp(22px,2.6vw,34px)'}}>
              I came to AI the same way I came to collage — sideways, by accident, through frustration.
              <span className="cite">Drury Bynum · on the practice</span>
            </p>
          </Reveal>
          <Reveal delay={120}>
            <p className="body" style={{marginBottom:20}}>
              Drury Bynum has painted, directed award-winning films, and returned to the studio in
              Baltimore to make portraits of imaginary characters caught mid-transformation. AI is a
              collaborator with a fast, frictionless fluency — but it takes an artist’s hand to
              deconstruct what it produces and make it mean something.
            </p>
            <button className="btn btn-ghost-ink" onClick={() => onNav('about')}>About the artist →</button>
          </Reveal>
        </div>
      </section>

      {/* ---------- ARCHIVE STRIP ---------- */}
      <section className="section band-earth" style={{'--sp':'88px'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:30}}>
            <span className="flare-dot"></span>
            <span className="eyebrow on-dark" style={{color:'var(--veil)'}}>Earlier work</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:1, background:'var(--veil-line)',
                       border:'1px solid var(--veil-line)'}}>
            {ARCHIVE.map(a => (
              <div key={a.id} className="band-earth" style={{padding:'40px 40px'}}>
                <div className="meta" style={{color:'var(--veil)', opacity:0.7, marginBottom:14}}>{a.tag} · {a.year}</div>
                <h3 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                            fontSize:32, letterSpacing:'-0.01em', marginBottom:14}}>{a.title}</h3>
                <p className="body" style={{color:'rgba(228,219,198,0.85)', maxWidth:440, marginBottom:18}}>{a.text}</p>
                <div className="meta" style={{color:'var(--veil)'}}>{a.range} · mostly collected</div>
              </div>
            ))}
          </div>
          <p className="body" style={{color:'rgba(228,219,198,0.8)', marginTop:24, maxWidth:560}}>
            Most pieces from these series have found homes. To ask about availability or commission a
            related work, <a onClick={() => onNav('collect')} style={{color:'var(--veil)', borderBottom:'1px solid var(--veil)', cursor:'pointer'}}>contact the studio</a>.
          </p>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { Home });