// About.jsx — bio, inspiration, studio
const About = ({ onNav }) => {
  const { Reveal, STUDIO } = window;
  const inspirations = [
    { group:'Constructivists', names:'Hannah Höch · Alexander Rodchenko · Kurt Schwitters' },
    { group:'Pop modernists', names:'Robert Rauschenberg · Roy Lichtenstein · Jasper Johns' },
    { group:'Figurative painters', names:'John Singer Sargent · Degas · Käthe Kollwitz' },
    { group:'Bay Area figurative', names:'David Park · Richard Diebenkorn · Nathan Oliveira' },
  ];
  return (
    <div>
      <section className="band-ink" style={{padding:'80px 0 80px'}}>
        <div className="wrap about-hero" 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">About the artist</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}}>
              Drury Bynum
            </h1>
            <p className="lead on-dark" style={{marginTop:24, maxWidth:520}}>
              Painter. Mixed-media artist. Film director. Working from a studio on Parkdale Ave in Baltimore.
            </p>
          </div>
          <Reveal>
            <div style={{overflow:'hidden', background:'#16232a'}}>
              <img src="assets/Dru_Mural_City_2.png" alt="Drury Bynum in the studio"
                   style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            </div>
            <div className="hero-cap" style={{marginTop:14}}>
              <span className="t" style={{color:'var(--veil)'}}>In the studio</span>
              <span className="meta on-dark">Parkdale Ave · Baltimore, MD</span>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section band-veil">
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'260px 1fr', gap:72, alignItems:'start'}}>
          <Reveal>
            <div className="eyebrow" style={{marginBottom:14}}>The bio</div>
            <div className="meta" style={{lineHeight:1.9}}>
              <div>MICA, 1988</div>
              <div>MFA · Bowling Green, 1997</div>
              <div>Film &amp; documentary, 2000s</div>
              <div>Return to painting, 2016</div>
              <div>AI into the process, 2022</div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{display:'flex', flexDirection:'column', gap:18, maxWidth:680}}>
              <p className="lead">
                Growing up in the deep south, my only exposure to art was watching my aunt paint
                Louisiana swamp scenes in her tiny kitchen studio. Her ability to summon rich, detailed
                worlds by hand prompted me to begin drawing on my own.
              </p>
              <p className="body">
                I left the south for the Maryland Institute College of Art in 1988, exploring alla prima
                painting and figure drawing before shifting to narrative themes — using collage as a way
                to iterate quickly. I received my MFA from Bowling Green in 1997; my thesis was a body of
                large-scale backyard scenes of brides, photographers, and Baltimore row-houses.
              </p>
              <p className="body">
                The shift around the internet and affordable video cameras pulled me into filmmaking in
                the mid-2000s. I ran a production company making narrative short films and documentaries
                about artists and entrepreneurs — work that won Addys, Tellys, Hermes awards, and an Emmy
                nomination.
              </p>
              <p className="body">
                In 2016 I returned to narrative painting, collage, and portraiture. When AI arrived in
                late 2022, it was clear it would reshape the art world — but it needs imagination and
                guidance from artists to produce anything culturally significant. I began iterating
                compositions in AI, then bringing them into the studio to deconstruct or push in new
                directions as physical pieces. The speed offers a collaborative fluency that physical
                materials resist — and that friction, that argument, is where the work happens.
              </p>
              <p className="body dim">
                My characters are mysterious, imaginary figures shape-shifting into bird-like beings,
                morphing with cameras and vintage photographs, or disappearing into clouds of colored
                shapes — as if imagined in a time long before computers.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* inspiration */}
      <section className="section band-ink" style={{'--sp':'84px'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:34}}>
            <span className="flare-dot"></span><span className="eyebrow on-dark">Inspiration</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:1,
                       background:'var(--ink-line)', border:'1px solid var(--ink-line)'}}>
            {inspirations.map(it => (
              <div key={it.group} className="band-ink" style={{padding:'34px 36px'}}>
                <div style={{fontFamily:'var(--font-display)', fontWeight:700, color:'var(--veil)',
                             fontSize:18, marginBottom:10, letterSpacing:'-0.01em'}}>{it.group}</div>
                <div className="body on-dark" style={{fontSize:15}}>{it.names}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* studio */}
      <section className="section band-veil" style={{'--sp':'84px'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'stretch'}}>
          <div className="band-ink" style={{padding:'48px 44px', display:'flex', flexDirection:'column',
                                            justifyContent:'space-between', minHeight:300}}>
            <div className="eyebrow on-dark">The studio</div>
            <div>
              <div style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                           fontSize:'clamp(28px,3vw,44px)', letterSpacing:'-0.02em', lineHeight:1.0, marginBottom:18}}>
                3500 Parkdale Ave<br/>Baltimore, MD
              </div>
              <div className="meta on-dark">
                {STUDIO.email}<br/>
                Instagram {STUDIO.instagram}
              </div>
            </div>
            <div style={{display:'flex', alignItems:'center', gap:10, marginTop:24}}>
              <span className="flare-dot"></span>
              <span className="meta on-dark">Trusted Art Seller · secure checkout</span>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', justifyContent:'center', gap:18}}>
            <p className="pullquote">
              Failure is not durable. The argument between the digital origin and the hand always
              resolves into something worth keeping.
            </p>
            <div style={{display:'flex', gap:20, marginTop:10}}>
              <button className="btn btn-ink" onClick={() => onNav('series')}>See the work →</button>
              <button className="btn btn-ghost-ink" onClick={() => onNav('collect')}>Collect &amp; inquire</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { About });