"use client";

import React, { useState } from "react";
import Link from "next/link";

function Contacto({ darkMode }) {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    company: "",
    service: "",
    message: ""
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null); // 'success', 'error'

  // Validaciones
  const validateForm = () => {
    const newErrors = {};

    // Validar nombre
    if (!formData.firstName.trim()) {
      newErrors.firstName = "El nombre es obligatorio";
    } else if (formData.firstName.trim().length < 2) {
      newErrors.firstName = "El nombre debe tener al menos 2 caracteres";
    }

    // Validar apellido
    if (!formData.lastName.trim()) {
      newErrors.lastName = "El apellido es obligatorio";
    } else if (formData.lastName.trim().length < 2) {
      newErrors.lastName = "El apellido debe tener al menos 2 caracteres";
    }

    // Validar email
    if (!formData.email.trim()) {
      newErrors.email = "El email es obligatorio";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Ingresa un email válido";
    }

    // Validar teléfono 
    if (!formData.phone.trim() && !/^\+?[0-9\s\-()]{7,15}$/.test(formData.phone)) {
        newErrors.phone = "Ingresa un teléfono válido";
    }

    // Validar servicio
    if (!formData.service) {
      newErrors.service = "Selecciona un servicio de interés";
    }

    // Validar mensaje
    if (!formData.message.trim()) {
      newErrors.message = "El mensaje es obligatorio";
    } else if (formData.message.trim().length < 10) {
      newErrors.message = "El mensaje debe tener al menos 10 caracteres";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Manejar cambios en los inputs
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    
    // Limpiar error del campo cuando el usuario empiece a escribir
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ""
      }));
    }
  };

  // Envío del formulario
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }

    setIsSubmitting(true);
    setSubmitStatus(null);

    try {
      const response = await fetch(`${process.env.BACKEND_URL}/mails/contacto`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          nombre: formData.firstName,
          apellido: formData.lastName,
          email: formData.email,
          telefono: formData.phone || "No proporcionado",
          empresa: formData.company || "No proporcionada",
          servicio: formData.service,
          mensaje: formData.message
        }),
      });

      if (response.ok) {
        setSubmitStatus("success");
        setFormData({
          firstName: "",
          lastName: "",
          email: "",
          phone: "",
          company: "",
          service: "",
          message: ""
        });
      } else {
        throw new Error("Error en el servidor");
      }
    } catch (error) {
      console.error("Error enviando formulario:", error);
      setSubmitStatus("error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Componente de mensaje de estado
  const StatusMessage = () => {
    if (submitStatus === "success") {
      return (
        <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl">
          <div className="flex items-center gap-3">
            <span className="material-icons text-green-600 dark:text-green-400">check_circle</span>
            <div>
              <p className="font-semibold text-green-800 dark:text-green-300">¡Mensaje enviado con éxito!</p>
              <p className="text-green-700 dark:text-green-400 text-sm mt-1">
                Te contactaremos en menos de 24 horas hábiles.
              </p>
            </div>
          </div>
        </div>
      );
    }

    if (submitStatus === "error") {
      return (
        <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
          <div className="flex items-center gap-3">
            <span className="material-icons text-red-600 dark:text-red-400">error</span>
            <div>
              <p className="font-semibold text-red-800 dark:text-red-300">Error al enviar el mensaje</p>
              <p className="text-red-700 dark:text-red-400 text-sm mt-1">
                Por favor, intenta nuevamente o contáctanos directamente.
              </p>
            </div>
          </div>
        </div>
      );
    }

    return null;
  };

  return (
    <div className="min-h-screen bg-background-light dark:bg-background-dark font-display text-text-light dark:text-text-dark">
      {/* Hero Section de Contacto */}
      <section className="bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/5 py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h1 className="text-4xl font-bold tracking-tight text-text-light dark:text-text-dark sm:text-6xl">
              Contáctanos
            </h1>
            <p className="mt-6 text-lg leading-8 text-text-secondary-light dark:text-text-secondary-dark">
              Estamos aquí para ayudarte a transformar tu visión financiera en realidad. 
              Agenda una consulta gratuita con nuestros expertos.
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <Link 
                href="#contact-form" 
                className="rounded-md bg-primary px-6 py-3 text-lg font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors"
              >
                Consultar
              </Link>
              <Link 
                href="tel:+573203306927" 
                className="text-lg font-semibold leading-6 text-primary hover:text-blue-500 transition-colors"
              >
                Llamar ahora <span aria-hidden="true">→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Sección Principal de Contacto */}
      <section id="contact-form" className="py-24 sm:py-32 bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-blue-900/20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-5xl grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-12">
            
            {/* Columna Izquierda - Información de contacto */}
            <div className="flex flex-col space-y-8">
              <div className="text-center lg:text-left">
                <h2 className="text-3xl font-bold tracking-tight text-text-light dark:text-text-dark sm:text-4xl">
                  Conectemos con tu éxito
                </h2>
                <p className="mt-4 text-lg leading-8 text-text-secondary-light dark:text-text-secondary-dark">
                  Más de 10 años de experiencia respaldan nuestro compromiso con la excelencia contable y financiera de cada cliente.
                </p>
              </div>

              {/* Tarjeta de información de contacto */}
              <div className={`rounded-2xl ${!darkMode ? 'bg-white' : 'bg-card-dark'} p-8 shadow-xl border ${!darkMode ? 'border-gray-100' : 'border-gray-700'}`}>
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-3 h-8 bg-primary rounded-full"></div>
                  <h3 className="text-2xl font-bold text-text-light dark:text-text-dark">¿Por qué elegirnos?</h3>
                </div>
                
                <div className="space-y-6">
                  <div className={`flex items-start gap-4 p-4 rounded-xl ${!darkMode ? 'bg-primary/5 hover:bg-primary/10' : 'bg-primary/10 hover:bg-primary/15'} transition-colors`}>
                    <div className="flex-shrink-0 w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                      <span className="material-icons text-white text-lg">rocket_launch</span>
                    </div>
                    <div>
                      <p className="font-semibold text-text-light dark:text-text-dark">Respuesta en 24h</p>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm mt-1">
                        Nos comprometemos a responder tu consulta en menos de 24 horas hábiles.
                      </p>
                    </div>
                  </div>

                  <div className={`flex items-start gap-4 p-4 rounded-xl ${!darkMode ? 'bg-primary/5 hover:bg-primary/10' : 'bg-primary/10 hover:bg-primary/15'} transition-colors`}>
                    <div className="flex-shrink-0 w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                      <span className="material-icons text-white text-lg">person</span>
                    </div>
                    <div>
                      <p className="font-semibold text-text-light dark:text-text-dark">Asesor personalizado</p>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm mt-1">
                        Serás asignado a un experto que entenderá específicamente tus necesidades.
                      </p>
                    </div>
                  </div>

                  <div className={`flex items-start gap-4 p-4 rounded-xl ${!darkMode ? 'bg-primary/5 hover:bg-primary/10' : 'bg-primary/10 hover:bg-primary/15'} transition-colors`}>
                    <div className="flex-shrink-0 w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                      <span className="material-icons text-white text-lg">support_agent</span>
                    </div>
                    <div>
                      <p className="font-semibold text-text-light dark:text-text-dark">Soporte continuo</p>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm mt-1">
                        Acompañamiento constante durante todo el proceso de implementación.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Información de contacto compacta */}
              <div className={`rounded-2xl ${!darkMode ? 'bg-white' : 'bg-card-dark'} p-8 shadow-xl border ${!darkMode ? 'border-gray-100' : 'border-gray-700'}`}>
                <h3 className="text-xl font-bold text-text-light dark:text-text-dark mb-6 flex items-center gap-2">
                  <span className="material-icons text-primary">connect_without_contact</span>
                  Canales de Contacto
                </h3>
                
                <div className="space-y-4">
                  <Link href="tel:+573203306927" className={`flex items-center justify-between p-4 rounded-xl ${!darkMode ? 'bg-gray-50 hover:bg-gray-100' : 'bg-gray-800 hover:bg-gray-700'} transition-colors group`}>
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${!darkMode ? 'bg-blue-100' : 'bg-blue-900/30'}`}>
                        <span className={`material-icons ${!darkMode ? 'text-blue-600' : 'text-blue-400'}`}>phone</span>
                      </div>
                      <div>
                        <p className="font-semibold text-text-light dark:text-text-dark">Llamada</p>
                        <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm">+57 320 330 6927</p>
                      </div>
                    </div>
                    <span className="material-icons text-primary transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
                  </Link>

                  <Link href="https://wa.me/573203306927" target="_blank" className={`flex items-center justify-between p-4 rounded-xl ${!darkMode ? 'bg-gray-50 hover:bg-gray-100' : 'bg-gray-800 hover:bg-gray-700'} transition-colors group`}>
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${!darkMode ? 'bg-green-100' : 'bg-green-900/30'}`}>
                        <span className={`material-icons ${!darkMode ? 'text-green-600' : 'text-green-400'}`}>chat</span>
                      </div>
                      <div>
                        <p className="font-semibold text-text-light dark:text-text-dark">WhatsApp</p>
                        <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm">Chat inmediato</p>
                      </div>
                    </div>
                    <span className={`material-icons transform group-hover:translate-x-1 transition-transform ${!darkMode ? 'text-green-600' : 'text-green-400'}`}>arrow_forward</span>
                  </Link>

                  <Link href="mailto:info@sempreg.com" className={`flex items-center justify-between p-4 rounded-xl ${!darkMode ? 'bg-gray-50 hover:bg-gray-100' : 'bg-gray-800 hover:bg-gray-700'} transition-colors group`}>
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${!darkMode ? 'bg-purple-100' : 'bg-purple-900/30'}`}>
                        <span className={`material-icons ${!darkMode ? 'text-purple-600' : 'text-purple-400'}`}>email</span>
                      </div>
                      <div>
                        <p className="font-semibold text-text-light dark:text-text-dark">Email</p>
                        <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm">info@sempreg.com</p>
                      </div>
                    </div>
                    <span className={`material-icons transform group-hover:translate-x-1 transition-transform ${!darkMode ? 'text-purple-600' : 'text-purple-400'}`}>arrow_forward</span>
                  </Link>
                </div>

                {/* Horario de atención */}
                <div className={`mt-6 p-4 rounded-xl ${!darkMode ? 'bg-primary/5' : 'bg-primary/10'}`}>
                  <div className="flex items-center gap-2 mb-2">
                    <span className="material-icons text-primary text-lg">schedule</span>
                    <p className="font-semibold text-text-light dark:text-text-dark">Horario de Atención</p>
                  </div>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark">Lun - Vie</p>
                      <p className="font-medium text-text-light dark:text-text-dark">8:00 AM - 6:00 PM</p>
                    </div>
                    <div>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark">Sábados</p>
                      <p className="font-medium text-text-light dark:text-text-dark">9:00 AM - 1:00 PM</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Columna Derecha - Formulario y Ubicaciones */}
            <div className="space-y-8">
              {/* Formulario de contacto */}
              <div className={`rounded-2xl ${!darkMode ? 'bg-white' : 'bg-card-dark'} p-8 shadow-xl border ${!darkMode ? 'border-gray-100' : 'border-gray-700'}`}>
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-3 h-8 bg-primary rounded-full"></div>
                  <h3 className="text-2xl font-bold text-text-light dark:text-text-dark">Consulta nuestros servicios</h3>
                </div>
                <p className="text-text-secondary-light dark:text-text-secondary-dark mb-8">
                  Completa el formulario y nos pondremos en contacto contigo en menos de 24 horas. 
                  <span className="block mt-2 text-primary font-medium">✓ Sin compromisos ✓ 100% confidencial</span>
                </p>

                <form className="space-y-6" onSubmit={handleSubmit}>
                  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                      <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                        Nombre *
                      </label>
                      <input
                        type="text"
                        name="firstName"
                        id="first-name"
                        value={formData.firstName}
                        onChange={handleInputChange}
                        className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.firstName ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                        placeholder="Tu nombre"
                      />
                      {errors.firstName && (
                        <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.firstName}</p>
                      )}
                    </div>

                    <div>
                      <label htmlFor="last-name" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                        Apellido *
                      </label>
                      <input
                        type="text"
                        name="lastName"
                        id="last-name"
                        value={formData.lastName}
                        onChange={handleInputChange}
                        className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.lastName ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                        placeholder="Tu apellido"
                      />
                      {errors.lastName && (
                        <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.lastName}</p>
                      )}
                    </div>
                  </div>

                  <div>
                    <label htmlFor="email" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                      Email *
                    </label>
                    <input
                      type="email"
                      name="email"
                      id="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.email ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                      placeholder="tu@email.com"
                    />
                    {errors.email && (
                      <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="phone" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                      Teléfono *
                    </label>
                    <input
                      type="tel"
                      name="phone"
                      id="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.phone ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                      placeholder="+57 320 330 6927"
                    />
                    {errors.phone && (
                      <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.phone}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="company" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                      Empresa
                    </label>
                    <input
                      type="text"
                      name="company"
                      id="company"
                      value={formData.company}
                      onChange={handleInputChange}
                      className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${!darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                      placeholder="Nombre de tu empresa"
                    />
                  </div>

                  <div>
                    <label htmlFor="service" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                      Servicio de Interés *
                    </label>
                    <select
                      name="service"
                      id="service"
                      value={formData.service}
                      onChange={handleInputChange}
                      className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.service ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                    >
                      <option value="">Selecciona un servicio</option>
                      <option value="contable">Asesoría Contable</option>
                      <option value="financiera">Consultoría Financiera</option>
                      <option value="outsourcing">Outsourcing Contable</option>
                      <option value="auditoria">Auditoría Interna</option>
                      <option value="software">Software Contable</option>
                      <option value="revisoria">Revisoría Fiscal</option>
                      <option value="empresa">Creación de Empresa</option>
                      <option value="inmobiliaria">Asesoría Inmobiliaria</option>
                      <option value="otro">Otro</option>
                    </select>
                    {errors.service && (
                      <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.service}</p>
                    )}
                  </div>

                  <div>
                    <label htmlFor="message" className="block text-sm font-medium leading-6 text-text-light dark:text-text-dark mb-2">
                      Mensaje *
                    </label>
                    <textarea
                      name="message"
                      id="message"
                      rows={4}
                      value={formData.message}
                      onChange={handleInputChange}
                      className={`block w-full rounded-xl border-0 ${!darkMode ? 'bg-gray-50' : 'bg-gray-800'} px-4 py-3.5 text-text-light dark:text-text-dark shadow-sm ring-1 ring-inset ${errors.message ? 'ring-red-500' : !darkMode ? 'ring-gray-300' : 'ring-gray-600'} placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm transition-all duration-200`}
                      placeholder="Cuéntanos sobre tu proyecto, necesidades específicas o consulta..."
                    />
                    {errors.message && (
                      <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.message}</p>
                    )}
                  </div>

                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className={`w-full rounded-xl bg-primary px-6 py-4 text-lg font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all duration-200 transform hover:scale-105 hover:shadow-lg ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
                  >
                    <span className="flex items-center justify-center gap-2">
                      {isSubmitting ? (
                        <>
                          <span className="material-icons animate-spin">refresh</span>
                          Enviando...
                        </>
                      ) : (
                        <>
                          <span className="material-icons">send</span>
                          Solicitar Consulta Gratuita
                        </>
                      )}
                    </span>
                  </button>

                  <StatusMessage />

                  <p className="text-xs text-text-secondary-light dark:text-text-secondary-dark text-center">
                    Al enviar este formulario, aceptas nuestra política de privacidad y recibir comunicaciones de Sempreg.
                  </p>
                </form>
              </div>

              {/* Tarjetas de ubicación */}
              <div className="grid grid-cols-1 gap-4">
                <div className={`rounded-2xl ${!darkMode ? 'bg-white' : 'bg-card-dark'} p-6 shadow-xl border ${!darkMode ? 'border-gray-100' : 'border-gray-700'} hover:shadow-2xl transition-all duration-300 hover:border-primary/20`}>
                  <div className="flex items-start gap-3 mb-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <span className="material-icons text-primary">location_on</span>
                    </div>
                    <div>
                      <h4 className="font-semibold text-text-light dark:text-text-dark text-lg">Bogotá, Colombia</h4>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm mt-1">
                        CALLE 125 21A OFIC 505<br/>
                        EDFI CASA BONITA<br/>
                        Bogotá - Colombia
                      </p>
                    </div>
                  </div>
                  <Link 
                    href="https://maps.google.com/?q=CALLE+125+21A+OFIC+505+EDFI+CASA+BONITA+Bogotá" 
                    target="_blank"
                    className="inline-flex items-center gap-1 text-primary font-medium hover:text-blue-500 transition-colors text-sm"
                  >
                    <span className="material-icons text-sm">map</span>
                    Ver en Google Maps
                  </Link>
                </div>

                <div className={`rounded-2xl ${!darkMode ? 'bg-white' : 'bg-card-dark'} p-6 shadow-xl border ${!darkMode ? 'border-gray-100' : 'border-gray-700'} hover:shadow-2xl transition-all duration-300 hover:border-primary/20`}>
                  <div className="flex items-start gap-3 mb-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <span className="material-icons text-primary">location_on</span>
                    </div>
                    <div>
                      <h4 className="font-semibold text-text-light dark:text-text-dark text-lg">Ciudad de México</h4>
                      <p className="text-text-secondary-light dark:text-text-secondary-dark text-sm mt-1">
                        Av. Homero, Av. Isaac Newton 231<br/>
                        Esquina, Miguel Hidalgo<br/>
                        Ciudad de México, México
                      </p>
                    </div>
                  </div>
                  <Link 
                    href="https://maps.google.com/?q=Av+Homero+Av+Isaac+Newton+231+Ciudad+de+México" 
                    target="_blank"
                    className="inline-flex items-center gap-1 text-primary font-medium hover:text-blue-500 transition-colors text-sm"
                  >
                    <span className="material-icons text-sm">map</span>
                    Ver en Google Maps
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sección de Confianza */}
      <section className={`py-20 ${!darkMode ? 'bg-white' : 'bg-card-dark'} border-t ${!darkMode ? 'border-gray-200' : 'border-gray-700'}`}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="text-center">
            <h3 className="text-2xl font-bold text-text-light dark:text-text-dark mb-4">
              Confían en nuestra experiencia
            </h3>
            <p className="text-text-secondary-light dark:text-text-secondary-dark mb-12 max-w-2xl mx-auto">
              Más de 100 empresas han transformado su gestión financiera con nuestras soluciones personalizadas.
            </p>
            <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6 items-center opacity-70">
              {['verified', 'star', 'thumb_up', 'security', 'groups', 'emoji_events'].map((icon, index) => (
                <div key={index} className="flex items-center justify-center">
                  <div className="h-16 w-16 bg-primary/10 rounded-2xl flex items-center justify-center hover:bg-primary/20 transition-colors duration-300">
                    <span className="material-icons text-primary text-2xl">{icon}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default Contacto;