import "./Versions.css";
import nubeImg from "../assets/images/SISTEMA WEB.jpeg";
import localImg from "../assets/images/VERSION11.jpg";

const Versions = () => {
  return (
    <section className="versions">
      <h4 className="section-tag">VERSIONES DEL SISTEMA</h4>
      <h2 className="section-title">
        Dos soluciones, un mismo control total
      </h2>
      <div className="versions-grid">
        {/* NUBE */}
        <div className="version-card">
          <img src={nubeImg} alt="Sistema en la Nube" />
          <h3>☁️ Sistema en la Nube</h3>
          <p className="version-desc">
            Ideal para empresas que necesitan acceso remoto, escalabilidad
            y respaldo automático.
          </p>

          <ul className="benefits">
            <li>🌐 Acceso desde cualquier lugar</li>
            <li>🔄 Actualizaciones automáticas</li>
            <li>☁️ Respaldo diario en servidores seguros</li>
            <li>🔐 Seguridad avanzada de datos</li>
            <li>📱 Compatible con móviles y tablets</li>
            <li>🚀 Escalable según tu crecimiento</li>
            <li>🛠 Soporte técnico especializado</li>
          </ul>
        </div>

        {/* LOCAL */}
        <div className="version-card">
          <img src={localImg} alt="Sistema Local" />

          <h3>🖥️ Sistema Local</h3>
          <p className="version-desc">
            Diseñado para negocios que requieren estabilidad,
            velocidad y funcionamiento sin internet.
          </p>

          <ul className="benefits">
            <li>⚡ Funciona sin conexión a internet</li>
            <li>💾 Datos almacenados en tu propio equipo</li>
            <li>🏪 Ideal para SuperMercados, Restaurantes y mas</li>
            <li>🖨 Compatible con impresoras de tickets</li>
            <li>🔒 Control total de la información</li>
            <li>🧑‍💼 Multiusuario en red local</li>
            <li>🛠 Soporte técnico especializado</li>
          </ul>
        </div>
      </div>
    </section>
  );
};

export default Versions;
