// BrewersArt.jsx — The Brewer's Art Series: studio history page
const BA = (file) => encodeURI('assets/brewers-art/' + file);

const BrewersArt = ({ onNav }) => {
  const { Reveal } = window;

  const hanging = [
    { img: BA('Trophy.jpg'), title: 'Trophy', cap: 'Trophy · upstairs bar, The Brewer\'s Art' },
    { img: BA('Pawn.jpg'), title: 'Pawn', cap: 'Pawn · upstairs bar, The Brewer\'s Art' },
    { img: BA('BlindAlley.png'), title: 'Blind Alley', cap: 'Blind Alley · upstairs bar, The Brewer\'s Art' },
  ];

  const recovery = [
    { img: BA('Removal_1.jpg'), cap: 'Recovering the paintings, 2026' },
    { img: BA('Removal_2.jpg'), cap: 'Recovering the paintings, 2026' },
    { img: BA('StudioMove.jpg'), cap: 'Moving them into the Parkdale Ave studio' },
  ];

  const onView = [
    { img: BA('Reunion.jpeg'), cap: 'All three, together again — Last Call, Electric Avenue Gallery' },
    { img: BA('DruAtGallery_4.png'), cap: 'On view at Last Call, Electric Avenue Gallery' },
    { img: BA('DruAtGallery_2.jpeg'), cap: 'On view at Last Call, Electric Avenue Gallery' },
  ];

  const PhotoRow = ({ items }) => (
    <div className="rg-3col" style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:28}}>
      {items.map((it, i) => (
        <Reveal key={i} delay={i * 80}>
          <div style={{overflow:'hidden', background:'#16232a', aspectRatio:'4/5'}}>
            <img src={it.img} alt={it.title || it.cap} loading="lazy"
                 style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
          </div>
          <div className="meta" style={{marginTop:10, opacity:0.75}}>{it.cap}</div>
        </Reveal>
      ))}
    </div>
  );

  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">Studio history · 1996 — 2026</span>
            </div>
            <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                        fontSize:'clamp(36px,5vw,72px)', letterSpacing:'-0.025em', lineHeight:0.98}}>
              The Brewer's Art Series
            </h1>
            <p className="lead on-dark" style={{marginTop:24, maxWidth:520}}>
              Three paintings, thirty years at a Baltimore bar, and the story of getting them back.
            </p>
          </div>
          <Reveal>
            <div style={{overflow:'hidden', background:'#16232a'}}>
              <img src={BA('DruAtGallery_4.png')} alt="Drury Bynum with the recovered Brewer's Art paintings"
                   style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            </div>
            <div className="hero-cap" style={{marginTop:14}}>
              <span className="t" style={{color:'var(--veil)'}}>Reunited</span>
              <span className="meta on-dark">Last Call · Electric Avenue Gallery, Baltimore</span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* story */}
      <section className="section band-veil">
        <div className="wrap" style={{maxWidth:760}}>
          <Reveal>
            <div style={{display:'flex', flexDirection:'column', gap:22}}>
              <p className="lead">
                In 1995, while finishing my MFA at Bowling Green State University, I received a commission
                from The Brewer's Art in Baltimore to make three large paintings for the upstairs bar. The
                brief from my friend Johey, then head chef, was simple: "architectural with a graphic
                punch." That line broke me into a new style — one that still shows up in my work today.
              </p>
              <p className="body">
                I delivered the paintings — Blind Alley, Trophy, and Pawn — in 1996. They hung at The
                Brewer's Art for nearly thirty years, where they became part of the room's atmosphere and
                memory. First dates happened underneath them. Regulars had opinions about them. They
                outlasted a lot of conversations that started with someone asking what they meant.
              </p>
              <p className="body">
                When The Brewer's Art closed without warning in 2026, I went after the paintings — a
                bankruptcy process, months of emails to a trustee who had no reason to hurry. I finally got
                them back. I wanted them not just because they mattered to my own development, but because
                they'd quietly become part of Baltimore's memory too.
              </p>
              <p className="body dim">
                They're on view now, together, at Last Call at Electric Avenue Gallery in Baltimore — the
                first time all three have hung in the same room since I delivered them in 1996. Seeing them
                next to the new work is its own kind of conversation: thirty years of distance, same eye
                underneath it. I didn't fully clock how good those early paintings were when I made them —
                I was too close, too busy finishing grad school, too young to know what I'd built. Looking
                at them now, I have a real respect for that version of me. He could see more than he knew
                he could.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* hanging at the bar */}
      <section className="section band-ink" style={{'--sp':'72px'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:30}}>
            <span className="flare-dot"></span>
            <span className="eyebrow on-dark">Hanging at The Brewer's Art, 1996 — 2026</span>
          </div>
          <PhotoRow items={hanging} />
        </div>
      </section>

      {/* recovery */}
      <section className="section band-veil" style={{'--sp':'72px'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:30}}>
            <span className="flare-dot"></span>
            <span className="eyebrow">Bringing them home, 2026</span>
          </div>
          <PhotoRow items={recovery} />
        </div>
      </section>

      {/* on view */}
      <section className="section band-ink" style={{'--sp':'72px', paddingBottom:96}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:30}}>
            <span className="flare-dot"></span>
            <span className="eyebrow on-dark">On view now — Last Call, Electric Avenue Gallery</span>
          </div>
          <PhotoRow items={onView} />
          <div style={{display:'flex', gap:20, marginTop:56}}>
            <button className="btn btn-veil" onClick={() => onNav('about')}>About the artist →</button>
            <button className="btn btn-ghost-veil" onClick={() => onNav('series')}>See the current work →</button>
          </div>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { BrewersArt });