// Prints v3 — compact. One image + mockup. Minimal text.
function PrintsV3() {
  return (
    <section id="prints" data-screen-label="04 Prints" style={{
      position: 'relative',
      background: 'transparent',
      padding: '80px 40px 80px',
      overflow: 'hidden',
    }}>
      <div className="reveal" style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginBottom: 48, flexWrap: 'wrap' }}>
          <div className="mono-meta" style={{ color: 'var(--vermilion)' }}>⎯ prints</div>
          <h2 style={{
            fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
            fontSize: 'clamp(40px, 5.5vw, 80px)', lineHeight: .95, letterSpacing: '-.04em',
          }}>
            <span data-parallax="0.1" style={{ position: 'relative', display: 'inline-block' }}>
              take one{' '}
              <span style={{ display: 'inline-block', filter: 'blur(3px)', opacity: 0.58, color: 'var(--ash)' }}>home</span>
            </span>
          </h2>
        </div>
      </div>

      <div className="reveal prints-grid" style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
        alignItems: 'stretch',
      }}>
        {/* Left: framed mockup */}
        <div style={{
          position: 'relative', aspectRatio: '4/5',
          borderRadius: 4, overflow: 'hidden',
          background: 'linear-gradient(135deg, #d8c8b0 0%, #c4b298 100%)',
          boxShadow: '0 24px 60px rgba(40,30,15,.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            position: 'absolute', top: 0, right: 0, bottom: 0, width: '60%',
            background: 'radial-gradient(ellipse at 80% 50%, rgba(255,240,210,.6), transparent 70%)',
          }}></div>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: '22%',
            background: 'linear-gradient(180deg, transparent, rgba(60,40,20,.18))',
          }}></div>
          <div style={{
            position: 'relative', width: '52%', aspectRatio: '4/5', padding: 14,
            background: '#f5efe3',
            boxShadow: '0 30px 60px rgba(60,40,20,.32), 0 8px 16px rgba(60,40,20,.22), inset 0 0 0 1px rgba(180,150,110,.4)',
            transform: 'rotate(-1deg)',
          }}>
            <img src="commission/succubus.png" alt="print mockup" style={{
              width: '100%', height: '100%', objectFit: 'cover',
            }} />
            <div style={{
              position: 'absolute', bottom: -2, left: 14, right: 14,
              padding: '6px 0', textAlign: 'center',
              fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '.25em',
              textTransform: 'uppercase', color: 'rgba(60,40,20,.6)',
            }}>petra voice — succubus</div>
          </div>
          <div style={{
            position: 'absolute', bottom: 0, left: '6%', width: 60, height: 120,
            background: 'radial-gradient(ellipse at 50% 100%, rgba(40,55,40,.4), transparent 70%)',
            filter: 'blur(8px)',
          }}></div>
        </div>

        {/* Right: artwork */}
        <div style={{
          position: 'relative', aspectRatio: '4/5',
          borderRadius: 4, overflow: 'hidden',
          boxShadow: '0 24px 60px rgba(40,30,15,.18)',
        }}>
          <img src="commission/mockup.png" alt="succubus" style={{
            width: '100%', height: '100%', objectFit: 'cover',
          }} />
          <div style={{
            position: 'absolute', top: 14, left: 14,
            padding: '5px 9px', borderRadius: 3,
            background: 'rgba(247,240,226,.3)',
            backdropFilter: 'blur(12px)',
            WebkitBackdropFilter: 'blur(12px)',
            border: '1px solid rgba(255,250,235,.28)',
            fontFamily: 'var(--mono)', fontSize: 8, letterSpacing: '.18em',
            textTransform: 'uppercase', color: 'var(--paper)', fontWeight: 500,
          }}>digital printing edition</div>
        </div>
      </div>

      <div className="reveal delay-2" style={{
        maxWidth: 1200, margin: '36px auto 0',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 32, flexWrap: 'wrap',
      }}>
        <p style={{
          fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
          fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)',
        }}>
          high-quality prints on canvas with worldwide shipping. email me to request specific artwork.
        </p>
        <a href="https://petravoice.darkroom.com/" target="_blank" data-hover style={{
          padding: '14px 28px', borderRadius: 999,
          background: 'var(--ink)', color: 'var(--paper)',
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.25em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 10, fontWeight: 500, flexShrink: 0,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--vermilion)' }}></span>
          shop prints ↗
        </a>
      </div>
    </section>
  );
}

window.PrintsV3 = PrintsV3;