// Press.jsx — press & media coverage
const Press = ({ onNav }) => {
  const { Reveal } = window;

  const mentions = [
    { date:'August 2026', outlet:'VoyageBaltimore Magazine',
      headline:'On the leap from filmmaking to painting',
      body:'A long-form interview about the studio’s move from video production into painting, the AI-assisted process behind The Seraphic Veil, and getting the Brewer’s Art paintings back.',
      quote:'It wasn’t just a reunion with old work — it was a conversation across three decades.',
      href:'https://voyagebaltimore.com/interview/meet-drury-bynum-of-baltimore' },
    { date:'September 2025', outlet:'Teal Canvas',
      headline:'On the newest series',
      body:'Jay Gutnick wrote about the work — a set of physical paintings that began with AI — on LinkedIn.',
      quote:'Drury Bynum’s newest series — physical paintings that began with AI — is captivating.',
      href:'https://www.linkedin.com/feed/update/urn:li:ugcPost:7328418689614057474/' },
  ];

  return (
    <div>
      {/* ---------- HERO ---------- */}
      <section className="band-ink" style={{padding:'80px 0 80px'}}>
        <div className="wrap about-hero rg-2col" style={{display:'grid', gridTemplateColumns:'1fr 1.08fr', gap:64, alignItems:'center'}}>
          <div>
            <div className="kicker-row" style={{marginBottom:20}}>
              <span className="flare-dot"></span><span className="eyebrow on-dark">Press</span>
            </div>
            <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                        fontSize:'clamp(40px,5.5vw,80px)', letterSpacing:'-0.025em', lineHeight:0.95}}>
              In the press
            </h1>
            <p className="lead on-dark" style={{marginTop:24, maxWidth:520}}>
              Coverage, interviews, and studio visits from people who came to look closely.
            </p>
          </div>
          <Reveal>
            <div style={{overflow:'hidden', background:'#16232a', aspectRatio:'4/5', maxHeight:'min(70vh,620px)'}}>
              <img src="assets/Dru_Portrait_Press.jpg" alt="Drury Bynum at work in the studio"
                   style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 25%', display:'block'}} />
            </div>
            <div className="hero-cap" style={{marginTop:14}}>
              <span className="t" style={{color:'var(--veil)'}}>Parkdale Ave</span>
              <span className="meta on-dark">Baltimore, MD</span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------- FEATURED ---------- */}
      <section className="section band-veil">
        <div className="wrap" style={{maxWidth:760}}>
          <Reveal>
            <div className="meta" style={{marginBottom:10}}>October 2026 · BmoreArt</div>
            <h2 style={{fontFamily:'var(--font-display)', fontWeight:900, fontSize:'clamp(28px,3.4vw,44px)',
                        letterSpacing:'-0.02em', lineHeight:1.05, marginBottom:18}}>
              Oracle Engine: Drury Bynum
            </h2>
            <p className="body dim" style={{marginBottom:22, fontStyle:'italic'}}>
              The Painter Mines His Own Archive, Archetypes, and AI for Inspiration — words by Elizabeth Hazen.
            </p>
            <p className="body" style={{marginBottom:22}}>
              When The Brewer's Art closed in 2026, Drury Bynum got back three monumental paintings he'd
              made as a grad student in 1996. Seeing them again changed how he saw his own career. "They
              were mature works of art that I did at a very young age," he says, "and I was never able to
              get to that place again until now." Elizabeth Hazen visits the studio of the Baltimore
              painter behind The Seraphic Veil, where ghostly brides become guardian angels and archivists,
              and where thirty years of archive, archetype, and AI come together.
            </p>
            <p className="pullquote" style={{marginBottom:28}}>
              Being in their presence was wild… I feel like I'm approaching that level of maturity again.
              <span className="cite">Drury Bynum — BmoreArt</span>
            </p>
            <a className="btn btn-ink" href="https://bmoreart.com/2026/10/oracle-engine-drury-bynum.html"
               target="_blank" rel="noreferrer">Read the full profile on BmoreArt →</a>
          </Reveal>
        </div>
      </section>

      {/* ---------- MORE COVERAGE ---------- */}
      <section className="section band-ink" style={{'--sp':'84px'}}>
        <div className="wrap" style={{maxWidth:760}}>
          <div className="kicker-row" style={{marginBottom:34}}>
            <span className="flare-dot"></span><span className="eyebrow on-dark">More coverage</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:44}}>
            {mentions.map((m, i) => (
              <Reveal key={m.outlet} delay={i * 80}>
                <div className="meta" style={{marginBottom:8}}>{m.date} · {m.outlet}</div>
                <h3 style={{fontFamily:'var(--font-display)', fontWeight:700, color:'var(--veil)',
                            fontSize:22, letterSpacing:'-0.01em', marginBottom:12}}>{m.headline}</h3>
                <p className="body on-dark" style={{marginBottom:14, maxWidth:620}}>{m.body}</p>
                <p className="pullquote on-dark" style={{fontSize:18, marginBottom:16}}>
                  {m.quote}
                </p>
                <a className="link-arrow" href={m.href} target="_blank" rel="noreferrer">
                  Read more <span className="ar">→</span>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- CTA ---------- */}
      <section className="section band-veil">
        <div className="wrap" style={{display:'flex', gap:20, flexWrap:'wrap'}}>
          <button className="btn btn-ink" onClick={() => onNav('series')}>See the work →</button>
          <button className="btn btn-ghost-ink" onClick={() => onNav('about')}>About the artist →</button>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { Press });