// Gallery — curated mosaic, no category filter. 10 tiles.
function PSGallery() {
  const items = [
    { src: 'assets/g-leather-jacket.png', before: 'assets/g-leather-jacket-before.png', cat: 'Apparel', name: 'Leather · Jeans' },
    { src: 'assets/g-byredo-bath.png', before: 'assets/g-byredo-bath-before.png', cat: 'Fragrance', name: 'Bal d\u2019Afrique · Perfume' },
    { src: 'assets/g-summer-fridays.png', before: 'assets/g-summer-fridays-before.png', cat: 'Skincare', name: 'Serum · Skin' },
    { src: 'assets/g-gold-pendant.png', before: 'assets/g-gold-pendant-before.png', cat: 'Jewelry', name: 'Pendant · Necklace' },
    { src: 'assets/g-shelf-skincare.png', before: 'assets/g-shelf-skincare-before.png', cat: 'Skincare', name: 'Serum · Skin' },
    { src: 'assets/g-amber-bottle.png', before: 'assets/g-amber-bottle-before.png', cat: 'Skincare', name: 'Face Wash · Cleanser' },
    { src: 'assets/g-beverly-hills.png', before: 'assets/g-beverly-hills-before.png', cat: 'Apparel', name: 'Clothes · Top & Shorts' },
    { src: 'assets/g-cowgirl-guitar.jpg', before: 'assets/g-cowgirl-guitar-before.png', cat: 'Apparel', name: 'Pants · Shirt' },
    { src: 'assets/g-brown-set.jpg', before: 'assets/g-brown-set-before.png', cat: 'Apparel', name: 'Top · Pants' },
    { src: 'assets/g-laptop-walk.jpg', before: 'assets/g-laptop-walk-before.png', cat: 'Tech', name: 'Pants · Tops' },
    { src: 'assets/g-volvo-peace.png', before: 'assets/g-volvo-peace-before.png', cat: 'Footwear', name: 'Accessories · Shoes' },
    { src: 'assets/g-bomber-back.png', before: 'assets/g-bomber-back-before.png', cat: 'Apparel', name: 'Jacket · Jeans' },
  ];

  // Preload before-images so hover crossfade is instant
  React.useEffect(() => {
    items.forEach(it => { if (it.before) { const i = new Image(); i.src = it.before; } });
  }, []);

  return (
    <section id="examples" className="ps-section" data-mobile-pad="true" data-mobile-y="lg" style={{ background: 'var(--cream)', padding: '128px 48px' }}>
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto 64px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
            Examples
          </div>
          <h2 className="celestial" style={{ fontSize: 'clamp(48px,6vw,96px)', color: 'var(--cocoa)', margin: 0 }}>
            Real scenes,<br/>placed products.
          </h2>
        </div>
        <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 460, margin: 0, justifySelf: 'end' }}>
          Across skincare, jewelry, clothing, homeware. Pick a backdrop from our library of <span style={{ color: 'var(--cocoa)' }}>10,000+</span> Vault Stock photographs, or upload your own. The product is yours, dropped in.
        </p>
      </div>

      <div className="ps-stack-mobile-2" style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 12,
      }}>
        {items.map((it, i) => (
          <GalleryTile key={i} item={it} />
        ))}
      </div>

      {/* See-more link to the dedicated Examples page */}
      <div style={{
        maxWidth: 1320, margin: '64px auto 0',
        display: 'flex', justifyContent: 'center',
      }}>
        <a href="Examples.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: '"La Villa", sans-serif',
          fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--cocoa)', textDecoration: 'none',
          padding: '18px 32px',
          border: '1px solid var(--cocoa)',
          borderRadius: 999, fontWeight: 500,
          transition: 'background 220ms var(--pe), color 220ms',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--cocoa)'; e.currentTarget.style.color = 'var(--cream)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--cocoa)'; }}>
          See full examples library
          <span aria-hidden="true" style={{ letterSpacing: 0 }}>→</span>
        </a>
      </div>
    </section>
  );
}

function GalleryTile({ item }) {
  const [h, setH] = React.useState(false);
  const hasBefore = !!item.before;
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        position: 'relative', overflow: 'hidden', cursor: 'pointer',
        background: 'var(--cream-deep)',
        aspectRatio: '2 / 3',
      }}>
      {/* AFTER (default) */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${item.src})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        transform: h && !hasBefore ? 'scale(1.03)' : 'scale(1)',
        opacity: h && hasBefore ? 0 : 1,
        transition: 'transform 600ms cubic-bezier(.22,.61,.36,1), opacity 420ms ease',
      }} />
      {/* BEFORE, only if provided, fades in on hover */}
      {hasBefore && (
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${item.before})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: h ? 1 : 0,
          transition: 'opacity 420ms ease',
        }} />
      )}
      {/* Vignette for legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(0deg, rgba(42,36,32,0.55) 0%, rgba(42,36,32,0) 50%)',
        opacity: h ? 1 : 0.7,
        transition: 'opacity 300ms',
      }} />
      {/* Before / After tag, top-left, only when item has a before */}
      {hasBefore && (
        <div style={{
          position: 'absolute', top: 12, left: 12,
          padding: '5px 9px',
          background: 'rgba(28,23,21,0.55)',
          backdropFilter: 'blur(4px)',
          color: 'var(--cream)',
          fontFamily: '"La Villa", sans-serif',
          fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 500,
          transition: 'background 240ms',
        }}>
          {h ? 'Before' : 'After'}
        </div>
      )}
      <div style={{
        position: 'absolute', left: 14, bottom: 14, right: 14,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        color: 'var(--cream)',
      }}>
        <div>
          <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.85, marginBottom: 4 }}>{item.cat}</div>
          <div style={{ fontFamily: '"La Villa", sans-serif', fontStyle: 'normal', fontSize: 16 }}>{item.name}</div>
        </div>
        <div style={{
          width: 30, height: 30, borderRadius: 999,
          background: h ? 'var(--cream)' : 'rgba(242,236,228,0.18)',
          color: h ? 'var(--cocoa)' : 'var(--cream)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: '"La Villa", sans-serif', fontSize: 14,
          transition: 'all 240ms',
        }}>↗</div>
      </div>
    </div>
  );
}

Object.assign(window, { PSGallery });