// Product Detail — Gallery Variations + Nav

const { useState, useEffect, useRef } = React;

// ─── NAV (breadcrumb) ───
function PDPNav() {
  return React.createElement('nav', { style: { position:'sticky', top:0, zIndex:100, background:'var(--cream)', borderBottom:'1px solid var(--border)', padding:'0 clamp(16px, 4vw, 48px)' }},
    React.createElement('div', { style: { maxWidth:1200, margin:'0 auto', display:'flex', justifyContent:'space-between', alignItems:'center', height:64 }},
      React.createElement('div', { style: { display:'flex', alignItems:'center', gap:24 }},
        React.createElement('a', { href:'Marketplace Search v3.html', style: { fontFamily:'var(--font-display)', fontSize:28, fontWeight:600, color:'var(--forest)', letterSpacing:'-0.01em', textDecoration:'none' }}, 'Perch'),
        React.createElement('div', { style: { display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--stone)' }},
          React.createElement('a', { href:'Marketplace Search v3.html', style: { color:'var(--ember)', textDecoration:'none' }}, 'Browse Homes'),
          React.createElement('span', null, '/'),
          React.createElement('span', { style: { color:'var(--forest)' }}, PRODUCT.name)
        )
      ),
      React.createElement('div', { style: { display:'flex', gap:12, alignItems:'center' }},
        React.createElement('button', { style: { display:'flex', alignItems:'center', gap:6, padding:'8px 16px', fontSize:13, background:'none', border:'1px solid var(--border-strong)', borderRadius:6, cursor:'pointer', color:'var(--slate)', fontFamily:'var(--font-body)' }},
          React.createElement(PDPIcon, { name:'share', size:16 }), 'Share'
        ),
        React.createElement('button', { style: { display:'flex', alignItems:'center', gap:6, padding:'8px 16px', fontSize:13, background:'none', border:'1px solid var(--border-strong)', borderRadius:6, cursor:'pointer', color:'var(--slate)', fontFamily:'var(--font-body)' }},
          React.createElement(PDPIcon, { name:'favorite_border', size:16 }), 'Save'
        ),
      )
    )
  );
}

// ─── GALLERY: Hero + Thumbnails ───
function GalleryHeroThumbs() {
  const [active, setActive] = useState(0);
  const imgs = PRODUCT.images;

  return React.createElement('div', { style: { display:'flex', gap:12, height:480 }},
    // Thumbnail strip
    React.createElement('div', { style: { display:'flex', flexDirection:'column', gap:8, width:80, flexShrink:0 }},
      imgs.map((label, i) =>
        React.createElement('div', { key:i, onClick:()=>setActive(i), style: { flex:1, borderRadius:6, overflow:'hidden', cursor:'pointer', border: active===i ? '2px solid var(--ember)' : '2px solid transparent', opacity: active===i ? 1 : 0.7, transition:'all 0.2s' }},
          React.createElement(PlaceholderImg, { index:i, label })
        )
      )
    ),
    // Main image
    React.createElement('div', { style: { flex:1, borderRadius:6, overflow:'hidden', position:'relative' }},
      React.createElement(PlaceholderImg, { index:active, label:imgs[active] }),
      React.createElement('div', { style: { position:'absolute', bottom:12, right:12, background:'rgba(28,43,30,0.75)', color:'white', fontSize:11, fontFamily:'var(--font-mono)', padding:'4px 12px', borderRadius:6 }}, (active+1) + ' / ' + imgs.length),
      // Nav arrows
      React.createElement('button', { onClick:()=>setActive((active-1+imgs.length)%imgs.length), style: { position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', width:40, height:40, borderRadius:'50%', background:'rgba(255,255,255,0.85)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }},
        React.createElement(PDPIcon, { name:'chevron_left', size:22 })
      ),
      React.createElement('button', { onClick:()=>setActive((active+1)%imgs.length), style: { position:'absolute', right:12, top:'50%', transform:'translateY(-50%)', width:40, height:40, borderRadius:'50%', background:'rgba(255,255,255,0.85)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }},
        React.createElement(PDPIcon, { name:'chevron_right', size:22 })
      ),
    )
  );
}

// ─── GALLERY: Airbnb Grid ───
function GalleryGrid() {
  const imgs = PRODUCT.images;
  return React.createElement('div', { style: { display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr', gap:6, height:480, borderRadius:8, overflow:'hidden' }},
    React.createElement('div', { style: { gridRow:'1/3', position:'relative', cursor:'pointer' }},
      React.createElement(PlaceholderImg, { index:0, label:imgs[0] }),
    ),
    React.createElement('div', { style: { cursor:'pointer' }}, React.createElement(PlaceholderImg, { index:1, label:imgs[1] })),
    React.createElement('div', { style: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:6 }},
      React.createElement('div', { style: { cursor:'pointer' }}, React.createElement(PlaceholderImg, { index:2, label:imgs[2] })),
      React.createElement('div', { style: { cursor:'pointer', position:'relative' }},
        React.createElement(PlaceholderImg, { index:3, label:imgs[3] }),
        React.createElement('button', { style: { position:'absolute', bottom:10, right:10, background:'rgba(255,255,255,0.9)', border:'1px solid var(--border-strong)', borderRadius:6, padding:'6px 14px', fontSize:12, fontFamily:'var(--font-mono)', cursor:'pointer', color:'var(--forest)', fontWeight:500 }}, 'All ' + imgs.length + ' photos')
      ),
    ),
  );
}

// ─── GALLERY: Full-width Carousel ───
function GalleryCarousel() {
  const [active, setActive] = useState(0);
  const imgs = PRODUCT.images;

  return React.createElement('div', { style: { position:'relative', height:500, borderRadius:8, overflow:'hidden' }},
    React.createElement(PlaceholderImg, { index:active, label:imgs[active] }),
    // Arrows
    React.createElement('button', { onClick:()=>setActive((active-1+imgs.length)%imgs.length), style: { position:'absolute', left:16, top:'50%', transform:'translateY(-50%)', width:48, height:48, borderRadius:'50%', background:'rgba(255,255,255,0.9)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 2px 8px rgba(0,0,0,0.1)' }},
      React.createElement(PDPIcon, { name:'chevron_left', size:24 })
    ),
    React.createElement('button', { onClick:()=>setActive((active+1)%imgs.length), style: { position:'absolute', right:16, top:'50%', transform:'translateY(-50%)', width:48, height:48, borderRadius:'50%', background:'rgba(255,255,255,0.9)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 2px 8px rgba(0,0,0,0.1)' }},
      React.createElement(PDPIcon, { name:'chevron_right', size:24 })
    ),
    // Dots
    React.createElement('div', { style: { position:'absolute', bottom:16, left:'50%', transform:'translateX(-50%)', display:'flex', gap:6 }},
      imgs.map((_, i) => React.createElement('button', { key:i, onClick:()=>setActive(i), style: { width: active===i?24:8, height:8, borderRadius:6, background: active===i?'white':'rgba(255,255,255,0.5)', border:'none', cursor:'pointer', transition:'all 0.2s' }}))
    ),
    // Counter
    React.createElement('div', { style: { position:'absolute', top:16, right:16, background:'rgba(28,43,30,0.75)', color:'white', fontSize:12, fontFamily:'var(--font-mono)', padding:'6px 14px', borderRadius:6 }}, (active+1) + ' / ' + imgs.length),
  );
}

Object.assign(window, { PDPNav, GalleryHeroThumbs, GalleryGrid, GalleryCarousel });