function BoardIndex({ models, onOpen }) {
  const [active, setActive] = React.useState(null);
  const [mouseY, setMouseY] = React.useState(0);
  const containerRef = React.useRef(null);
  const fine = typeof window !== 'undefined' && window.matchMedia &&
    window.matchMedia('(pointer:fine)').matches;

  const handleMouseMove = (e) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    setMouseY(e.clientY - rect.top);
  };

  return (
    <section ref={containerRef} className="shell" style={{paddingTop:18, paddingBottom:96, position:'relative'}}>
      <ul
        onMouseLeave={()=>setActive(null)}
        onMouseMove={handleMouseMove}
        style={{listStyle:'none', margin:0, padding:0, borderTop:'1px solid var(--line)'}}>
        {models.map((m, i) => {
          const dim = active != null && active !== i;
          return (
            <li key={m.slug || m._id}>
              <a
                role="link" tabIndex={0}
                onClick={()=>onOpen(m)}
                onKeyDown={e=>{ if (e.key==='Enter' || e.key===' ') { e.preventDefault(); onOpen(m); } }}
                onMouseEnter={()=>setActive(i)}
                onFocus={()=>setActive(i)}
                style={{
                  display:'flex', alignItems:'center', gap:20,
                  padding:'clamp(12px,1.6vw,22px) 0',
                  borderBottom:'1px solid var(--line)', cursor:'pointer',
                  opacity: dim ? 0.32 : 1,
                  transition:'opacity var(--dur) var(--ease)'
                }}>
                <span className="ts-stat" style={{width:34, flex:'none', color:'var(--ink-4)'}}>
                  {String(i+1).padStart(2,'0')}
                </span>
                <span style={{
                  flex:1, fontFamily:'var(--font-sans)', fontWeight:500,
                  fontSize:'clamp(1.75rem,5vw,3.75rem)', lineHeight:1,
                  letterSpacing:'-0.03em',
                  transform: active===i ? 'translateX(10px)' : 'none',
                  transition:'transform var(--dur) var(--ease)'
                }}>{m.name}</span>
                {m.isNew && <span className="ts-eyebrow" style={{flex:'none', color:'var(--ink-3)', whiteSpace:'nowrap'}}>New</span>}
                <span className="ts-stat" style={{flex:'none', color:'var(--ink-3)', width:48, textAlign:'right'}}>{m.height}</span>
              </a>
            </li>
          );
        })}
      </ul>

      {fine && active != null && models[active] && (
        <div aria-hidden="true" style={{
          position:'absolute', top: mouseY - 80, right:0,
          width:'clamp(180px, 18vw, 260px)', aspectRatio:'3 / 4',
          pointerEvents:'none', zIndex:10,
          boxShadow:'0 30px 70px -34px rgba(11,11,11,0.45)',
          overflow:'hidden',
          transition:'top 0.12s ease'
        }}>
          <div style={{position:'absolute', inset:0, background: models[active].shade}}>
            {models[active].coverUrl && (
              <img src={models[active].coverUrl} alt={models[active].name} style={{
                width:'100%', height:'100%', objectFit:'cover', objectPosition:'top center',
                display:'block'
              }} />
            )}
            <span style={{
              position:'absolute', left:10, bottom:10,
              fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase',
              color: models[active].coverUrl ? '#fff' : 'var(--ink-4)'
            }}>{models[active].cat}</span>
          </div>
        </div>
      )}
    </section>
  );
}
window.BoardIndex = BoardIndex;