// ═══ GENESIS BUILD rbac-fase-a · 2026-07-10 ═══
// Tidal — Cabines: pequenos componentes visuais reutilizados no ShipPlan.

const Stat = ({n, l}) => (
  <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--accent)',borderRadius:14,padding:'10px 14px',minWidth:90,boxShadow:'var(--shadow-sm)'}}>
    <div style={{fontFamily:'var(--fs)',fontSize:20,fontWeight:500,lineHeight:1}}>{n}</div>
    <div className="t-eyebrow" style={{marginTop:3,fontSize:9}}>{l}</div>
  </div>
);

const CabinCell = ({cabin, usersById, hovered, onHover, onLeave}) => {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 820;
  const occs = cabin.berths.filter(b => b.user);
  const ratio = occs.length / cabin.berths.length;
  const hasFem = occs.some(b => usersById[b.user]?.genero === 'F');
  const fill = ratio === 1 ? '#7BB67E' : ratio > 0 ? '#E8B453' : 'transparent';
  const border = ratio === 0 ? '1px dashed rgba(245,239,227,0.3)' : `1px solid ${fill}`;
  const w = Math.max(isMobile ? 34 : 28, cabin.berths.length * (isMobile ? 16 : 14) + (isMobile ? 16 : 14));
  const h = isMobile ? 34 : 30;
  const fs = isMobile ? 10 : 9.5;

  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      style={{
        position:'relative',
        width: w, height: h,
        background: ratio>0 ? `linear-gradient(180deg, ${fill}cc, ${fill}99)` : 'transparent',
        border, borderRadius:5,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'var(--fm)', fontSize: fs, letterSpacing:0.4,
        color: ratio>0 ? '#1F2A2E' : 'rgba(245,239,227,0.5)',
        fontWeight: 500,
        transform: hovered ? 'translateY(-2px)' : 'none',
        boxShadow: hovered ? '0 6px 14px rgba(0,0,0,0.4)' : 'none',
        transition: 'all .15s', cursor:'help',
      }}>
      {cabin.num}
      {hasFem && <span style={{position:'absolute',top:-4,right:-4,width:10,height:10,borderRadius:'50%',background:'#C36474',border:'1.5px solid #1F2A2E'}}/>}
    </div>
  );
};

const LegendDot = ({c, l, ring}) => (
  <span style={{display:'inline-flex',alignItems:'center',gap:l?5:0,color:'rgba(245,239,227,0.7)'}}>
    <span style={{width:10,height:10,borderRadius:3,background:ring?'transparent':c,border:ring?`1px dashed ${c}`:'none'}}/>
    {l}
  </span>
);

Object.assign(window, { Stat, CabinCell, LegendDot });