// Matriz de ingeniería de menú — los cuatro cuadrantes del sistema
const QUADRANTS = [
  { k: 'estrella', label: 'Estrella', color: 'var(--good)', bg: '#F1F8F3', desc: 'Se vende y deja. No tocar el precio ni la receta; darle el mejor lugar en la carta.' },
  { k: 'caballo', label: 'Caballo', color: '#A8873E', bg: '#FBF7EA', desc: 'Se vende mucho pero deja poco. Subir el precio de a poco, o bajarle el costo sin que se note.' },
  { k: 'rompecabezas', label: 'Rompecabezas', color: '#3B6FA8', bg: '#EFF4FA', desc: 'Deja bien pero no sale. Es un problema de venta: nombre, ubicación en la carta, o que el mozo lo ofrezca.' },
  { k: 'perro', label: 'Perro', color: 'var(--bad)', bg: '#FCF0EE', desc: 'Ni se vende ni deja. Candidato a salir de la carta, salvo que esté por otra razón.' },
];

// x = contribución por cubierto, y = participación
const MATRIX_ITEMS = [
  { n: 1, name: 'Menu Pescados (Noche)', q: 'estrella', x: 0.72, y: 0.86, cub: 55, ccub: 30053 },
  { n: 2, name: 'Menú pasta (Noche)', q: 'caballo', x: 0.34, y: 0.66, cub: 30, ccub: 27205 },
  { n: 3, name: 'Menu parrillada 2 (Noche)', q: 'caballo', x: 0.42, y: 0.57, cub: 24, ccub: 27440 },
  { n: 4, name: 'Menú Mediterráneo (Noche)', q: 'estrella', x: 0.70, y: 0.56, cub: 23, ccub: 30019 },
  { n: 5, name: 'Menu Parrilla (Medio dia)', q: 'perro', x: 0.20, y: 0.24, cub: 18, ccub: 21286 },
];
const QCOLOR = { estrella: 'var(--good)', caballo: '#A8873E', rompecabezas: '#3B6FA8', perro: 'var(--bad)' };

const MenuMatrix = ({ compact }) => {
  const H = compact ? 168 : 210;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 150px', gap: 12, alignItems: 'stretch' }}>
        {/* Matriz */}
        <div style={{ position: 'relative', height: H, border: '1px solid var(--line)', borderRadius: 8, overflow: 'hidden', background: 'var(--bg-card)' }}>
          <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' }}>
            <Cell label="CABALLO" color="#A8873E" bg="#FBF7EA" align="left"/>
            <Cell label="ESTRELLA" color="var(--good)" bg="#F1F8F3" align="right"/>
            <Cell label="PERRO" color="var(--bad)" bg="#FCF0EE" align="left" bottom/>
            <Cell label="ROMPECABEZAS" color="#3B6FA8" bg="#EFF4FA" align="right" bottom/>
          </div>
          {MATRIX_ITEMS.map(it => (
            <div key={it.n} style={{
              position: 'absolute',
              left: `calc(${(it.x * 100).toFixed(1)}% - 8px)`,
              top: `calc(${((1 - it.y) * 100).toFixed(1)}% - 8px)`,
              width: 16, height: 16, borderRadius: '50%',
              background: QCOLOR[it.q], color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--mono)', fontSize: 9, fontWeight: 600,
              boxShadow: '0 1px 4px rgba(0,0,0,.18)',
            }}>{it.n}</div>
          ))}
          <div style={{
            position: 'absolute', left: 4, top: '50%', transform: 'translateY(-50%) rotate(180deg)',
            writingMode: 'vertical-rl', fontFamily: 'var(--mono)', fontSize: 7.5,
            letterSpacing: '.1em', color: 'var(--ink-muted)',
          }}>PARTICIPACIÓN →</div>
        </div>

        {/* Ranking */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {MATRIX_ITEMS.map(it => (
            <div key={it.n} style={{ display: 'flex', gap: 6, alignItems: 'flex-start' }}>
              <span style={{
                width: 13, height: 13, borderRadius: '50%', flexShrink: 0, marginTop: 1,
                background: QCOLOR[it.q], color: '#fff', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 7.5, fontWeight: 600,
              }}>{it.n}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 9.5, lineHeight: 1.25, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 8, color: QCOLOR[it.q] }}>
                  {it.cub} cub · ${(it.ccub / 1000).toFixed(1)}k/cub
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ fontFamily: 'var(--mono)', fontSize: 8, color: 'var(--ink-muted)', textAlign: 'center' }}>
        CONTRIBUCIÓN POR CUBIERTO →
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
        {QUADRANTS.map(q => (
          <div key={q.k} style={{ padding: '7px 8px', background: q.bg, border: '1px solid ' + q.color + '33', borderRadius: 6 }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: q.color, marginBottom: 2 }}>{q.label}</div>
            <div style={{ fontSize: 8, color: 'var(--ink-soft)', lineHeight: 1.35 }}>{q.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Cell = ({ label, color, bg, align, bottom }) => (
  <div style={{
    background: bg, position: 'relative',
    borderRight: align === 'left' ? '1px dashed var(--line-strong)' : 'none',
    borderBottom: bottom ? 'none' : '1px dashed var(--line-strong)',
  }}>
    <span style={{
      position: 'absolute', top: bottom ? 'auto' : 5, bottom: bottom ? 5 : 'auto',
      left: align === 'left' ? 6 : 'auto', right: align === 'right' ? 6 : 'auto',
      fontFamily: 'var(--mono)', fontSize: 7.5, letterSpacing: '.1em', color,
    }}>{label}</span>
  </div>
);

Object.assign(window, { MenuMatrix, QUADRANTS });