'use client';

export default function DSC() {
  return (
    <svg viewBox="0 0 1600 1000">

      {/* CONTORNO EXTERIOR */}
      <rect
        x="20"
        y="20"
        width="1560"
        height="960"
        fill="none"
        stroke="black"
        strokeWidth="4"
      />

      {/* ===== BLOQUE SUPERIOR IZQUIERDO (AULAS Y SALAS) ===== */}

      <rect x="40" y="40" width="400" height="180"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="240" y="30" textAnchor="middle" fontSize="18" fontWeight="bold">
        AULA 5
      </text>

      <rect x="40" y="220" width="400" height="150"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="240" y="210" textAnchor="middle" fontSize="16">
        SALA USOS MÚLTIPLES
      </text>

      <rect x="40" y="370" width="400" height="150"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="240" y="360" textAnchor="middle" fontSize="16">
        SALA DE ENTRENAMIENTO
      </text>

      {/* ===== BLOQUE CENTRAL WINDOWS ===== */}

      <rect x="460" y="40" width="700" height="450"
        fill="none" stroke="black" strokeWidth="3" />
      <text x="810" y="30" textAnchor="middle" fontSize="22" fontWeight="bold">
        ÁREA WINDOWS
      </text>

      {/* División interna Windows */}
      <line x1="460" y1="260" x2="1160" y2="260"
        stroke="black" strokeWidth="2" />

      {/* ===== BLOQUE DERECHO MAC ===== */}

      <rect x="1200" y="40" width="350" height="300"
        fill="none" stroke="black" strokeWidth="3" />
      <text x="1375" y="30" textAnchor="middle" fontSize="22" fontWeight="bold">
        ÁREA MAC
      </text>

      {/* ===== ROBÓTICA ===== */}

      <rect x="1200" y="360" width="350" height="200"
        fill="none" stroke="black" strokeWidth="3" />
      <text x="1375" y="350" textAnchor="middle" fontSize="18" fontWeight="bold">
        ROBÓTICA
      </text>

      {/* ===== ADMINISTRACIÓN Y OFICINAS ===== */}

      <rect x="460" y="520" width="300" height="150"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="610" y="510" textAnchor="middle" fontSize="16">
        ADMINISTRACIÓN
      </text>

      <rect x="780" y="520" width="200" height="150"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="880" y="510" textAnchor="middle" fontSize="16">
        ASIGNACIÓN
      </text>

      <rect x="1000" y="520" width="200" height="150"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="1100" y="510" textAnchor="middle" fontSize="16">
        IMPRESIÓN
      </text>

      {/* ===== CUBÍCULOS ===== */}

      {Array.from({ length: 8 }).map((_, i) => (
        <rect
          key={i}
          x={460 + i * 90}
          y={700}
          width="80"
          height="120"
          fill="none"
          stroke="black"
          strokeWidth="2"
        />
      ))}

      <text x="460" y="690" fontSize="14">
        CUBÍCULOS 1–8
      </text>

      {/* ===== SANITARIOS ===== */}

      <rect x="40" y="600" width="200" height="200"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="140" y="590" textAnchor="middle" fontSize="16">
        SANITARIO HOMBRES
      </text>

      <rect x="260" y="600" width="200" height="200"
        fill="none" stroke="black" strokeWidth="2" />
      <text x="360" y="590" textAnchor="middle" fontSize="16">
        SANITARIO MUJERES
      </text>

      {/* ===== SALIDA EMERGENCIA ===== */}

      <text
        x="1530"
        y="900"
        transform="rotate(-90 1530,900)"
        fontSize="16"
        fontWeight="bold"
      >
        SALIDA DE EMERGENCIA
      </text>

      {/* ===== ENTRADA PRINCIPAL ===== */}

      <text
        x="800"
        y="960"
        textAnchor="middle"
        fontSize="20"
        fontWeight="bold"
      >
        ENTRADA Y SALIDA PRINCIPAL
      </text>

    </svg>
  );
}