// src/placa-art.jsx — recreation of the "Avaliação de Parceiros" sign artwork
// Drawn as scaled HTML/CSS so it can serve as the front face of the 3D viewer.

const COLUMNS = [
  'Empresa', 'Qualidade', 'Prazo', 'Atendimento',
  'Segurança', 'Organização e Limpeza', 'Documentos', 'Alojamento'
];

function PlacaArt({ size = 320, rows = 18, interactive = false }) {
  // canvas is 1000 wide × 875 tall (160:140 ratio)
  const W = 1000, H = 875;
  const scale = size / W;

  const tableLeft = 60;
  const tableRight = W - 60;
  const tableTop = 180;
  const tableBottom = H - 60;
  const tableW = tableRight - tableLeft;
  const headerH = 60;
  const rowH = (tableBottom - tableTop - headerH) / rows;
  const colW = tableW / COLUMNS.length;

  return (
    <div style={{
      width: size,
      height: size * (H/W),
      background: '#ffffff',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: 'var(--font-sans)',
      color: '#0a0a0a',
      boxShadow: '0 0 0 1px rgba(0,0,0,0.06)',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        width: W, height: H,
      }}>
        {/* Mês/Ano box */}
        <div style={{ position: 'absolute', top: 70, left: 60 }}>
          <div style={{ fontSize: 22, color: '#0a0a0a', marginBottom: 8, fontWeight: 500 }}>Mês/Ano</div>
          <div style={{
            width: 220, height: 60,
            border: '2px solid #0a0a0a',
            background: '#F4F4F4',
          }} />
        </div>

        {/* Title */}
        <div style={{
          position: 'absolute',
          top: 70, left: 0, right: 0,
          textAlign: 'center',
          fontSize: 56,
          fontWeight: 700,
          letterSpacing: '-0.01em',
        }}>
          Avaliação de parceiros
        </div>

        {/* Brand corner mark */}
        <div style={{
          position: 'absolute',
          top: 60, right: 60,
          width: 70, height: 70,
          background: 'var(--prestes-green)',
          clipPath: 'path("M 0,0 L 60,0 A 35,35 0 0 1 60,70 L 35,70 L 35,55 L 20,55 L 35,40 L 35,0 Z")',
        }} />

        {/* Table header */}
        <div style={{
          position: 'absolute',
          top: tableTop, left: tableLeft,
          width: tableW, height: headerH,
          background: 'var(--prestes-green)',
          display: 'grid',
          gridTemplateColumns: `repeat(${COLUMNS.length}, 1fr)`,
        }}>
          {COLUMNS.map((c, i) => (
            <div key={c} style={{
              borderRight: i < COLUMNS.length - 1 ? '2px solid #fff' : 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '0 6px',
              textAlign: 'center',
              fontSize: c.length > 12 ? 13 : 15,
              fontWeight: 600,
              color: '#0a0a0a',
              lineHeight: 1.05,
              textTransform: 'uppercase',
              letterSpacing: '0.02em',
            }}>{c}</div>
          ))}
        </div>

        {/* Table body */}
        <div style={{
          position: 'absolute',
          top: tableTop + headerH, left: tableLeft,
          width: tableW, height: tableBottom - tableTop - headerH,
        }}>
          {Array.from({ length: rows }).map((_, r) => (
            <div key={r} style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${COLUMNS.length}, 1fr)`,
              gap: 6,
              padding: '4px 6px',
              height: rowH,
            }}>
              {COLUMNS.map((_, c) => (
                <div key={c} style={{
                  background: '#E6E6E6',
                  borderRadius: 1,
                }} />
              ))}
            </div>
          ))}
        </div>

        {/* Outer border */}
        <div style={{
          position: 'absolute',
          inset: 24,
          border: '2px solid #0a0a0a',
          pointerEvents: 'none',
        }}/>
      </div>
    </div>
  );
}

window.PlacaArt = PlacaArt;