// BlindAlleyPrint.jsx — limited edition print of Blind Alley, standalone product page
const PR = (file) => encodeURI('assets/brewers-art/prints/' + file);
const BAImg = (file) => encodeURI('assets/brewers-art/' + file);

const PRINT_PRODUCT = {
  id: 'blind-alley-print',
  title: 'Blind Alley',
  medium: 'Archival pigment print, signed & numbered, edition of 25',
  size: '18.5 × 27.5 in',
  year: '2026 edition',
  price: 250,
  shipping: 20,
  status: 'available',
  img: PR('Print_Hero_Vestibule.jpg'),
};

const BlindAlleyPrint = ({ onNav, onAddToCart, inCart }) => {
  const { Reveal } = window;

  const gallery = [
    { img: PR('Print_Kitchen.jpg'), cap: 'Framed and hung, Baltimore kitchen' },
    { img: PR('Print_Table.jpg'), cap: 'Signed and numbered, edition of 25' },
    { img: PR('Print_Detail_1.jpg'), cap: 'Detail — the ladder and the roofline' },
    { img: PR('Print_Detail_2.jpg'), cap: 'Detail — the fence and the figure in red' },
  ];

  const PhotoGrid = ({ items }) => (
    <div className="rg-2col" style={{display:'grid', gridTemplateColumns:'repeat(2,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.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>
  );

  const Spec = ({ k, v }) => (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline',
                 gap:16, padding:'14px 0', borderBottom:'1px solid var(--ink-line)'}}>
      <span className="meta">{k}</span>
      <span style={{fontFamily:'var(--font-display)', fontWeight:500, fontSize:14, textAlign:'right'}}>{v}</span>
    </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">Limited edition · 25 signed prints</span>
            </div>
            <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                        fontSize:'clamp(36px,5vw,72px)', letterSpacing:'-0.025em', lineHeight:0.98}}>
              Blind Alley
            </h1>
            <p className="lead on-dark" style={{marginTop:24, maxWidth:480}}>
              The painting that hung at The Brewer's Art for thirty years, now available as a signed,
              numbered print — 18.5 × 27.5 in, edition of 25.
            </p>
            <div style={{marginTop:32, display:'flex', alignItems:'baseline', gap:14}}>
              <span style={{fontFamily:'var(--font-mono)', fontSize:24, color:'var(--veil)'}}>$250</span>
              <span className="meta on-dark">+ $20 shipping (US)</span>
            </div>
            <div style={{marginTop:28, display:'flex', flexDirection:'column', gap:14, maxWidth:320}}>
              <button
                className={"btn " + (inCart ? "btn-veil" : "btn-flare")}
                onClick={() => inCart ? null : onAddToCart(PRINT_PRODUCT)}
                disabled={inCart}
                style={{opacity: inCart ? 0.75 : 1}}
              >
                {inCart ? 'Added to cart ✓' : 'Add to cart →'}
              </button>
              <p className="meta on-dark">Secure checkout via Stripe · Shipped rolled in a tube</p>
            </div>
          </div>
          <Reveal>
            <div style={{overflow:'hidden', background:'#16232a'}}>
              <img src={PRINT_PRODUCT.img} alt="Blind Alley — framed print, hallway installation"
                   style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            </div>
            <div className="hero-cap" style={{marginTop:14}}>
              <span className="t" style={{color:'var(--veil)'}}>Framed and hung</span>
              <span className="meta on-dark">Shown framed &middot; frame not included</span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* story tie-in */}
      <section className="section band-veil">
        <div className="wrap" style={{maxWidth:760}}>
          <Reveal>
            <div style={{display:'flex', flexDirection:'column', gap:22}}>
              <p className="lead">
                Blind Alley hung at The Brewer's Art in Baltimore for nearly thirty years before the bar
                closed without warning in 2026. I got it back after a bankruptcy process I didn't expect
                to win.
              </p>
              <p className="body dim">
                This edition is the first time the painting has ever been available as a print — signed
                and numbered by hand, 25 in total, printed at the same size relationship as the original
                canvas. When they're gone, they're gone.
              </p>
              <button className="btn btn-ghost-ink" style={{alignSelf:'flex-start'}}
                      onClick={() => onNav('brewers-art')}>
                Read the full story →
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* gallery */}
      <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">The print, in hand</span>
          </div>
          <PhotoGrid items={gallery} />
        </div>
      </section>

      {/* details + purchase */}
      <section className="section band-veil" style={{'--sp':'72px', paddingBottom:96}}>
        <div className="wrap rg-2col" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64}}>
          <Reveal>
            <div className="kicker-row" style={{marginBottom:24}}>
              <span className="flare-dot"></span>
              <span className="eyebrow">Details</span>
            </div>
            <div>
              <Spec k="Title" v="Blind Alley" />
              <Spec k="Format" v="Archival pigment print" />
              <Spec k="Dimensions" v="18.5 × 27.5 in" />
              <Spec k="Edition" v="25, signed & numbered" />
              <Spec k="Price" v="$250" />
              <Spec k="Shipping" v="$20 (US, rolled in a tube)" />
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{overflow:'hidden', background:'#16232a', aspectRatio:'4/3'}}>
              <img src={BAImg('BlindAlley.png')} alt="Blind Alley — the original 1996 painting"
                   style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            </div>
            <div className="meta" style={{marginTop:10, opacity:0.75}}>The original, painted 1996</div>
          </Reveal>
        </div>
        <div className="wrap" style={{marginTop:56}}>
          <div style={{display:'flex', gap:20, flexWrap:'wrap'}}>
            <button
              className={"btn " + (inCart ? "btn-ink" : "btn-flare")}
              onClick={() => inCart ? null : onAddToCart(PRINT_PRODUCT)}
              disabled={inCart}
              style={{opacity: inCart ? 0.75 : 1}}
            >
              {inCart ? 'Added to cart ✓' : 'Add to cart — $250 →'}
            </button>
            <button className="btn btn-ghost-ink" onClick={() => onNav('brewers-art')}>
              Back to the story →
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { BlindAlleyPrint });