function StatRow({ k, v }) {
  return v ? (
    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, padding:'14px 0', borderBottom:'1px solid var(--ink)'}}>
      <span className="ts-label" style={{color:'var(--ink-3)', flex:'none', lineHeight:1}}>{k}</span>
      <span className="ts-stat" style={{whiteSpace:'nowrap', textAlign:'right', lineHeight:1}}>{v}</span>
    </div>
  ) : null;
}

function ModelLightbox({ urls, startIndex, onClose }) {
  const [idx, setIdx] = React.useState(startIndex);
  const total = urls.length;
  const prev = () => setIdx(i => (i - 1 + total) % total);
  const next = () => setIdx(i => (i + 1) % total);

  React.useEffect(() => {
    const onKey = e => {
      if (e.key === 'Escape')     onClose();
      if (e.key === 'ArrowLeft')  prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const btnStyle = {
    position:'absolute', top:'50%', transform:'translateY(-50%)',
    background:'none', border:0, color:'#fff', fontSize:28,
    cursor:'pointer', padding:'12px 18px', lineHeight:1, opacity:0.75,
  };

  return (
    <div className="lightbox" onClick={onClose} style={{position:'fixed',inset:0,zIndex:100,background:'rgba(11,11,11,0.92)',display:'flex',alignItems:'center',justifyContent:'center',padding:'40px 60px',animation:'lbIn var(--dur) var(--ease) both'}}>
      <button className="close" onClick={onClose} style={{position:'absolute',top:24,right:28,color:'#fff',fontSize:13,letterSpacing:'0.14em',textTransform:'uppercase',cursor:'pointer',background:'none',border:0}}>
        Close &#215;
      </button>

      {total > 1 && (
        <button style={{...btnStyle, left:8}} onClick={e=>{ e.stopPropagation(); prev(); }}>&#8592;</button>
      )}

      <div className="crop" style={{height:'min(80vh,720px)',aspectRatio:'3/4',background:'none'}} onClick={e=>e.stopPropagation()}>
        <img src={urls[idx]} style={{width:'100%',height:'100%',objectFit:'contain'}} alt="" />
      </div>

      {total > 1 && (
        <button style={{...btnStyle, right:8}} onClick={e=>{ e.stopPropagation(); next(); }}>&#8594;</button>
      )}

      {total > 1 && (
        <div style={{position:'absolute',bottom:24,left:'50%',transform:'translateX(-50%)',display:'flex',gap:8}}>
          {urls.map((_,i) => (
            <span key={i} onClick={e=>{ e.stopPropagation(); setIdx(i); }} style={{
              width:6, height:6, borderRadius:'50%', cursor:'pointer',
              background: i===idx ? '#fff' : 'rgba(255,255,255,0.35)',
              display:'inline-block', transition:'background 200ms',
            }} />
          ))}
        </div>
      )}
    </div>
  );
}

function ModelDetail({ m, go }) {
  const isWomen = m.cat !== 'Men';
  const photos = m.photoUrls && m.photoUrls.length > 0 ? m.photoUrls : null;
  const slots = photos
    ? photos
    : [m.shade, '#E9E9E6', '#EFEFED', '#E4E4E1', '#ECECEA'];

  const [lightboxIdx, setLightboxIdx] = React.useState(null);

  const aside = (
    <aside style={{position:'sticky', top:88}}>
      <h1 style={{
        fontFamily:'var(--font-sans)', fontWeight:500, margin:0,
        fontSize:'clamp(2rem,3.4vw,3rem)', lineHeight:1, letterSpacing:'-0.03em'
      }}>{m.name}</h1>
      <p className="ts-eyebrow" style={{marginTop:10, marginBottom:18}}>{m.cat}{m.isNew ? ' · New Face' : ''}</p>

      <div style={{borderTop:'1px solid var(--ink)'}}>
        <StatRow k="Height" v={m.height} />
        <StatRow k={isWomen ? 'Bust' : 'Chest'} v={m.bust} />
        <StatRow k="Waist" v={m.waist} />
        <StatRow k="Hips" v={m.hips} />
        <StatRow k="Shoes" v={m.shoes} />
        <StatRow k="Hair" v={m.hair} />
        <StatRow k="Eyes" v={m.eyes} />
      </div>

      <a href="mailto:booking@theotherside.agency" style={{
        display:'inline-flex', alignItems:'center', justifyContent:'center', marginTop:28,
        border:'1.5px solid var(--ink)', background:'var(--ink)', color:'#fff',
        padding:'13px 24px', lineHeight:1
      }}>
        <span className="ts-label" style={{color:'#fff'}}>Book / Enquire</span>
      </a>
    </aside>
  );

  return (
    <div className="fade-in shell" style={{paddingTop:28, paddingBottom:96}}>
      <button onClick={()=>go('board')} style={{
        border:0, background:'transparent', cursor:'pointer', padding:0, marginBottom:28,
        display:'inline-flex', alignItems:'center', gap:8, color:'var(--ink)'
      }}>
        <span style={{fontSize:15}}>&#8592;</span>
        <span className="ts-label">Board</span>
      </button>

      {/* Mobile: info first, then photos */}
      <div className="model-detail-mobile-info">{aside}</div>

      <div className="model-detail-grid" style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) 300px', gap:'clamp(28px,4vw,72px)'}}>
        <div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(10px,1.4vw,20px)'}}>
            {slots.map((s, i) => (
              <div key={i} onClick={()=>photos && setLightboxIdx(i)} style={{cursor: photos ? 'zoom-in' : 'default'}}>
                <Portrait shade={photos ? '#C8C8C8' : s} photoUrl={photos ? s : null} idx={i+1} />
              </div>
            ))}
          </div>
        </div>

        <div className="model-detail-desktop-info">{aside}</div>
      </div>

      {lightboxIdx !== null && photos && (
        <ModelLightbox urls={photos} startIndex={lightboxIdx} onClose={()=>setLightboxIdx(null)} />
      )}
    </div>
  );
}
window.ModelDetail = ModelDetail;