import React from "react";

const servicesData = [
  {
    title: "Desarrollo a Medida",
    icon: "code",
    description:
      "Creamos aplicaciones web, móviles y soluciones back-end robustas, diseñadas específicamente para adaptarse a los procesos únicos de tu negocio.",
    color: "secondary",
  },
  {
    title: "Consultoría y Arquitectura",
    icon: "web",
    description:
      "Definimos arquitecturas escalables y seguras, garantizando que cada línea de código contribuya a una solución mantenible a largo plazo.",
    color: "primary",
  },
  {
    title: "Integración de Sistema",
    icon: "lightbulb",
    description:
      "Conectamos tus herramientas y plataformas mediante APIs personalizadas para unificar el flujo de información y eliminar silos de datos.",
    color: "secondary",
  },
  {
    title: "Soporte Técnico Continuo",
    icon: "support_agent",
    description:
      "No te dejamos solo tras el lanzamiento. Ofrecemos acompañamiento técnico, evolución de producto y soporte constante para tus soluciones en producción.",
    color: "primary",
  },
];

const Services = () => {
  return (
    <section
      className="py-20 md:py-24 bg-gradient-to-b from-[#020617] to-[#020617]"
      id="servicios"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        {/* Encabezado */}
        <div className="text-center mb-12 md:mb-14">
          <h2 className="text-white font-bold text-sm tracking-[0.3em] uppercase mb-3">
            NUESTROS SERVICIOS
          </h2>

          <h3
            className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white"
            id="services-subtitle"
          >
            Soluciones integrales
          </h3>
        </div>

        {/* Grid de servicios */}
        <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
          {servicesData.map((service, index) => (
            <div
              key={index}
              className="glass-card p-6 lg:p-8 rounded-3xl border border-white/10 flex flex-col items-center text-center gap-4 transition-all hover:bg-white/5"
            >
              {/* Icono */}
              <div
                className={`w-14 h-14 shrink-0 rounded-2xl flex items-center justify-center
                ${
                  service.color === "primary"
                    ? "bg-accent/20 text-accent"
                    : "bg-brand-light/20 text-brand-light"
                }`}
              >
                <span className="material-symbols-outlined text-3xl">
                  {service.icon}
                </span>
              </div>

              {/* Texto */}
              <div>
                <h4 className="text-sm font-bold tracking-[0.2em] uppercase mb-2 text-accent">
                  {service.title}
                </h4>

                <p className="text-blue-100/60 leading-relaxed text-sm md:text-base">
                  {service.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;
