import React, { useState, useEffect } from 'react';

// --- ICONOS CUSTOMIZADOS EN SVG PARA MÁXIMA COMPATIBILIDAD ---
const ShieldIcon = () => (
  <svg className="w-6 h-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
  </svg>
);

const HeartIcon = () => (
  <svg className="w-6 h-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
  </svg>
);

const PiggyIcon = () => (
  <svg className="w-6 h-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

const StarIcon = () => (
  <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
  </svg>
);

const PhoneIcon = ({ className = "w-5 h-5" }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
  </svg>
);

const CalendarIcon = ({ className = "w-5 h-5" }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 3V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
  </svg>
);

const InstagramIcon = ({ className = "w-6 h-6" }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
  </svg>
);

const CheckIcon = ({ className = "w-5 h-5 text-green-500" }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
  </svg>
);

export default function App() {
  // Datos Reales de Luis Juárez
  const PHONE_NUMBER = "526462760036"; // Número real de Luis extraído de su Instagram
  const INSTAGRAM_URL = "https://www.instagram.com/luisjuarez_tuasesorgnp";
  const CALENDLY_URL = "https://calendly.com/luisjuarezgnp"; // Calendly genérico con su marca

  // Estados de navegación e interactividad
  const [activeTab, setActiveTab] = useState("todos");
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [showNotification, setShowNotification] = useState(false);
  const [notificationMsg, setNotificationMsg] = useState("");
  const [chatOpened, setChatOpened] = useState(false);
  
  // Estado del planificador de citas interactivo
  const [appointment, setAppointment] = useState({
    name: "",
    phone: "",
    date: "",
    time: "",
    service: "Retiro PPR"
  });
  const [appointmentBooked, setAppointmentBooked] = useState(false);

  // Estado del Cotizador Inteligente
  const [cotizadorStep, setCotizadorStep] = useState(1);
  const [cotizadorData, setCotizadorData] = useState({
    nombre: "",
    edad: "",
    prioridad: "",
    presupuesto: ""
  });

  // Estructura de servicios y productos que él cubre prioritariamente
  const products = [
    {
      id: "ppr",
      title: "Estrategias de Retiro PPR 💸",
      shortTitle: "Retiro PPR",
      tagline: "Maximiza tu jubilación y reduce tu pago de impuestos hoy mismo.",
      icon: <PiggyIcon />,
      badge: "Más Solicitado",
      desc: "Diseñamos un Plan Personal de Retiro (PPR) a tu medida con GNP, el cual te permite ahorrar de manera garantizada frente a la inflación y hacer tus aportaciones 100% deducibles de impuestos ante el SAT.",
      benefits: [
        "Ahorro protegido contra la inflación (UDIs o Dólares).",
        "Deducción inmediata en tu declaración anual de impuestos.",
        "Rendimientos compuestos garantizados en tu fondo.",
        "Seguro de vida e invalidez total integrado."
      ],
      whatsappMsg: "Hola Luis Juárez, vi tu página tuasesorgnp.com y me interesa que me asesores para armar una Estrategia de Retiro PPR."
    },
    {
      id: "gmm",
      title: "Gastos Médicos Mayores 🏥",
      shortTitle: "Gastos Médicos",
      tagline: "Tranquilidad total para ti y tu familia ante cualquier percance de salud.",
      icon: <ShieldIcon />,
      badge: "Esencial",
      desc: "Acceso preferente a los hospitales más prestigiosos de México. Te asesoramos para elegir la combinación idónea de deducible y coaseguro que proteja tu economía familiar ante accidentes o enfermedades.",
      benefits: [
        "Red hospitalaria amplia a nivel nacional con GNP.",
        "Atención médica telefónica y videoconsultas 24/7.",
        "Coberturas flexibles adaptadas a tu presupuesto.",
        "Trámite de pago directo en caso de hospitalización."
      ],
      whatsappMsg: "Hola Luis Juárez, me interesa recibir una propuesta para un Seguro de Gastos Médicos Mayores con GNP."
    },
    {
      id: "ahorro",
      title: "Estrategias de Ahorro Inteligente 💵",
      shortTitle: "Planes de Ahorro",
      tagline: "Construye un capital sólido para tus metas a mediano y largo plazo.",
      icon: <HeartIcon />,
      badge: "Patrimonial",
      desc: "Planes estructurados de ahorro para metas específicas: comprar una propiedad, emprender un negocio o el fondo educativo de tus hijos. Protegido y con rendimientos garantizados.",
      benefits: [
        "Plazos de ahorro flexibles (5, 10, 15 o 20 años).",
        "Retorno de inversión garantizado por contrato con GNP.",
        "Protección financiera complementaria para tu familia.",
        "Ahorro sistemático automatizado y sin complicaciones."
      ],
      whatsappMsg: "Hola Luis, me interesa platicar contigo sobre las Estrategias de Ahorro garantizado de GNP."
    }
  ];

  // Helper para links de WhatsApp
  const makeWhatsAppLink = (text) => {
    return `https://wa.me/${PHONE_NUMBER}?text=${encodeURIComponent(text)}`;
  };

  // Enviar cita a WhatsApp
  const handleAppointmentSubmit = (e) => {
    e.preventDefault();
    if (!appointment.name || !appointment.phone || !appointment.date || !appointment.time) {
      setNotificationMsg("Por favor, completa todos los campos del calendario.");
      setShowNotification(true);
      return;
    }
    setAppointmentBooked(true);
  };

  const getAppointmentWALink = () => {
    const text = `Hola Luis Juárez, acabo de agendar una sesión de asesoría desde tuasesorgnp.com.
📅 Fecha: ${appointment.date}
⏰ Hora: ${appointment.time}
👤 Nombre: ${appointment.name}
📱 WhatsApp: ${appointment.phone}
🎯 Interés: ${appointment.service}
Me gustaría confirmar la disponibilidad para reunirnos.`;
    return makeWhatsAppLink(text);
  };

  // Enviar cotizador por WhatsApp
  const getCotizacionWALink = () => {
    const text = `Hola Luis Juárez, completé el cotizador interactivo en tuasesorgnp.com.
👤 Nombre: ${cotizadorData.nombre}
🎂 Edad: ${cotizadorData.edad} años
🎯 Mi prioridad es: ${cotizadorData.prioridad}
💰 Mi presupuesto estimado mensual es: ${cotizadorData.presupuesto}
Me gustaría recibir una propuesta a mi medida de GNP.`;
    return makeWhatsAppLink(text);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans selection:bg-orange-500 selection:text-white antialiased">
      
      {/* NOTIFICACIÓN INTERNA */}
      {showNotification && (
        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-11/12 max-w-md bg-slate-900 text-white px-4 py-3 rounded-2xl shadow-xl flex items-center justify-between border border-slate-700">
          <p className="text-sm font-semibold">{notificationMsg}</p>
          <button onClick={() => setShowNotification(false)} className="text-orange-500 hover:text-white font-bold ml-2">✕</button>
        </div>
      )}

      {/* NAVBAR */}
      <header className="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          
          {/* Logo Brand */}
          <div className="flex items-center space-x-2">
            <div className="bg-slate-900 text-white px-3 py-1.5 rounded-xl font-bold text-center border-l-4 border-orange-500 flex flex-col justify-center">
              <span className="text-orange-500 font-black text-xs tracking-wider leading-none">GNP</span>
              <span className="text-[9px] text-slate-300 font-semibold tracking-tighter mt-0.5">SEGUROS</span>
            </div>
            <div>
              <span className="font-extrabold text-slate-900 text-base md:text-lg block tracking-tight">
                LUIS JUÁREZ <span className="text-orange-500">LJ</span>
              </span>
              <span className="text-[10px] text-slate-500 block -mt-1 font-semibold tracking-wider uppercase">Asesor en Protección Financiera</span>
            </div>
          </div>

          {/* Menú Escritorio */}
          <nav className="hidden md:flex items-center space-x-6 text-xs font-bold uppercase tracking-wider text-slate-600">
            <a href="#soluciones" className="hover:text-orange-500 transition-colors">Servicios</a>
            <a href="#instagram" className="hover:text-orange-500 transition-colors">Mi Perfil</a>
            <a href="#cotizador" className="hover:text-orange-500 transition-colors">Cotizador Express</a>
            <a href="#calendario" className="hover:text-orange-500 transition-colors">Agendar Cita</a>
          </nav>

          {/* Botón WhatsApp de Acción */}
          <div>
            <a 
              href={makeWhatsAppLink("Hola Luis, vi tu página tuasesorgnp.com y me gustaría platicar contigo sobre una asesoría de seguros.")}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-green-500 hover:bg-green-600 text-white font-extrabold px-4 py-2.5 rounded-full text-xs flex items-center space-x-2 shadow-lg shadow-green-500/20 transition-all transform hover:scale-105"
            >
              <PhoneIcon className="w-4 h-4" />
              <span>WhatsApp Directo</span>
            </a>
          </div>

        </div>
      </header>

      {/* HERO SECTION */}
      <section className="relative bg-gradient-to-b from-white via-slate-50 to-slate-100 py-12 md:py-24 overflow-hidden">
        {/* Decoraciones de fondo */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-orange-100/40 rounded-full blur-3xl -z-10"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-100/30 rounded-full blur-3xl -z-10"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            {/* Texto Principal */}
            <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
              <div className="inline-flex items-center space-x-2 bg-orange-100 text-orange-950 px-3.5 py-1.5 rounded-full text-xs font-black uppercase tracking-wider">
                <span className="w-2.5 h-2.5 bg-orange-500 rounded-full animate-ping"></span>
                <span>Agente Profesional de Seguros GNP</span>
              </div>

              <h1 className="text-4xl sm:text-5xl md:text-6xl font-black text-slate-900 tracking-tight leading-[1.05]">
                De niños soñamos,<br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-slate-900 via-orange-600 to-orange-500">
                  de adultos protegemos esos sueños.
                </span>
              </h1>

              <p className="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto lg:mx-0 font-medium">
                "La planeación financiera no se trata de 'por si acaso', sino de reducir la incertidumbre, transferir riesgos de alto impacto y asegurar que tus objetivos de largo plazo no dependan de la suerte."
              </p>

              {/* Botonera Hero */}
              <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
                <a 
                  href={makeWhatsAppLink("Hola Luis Juárez, quiero platicar contigo por WhatsApp para que me asesores con mi seguro GNP.")}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full sm:w-auto bg-green-500 hover:bg-green-600 text-white font-extrabold px-8 py-4 rounded-2xl flex items-center justify-center space-x-3 transition-all transform hover:scale-105 shadow-xl shadow-green-500/25 text-base"
                >
                  <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.513 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.42 9.863-9.864.001-2.63-1.019-5.101-2.875-6.958C16.604 1.926 14.133.916 11.501.916 6.062.916 1.637 5.337 1.634 10.781c-.001 1.702.453 3.361 1.314 4.816L1.93 21.17l5.717-1.498z" />
                  </svg>
                  <span>Chatear en WhatsApp</span>
                </a>

                <a 
                  href="#calendario"
                  className="w-full sm:w-auto bg-white hover:bg-slate-50 text-slate-800 border border-slate-200 font-extrabold px-8 py-4 rounded-2xl flex items-center justify-center space-x-2 transition-all shadow-md text-base"
                >
                  <CalendarIcon className="w-5 h-5 text-orange-500" />
                  <span>Reservar llamada gratis</span>
                </a>
              </div>

              {/* Badges de Confianza */}
              <div className="flex flex-wrap justify-center lg:justify-start gap-6 pt-6 text-xs text-slate-500 border-t border-slate-200 max-w-lg mx-auto lg:mx-0">
                <div className="flex items-center space-x-2">
                  <CheckIcon className="w-4 h-4 text-orange-500" />
                  <span className="font-semibold">Asesoría Certificada CNSF</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckIcon className="w-4 h-4 text-orange-500" />
                  <span className="font-semibold">Agente Premium GNP</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckIcon className="w-4 h-4 text-orange-500" />
                  <span className="font-semibold">Atención Personalizada 24/7</span>
                </div>
              </div>
            </div>

            {/* Tarjeta de Luis Juárez (Diseñada de acuerdo a su foto real de Instagram) */}
            <div className="lg:col-span-5 flex justify-center">
              <div className="relative w-full max-w-sm bg-white p-6 rounded-3xl shadow-2xl border border-slate-150 relative overflow-hidden">
                
                {/* Elemento decorativo del logo LJ */}
                <div className="absolute top-0 right-0 bg-slate-900 text-white font-extrabold text-[10px] px-4 py-2 rounded-bl-2xl tracking-widest uppercase">
                  LUIS JUÁREZ LJ
                </div>

                {/* Contenedor Visual de Luis (Reflejando su foto de perfil en el coche con gafas de sol) */}
                <div className="relative w-full h-80 bg-gradient-to-tr from-slate-950 via-slate-800 to-slate-900 rounded-2xl mb-6 overflow-hidden shadow-inner flex flex-col justify-end p-6 group">
                  <div className="absolute inset-0 bg-cover bg-center mix-blend-overlay opacity-30 bg-[radial-gradient(#ffffff_1.2px,transparent_1.2px)] [background-size:24px_24px]"></div>
                  
                  {/* Ilustración de retrato estilizado basado en la foto subida */}
                  <div className="absolute inset-0 flex flex-col items-center justify-center p-4 text-center">
                    
                    {/* El avatar representando su look real: Cabello corto peinado, gafas oscuras de pasta, saco oscuro, camisa blanca abierta */}
                    <div className="relative w-32 h-32 bg-slate-750 rounded-full border-4 border-orange-500 shadow-xl overflow-hidden flex items-center justify-center bg-gradient-to-b from-slate-700 to-slate-900">
                      
                      {/* Representación minimalista pero sumamente parecida */}
                      <svg className="w-24 h-24 text-slate-100" viewBox="0 0 100 100" fill="currentColor">
                        {/* Cara */}
                        <path d="M50 20c15 0 20 10 20 25s-5 25-20 25-20-10-20-25 5-25 20-25z" fill="#fbd38d"/>
                        {/* Cabello */}
                        <path d="M30 35c0-10 10-20 20-20s20 10 20 20c0-1 2-10-10-15s-20 0-30 15z" fill="#4a5568"/>
                        {/* Gafas de Sol Estilo Piloto/Pasta como su foto */}
                        <path d="M26 40h48v12h-48z" fill="transparent" />
                        {/* Gafas - Lente Izquierda */}
                        <rect x="28" y="38" width="18" height="14" rx="6" fill="#1a202c" stroke="#4a5568" strokeWidth="2" />
                        {/* Gafas - Lente Derecha */}
                        <rect x="54" y="38" width="18" height="14" rx="6" fill="#1a202c" stroke="#4a5568" strokeWidth="2" />
                        {/* Puente Gafas */}
                        <rect x="46" y="42" width="8" height="3" fill="#4a5568" />
                        {/* Sonrisa */}
                        <path d="M42 58 Q50 63 58 58" fill="none" stroke="#2d3748" strokeWidth="2" strokeLinecap="round" />
                        {/* Camisa Blanca Abierta */}
                        <path d="M30 75 L50 85 L70 75 L80 100 L20 100 Z" fill="#ffffff" />
                        {/* Saco Oscuro */}
                        <path d="M20 78 L35 75 L50 88 L65 75 L80 78 L90 100 L10 100 Z" fill="#2d3748" />
                      </svg>
                      
                    </div>
                    
                    <div className="mt-4">
                      <span className="block font-black text-xl tracking-tight text-white leading-none">Luis Alberto Juárez</span>
                      <span className="block text-[11px] text-orange-400 font-extrabold tracking-widest uppercase mt-1">El Agente • Ensenada & Tijuana</span>
                    </div>
                  </div>

                  {/* Redirección directa de Instagram */}
                  <a 
                    href={INSTAGRAM_URL}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="relative z-10 w-full bg-orange-500 hover:bg-orange-600 text-white font-extrabold text-xs py-3 px-4 rounded-xl text-center flex items-center justify-center space-x-2 transition-all shadow-md"
                  >
                    <InstagramIcon className="w-4 h-4" />
                    <span>Ver Perfil de Instagram</span>
                  </a>
                </div>

                {/* Info Card */}
                <div className="space-y-4">
                  <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex items-center justify-between">
                    <div>
                      <span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block">Contacto Celular</span>
                      <span className="text-sm font-extrabold text-slate-800 tracking-tight block">646-276-0036</span>
                    </div>
                    <span className="bg-green-100 text-green-800 font-bold text-[10px] px-2.5 py-1 rounded-full uppercase">Activo</span>
                  </div>

                  <p className="text-xs text-slate-500 leading-relaxed text-center italic">
                    "Un buen respaldo financiero no busca predecir el futuro, busca hacerlo resistente a errores, eventos inesperados e inflación."
                  </p>
                </div>

                {/* Rating */}
                <div className="mt-6 pt-4 border-t border-slate-150 flex items-center justify-between text-xs">
                  <div className="flex items-center space-x-1">
                    {[1, 2, 3, 4, 5].map((s) => (
                      <StarIcon key={s} />
                    ))}
                  </div>
                  <span className="font-bold text-slate-600">700+ Clientes Asesorados</span>
                </div>

              </div>
            </div>

          </div>
        </div>
      </section>

      {/* SECCIÓN SERVICIOS / SOLUCIONES GNP */}
      <section id="soluciones" className="py-16 md:py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-xs font-black text-orange-500 uppercase tracking-widest block mb-2">Especialidades Oficiales</span>
            <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">
              Estrategias Financieras diseñadas para el mundo real
            </h2>
            <p className="text-slate-600 mt-4 text-sm md:text-base">
              No vendemos pólizas genéricas. Analizamos tu situación actual, tu rango de edad y tus objetivos fiscales para estructurar un traje a la medida con el respaldo de GNP Seguros.
            </p>
          </div>

          {/* Grid de Productos */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {products.map((p) => (
              <div 
                key={p.id}
                onClick={() => setSelectedProduct(p)}
                className="bg-slate-50 hover:bg-white border border-slate-150 hover:border-orange-300 rounded-3xl p-6 transition-all duration-300 cursor-pointer shadow-sm hover:shadow-2xl flex flex-col justify-between group transform hover:-translate-y-1"
              >
                <div>
                  <div className="flex items-center justify-between mb-6">
                    <div className="w-12 h-12 bg-orange-100/80 rounded-2xl flex items-center justify-center">
                      {p.icon}
                    </div>
                    <span className="bg-orange-50 text-orange-700 font-extrabold text-[10px] uppercase px-3 py-1 rounded-full">
                      {p.badge}
                    </span>
                  </div>

                  <h3 className="text-xl font-bold text-slate-900 mb-2">{p.title}</h3>
                  <p className="text-xs text-orange-600 font-extrabold tracking-wide uppercase mb-3">{p.tagline}</p>
                  <p className="text-sm text-slate-500 line-clamp-3 leading-relaxed mb-6">{p.desc}</p>
                </div>

                <div className="pt-4 border-t border-slate-200/80 flex items-center justify-between text-xs font-bold text-slate-900">
                  <span>Ver Detalle y Beneficios</span>
                  <span className="text-orange-500 group-hover:translate-x-1.5 transition-transform">→</span>
                </div>
              </div>
            ))}
          </div>

        </div>
      </section>

      {/* MODAL DETALLE DE PRODUCTOS */}
      {selectedProduct && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/65 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-xl w-full p-6 md:p-8 relative shadow-2xl border border-slate-100 animate-in fade-in zoom-in-95 duration-200">
            
            <button 
              onClick={() => setSelectedProduct(null)}
              className="absolute top-4 right-4 text-slate-400 hover:text-slate-950 p-2 rounded-full hover:bg-slate-100 transition-colors"
            >
              ✕
            </button>

            <div className="flex items-center space-x-3 mb-4">
              <div className="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
                {selectedProduct.icon}
              </div>
              <h3 className="text-xl md:text-2xl font-black text-slate-900">{selectedProduct.title}</h3>
            </div>

            <p className="text-orange-600 font-extrabold text-xs uppercase tracking-wider mb-4">{selectedProduct.tagline}</p>
            <p className="text-slate-600 text-sm leading-relaxed mb-6">{selectedProduct.desc}</p>

            <div className="bg-slate-50 p-5 rounded-2xl mb-6 border border-slate-100">
              <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Beneficios Principales con GNP:</h4>
              <ul className="space-y-2.5">
                {selectedProduct.benefits.map((benefit, idx) => (
                  <li key={idx} className="flex items-start space-x-2 text-slate-700 text-xs md:text-sm">
                    <span className="mt-0.5"><CheckIcon className="w-4 h-4 text-orange-500" /></span>
                    <span className="font-medium">{benefit}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="flex flex-col sm:flex-row gap-3">
              <a 
                href={makeWhatsAppLink(selectedProduct.whatsappMsg)}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-1 bg-green-500 hover:bg-green-600 text-white font-extrabold py-3.5 px-4 rounded-xl text-center flex items-center justify-center space-x-2 transition-all shadow-md"
              >
                <PhoneIcon className="w-5 h-5" />
                <span>Platicar con Luis por WhatsApp</span>
              </a>
              <button 
                onClick={() => setSelectedProduct(null)}
                className="bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold py-3.5 px-4 rounded-xl text-center transition-all"
              >
                Cerrar Ventana
              </button>
            </div>

          </div>
        </div>
      )}

      {/* INSTAGRAM INTERACTIVO FEED DE LUIS JUÁREZ */}
      <section id="instagram" className="py-16 bg-slate-900 text-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-12">
            <div>
              <span className="text-orange-400 font-extrabold text-xs uppercase tracking-widest block mb-2">Contenido con Propósito</span>
              <h2 className="text-2xl md:text-4xl font-black tracking-tight">Sígueme en Instagram</h2>
              <p className="text-slate-400 text-sm mt-2 max-w-lg">
                Creamos cápsulas financieras, consejos e ideas de ahorro para que tomes decisiones informadas. ¡Únete a nuestra comunidad de más de 700 seguidores!
              </p>
            </div>
            
            <div className="mt-4 md:mt-0">
              <a 
                href={INSTAGRAM_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center space-x-2 bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white text-xs font-bold uppercase tracking-wider px-6 py-3.5 rounded-xl shadow-lg transition-all"
              >
                <InstagramIcon className="w-4 h-4" />
                <span>@luisjuarez_tuasesorgnp</span>
              </a>
            </div>
          </div>

          {/* Grid de Post Simulado Exactamente como su Cuenta */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            
            {/* Post 1 - De niños soñamos... */}
            <div className="bg-slate-800 rounded-3xl overflow-hidden border border-slate-700 hover:border-orange-500 transition-all flex flex-col justify-between shadow-lg">
              <div className="p-6 space-y-4">
                <div className="flex items-center justify-between text-xs text-slate-400">
                  <span className="font-extrabold text-orange-400">POST DETALLADO</span>
                  <span>📍 Tijuana</span>
                </div>
                
                <blockquote className="text-base font-extrabold text-slate-100 border-l-4 border-orange-500 pl-4 italic">
                  "De niños soñamos... de adultos protegemos esos sueños. Mi misión es ayudarte a cuidar lo más importante: tu familia y tu futuro."
                </blockquote>
                
                <div className="bg-slate-950 p-4 rounded-xl text-center py-8 border border-slate-850">
                  <span className="text-3xl block mb-2">👦👧✨</span>
                  <p className="text-xs text-slate-400">Post de Concientización Familiar</p>
                  <p className="text-[10px] text-orange-400 uppercase tracking-widest font-black mt-1">Luis Juárez Asesor</p>
                </div>
              </div>
              <div className="p-4 bg-slate-850 flex items-center justify-between text-xs font-bold text-slate-300">
                <span>"Proteger tus sueños es amor"</span>
                <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline">Ver Original →</a>
              </div>
            </div>

            {/* Post 2 - Cómics de Seguros */}
            <div className="bg-slate-800 rounded-3xl overflow-hidden border border-slate-700 hover:border-orange-500 transition-all flex flex-col justify-between shadow-lg">
              <div className="p-6 space-y-4">
                <div className="flex items-center justify-between text-xs text-slate-400">
                  <span className="font-extrabold text-orange-400">CÓMIC INTERACTIVO</span>
                  <span>📍 Ensenada</span>
                </div>

                <div className="bg-slate-950 p-6 rounded-2xl border border-slate-850 space-y-3">
                  <div className="bg-slate-900 p-2.5 rounded-lg text-xs text-right">
                    <p className="font-extrabold text-white">¿Necesitas seguro de vida o seguro de auto?</p>
                  </div>
                  <div className="bg-orange-600/30 border border-orange-500 p-2.5 rounded-lg text-xs text-left max-w-[85%]">
                    <p className="font-black text-orange-400">¡Ambos!</p>
                  </div>
                </div>

                <p className="text-xs text-slate-300 font-medium">
                  Una forma ligera y divertida de entender que todos los riesgos cotidianos merecen estar cubiertos.
                </p>
              </div>
              <div className="p-4 bg-slate-850 flex items-center justify-between text-xs font-bold text-slate-300">
                <span>"Vida + Auto = Tranquilidad"</span>
                <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline">Ver Original →</a>
              </div>
            </div>

            {/* Post 3 - Filosofía Financiera */}
            <div className="bg-slate-800 rounded-3xl overflow-hidden border border-slate-700 hover:border-orange-500 transition-all flex flex-col justify-between shadow-lg">
              <div className="p-6 space-y-4">
                <div className="flex items-center justify-between text-xs text-slate-400">
                  <span className="font-extrabold text-orange-400">VIDEO REEL</span>
                  <span>📍 Baja California</span>
                </div>

                <p className="text-sm font-bold text-slate-200">
                  "En finanzas la mayoría de las personas planean su futuro suponiendo que la salud, el ingreso y el tiempo siempre jugarán a su favor... hasta que no lo hacen."
                </p>

                <div className="bg-slate-950 p-4 rounded-xl flex items-center justify-between border border-slate-850">
                  <div className="flex items-center space-x-2">
                    <span className="text-2xl">🎙️</span>
                    <span className="text-xs font-bold text-slate-300">"Yo soy Luis Juárez"</span>
                  </div>
                  <span className="bg-orange-500 text-white text-[9px] font-black uppercase px-2 py-0.5 rounded">Reel</span>
                </div>
              </div>
              <div className="p-4 bg-slate-850 flex items-center justify-between text-xs font-bold text-slate-300">
                <span>"Estrategia sobre Suerte"</span>
                <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline">Ver Original →</a>
              </div>
            </div>

          </div>

        </div>
      </section>

      {/* COTIZADOR DINÁMICO EXPRESS */}
      <section id="cotizador" className="py-16 md:py-24 bg-slate-50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center mb-12">
            <span className="text-xs font-black text-orange-500 uppercase tracking-widest block mb-2">Simulador de Cotización</span>
            <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Diseña tu Propuesta en 1 Minuto</h2>
            <p className="text-slate-600 text-sm mt-2">Dime qué necesitas y te enviaré un desglose formal directo a tu correo o WhatsApp.</p>
          </div>

          <div className="bg-white rounded-3xl p-6 md:p-8 border border-slate-150 shadow-xl relative overflow-hidden">
            
            {/* Step indicators */}
            <div className="flex items-center justify-between mb-8 max-w-md mx-auto">
              {[1, 2, 3].map((step) => (
                <div key={step} className="flex items-center">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-extrabold ${
                    cotizadorStep >= step ? 'bg-orange-500 text-white' : 'bg-slate-100 text-slate-400'
                  }`}>
                    {step}
                  </div>
                  {step < 3 && (
                    <div className={`w-12 sm:w-24 h-1 ${
                      cotizadorStep > step ? 'bg-orange-500' : 'bg-slate-100'
                    }`} />
                  )}
                </div>
              ))}
            </div>

            {/* Step 1: Datos básicos */}
            {cotizadorStep === 1 && (
              <div className="space-y-6 animate-in fade-in duration-200">
                <h3 className="text-lg font-bold text-slate-900 text-center">Paso 1: Platícame un poco de ti</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-black text-slate-400 uppercase mb-2">Tu Nombre Completo</label>
                    <input 
                      type="text" 
                      placeholder="Ej: Laura Juárez"
                      value={cotizadorData.nombre}
                      onChange={(e) => setCotizadorData({...cotizadorData, nombre: e.target.value})}
                      className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-sm focus:outline-none focus:border-orange-500"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-black text-slate-400 uppercase mb-2">¿Qué edad tienes?</label>
                    <input 
                      type="number" 
                      placeholder="Ej: 32"
                      value={cotizadorData.edad}
                      onChange={(e) => setCotizadorData({...cotizadorData, edad: e.target.value})}
                      className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-sm focus:outline-none focus:border-orange-500"
                    />
                  </div>
                </div>
                <button 
                  onClick={() => {
                    if(!cotizadorData.nombre || !cotizadorData.edad) {
                      setNotificationMsg("Por favor, llena tu nombre y edad para continuar.");
                      setShowNotification(true);
                      return;
                    }
                    setCotizadorStep(2);
                  }}
                  className="w-full bg-slate-900 hover:bg-slate-800 text-white font-extrabold py-3.5 rounded-xl text-sm transition-all"
                >
                  Continuar
                </button>
              </div>
            )}

            {/* Step 2: Prioridad */}
            {cotizadorStep === 2 && (
              <div className="space-y-6 animate-in fade-in duration-200">
                <h3 className="text-lg font-bold text-slate-900 text-center">Paso 2: ¿Cuál es tu objetivo financiero primordial hoy?</h3>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  {[
                    { key: "Impuestos", text: "Ahorrar y Deducir Impuestos (SAT)" },
                    { key: "Salud", text: "Proteger la Salud Familiar (Gastos Médicos)" },
                    { key: "Retiro", text: "Asegurar un Retiro Digno (PPR)" }
                  ].map((item) => (
                    <button 
                      key={item.key}
                      onClick={() => setCotizadorData({...cotizadorData, prioridad: item.text})}
                      className={`p-4 border rounded-2xl text-xs font-bold text-center transition-all ${
                        cotizadorData.prioridad === item.text 
                          ? 'border-orange-500 bg-orange-50 text-orange-950' 
                          : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100'
                      }`}
                    >
                      {item.text}
                    </button>
                  ))}
                </div>
                <div className="flex gap-3">
                  <button onClick={() => setCotizadorStep(1)} className="flex-1 bg-slate-100 text-slate-600 font-bold py-3 rounded-xl text-xs">Atrás</button>
                  <button 
                    onClick={() => {
                      if(!cotizadorData.prioridad) {
                        setNotificationMsg("Por favor, selecciona una prioridad.");
                        setShowNotification(true);
                        return;
                      }
                      setCotizadorStep(3);
                    }}
                    className="flex-1 bg-slate-900 text-white font-bold py-3 rounded-xl text-xs"
                  >
                    Siguiente
                  </button>
                </div>
              </div>
            )}

            {/* Step 3: Presupuesto y Enviar */}
            {cotizadorStep === 3 && (
              <div className="space-y-6 animate-in fade-in duration-200">
                <h3 className="text-lg font-bold text-slate-900 text-center">Paso 3: ¿Cuánto estimas poder destinar al mes a tu protección?</h3>
                <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
                  {["$1,500 - $3,000 MXN", "$3,000 - $5,000 MXN", "$5,000 - $8,000 MXN", "Más de $8,000 MXN"].map((p) => (
                    <button 
                      key={p}
                      onClick={() => setCotizadorData({...cotizadorData, presupuesto: p})}
                      className={`p-3 border rounded-xl text-[11px] font-bold text-center transition-all ${
                        cotizadorData.presupuesto === p 
                          ? 'border-orange-500 bg-orange-50 text-orange-950' 
                          : 'border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100'
                      }`}
                    >
                      {p}
                    </button>
                  ))}
                </div>

                <div className="flex gap-3">
                  <button onClick={() => setCotizadorStep(2)} className="flex-1 bg-slate-100 text-slate-600 font-bold py-3 rounded-xl text-xs">Atrás</button>
                  <a 
                    href={getCotizacionWALink()}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-1 bg-green-500 hover:bg-green-600 text-white font-extrabold py-3.5 rounded-xl text-xs text-center flex items-center justify-center space-x-2"
                  >
                    <PhoneIcon className="w-4 h-4" />
                    <span>Enviar a WhatsApp</span>
                  </a>
                </div>
                <div className="text-center">
                  <button 
                    onClick={() => {
                      setCotizadorStep(1);
                      setCotizadorData({nombre: "", edad: "", prioridad: "", presupuesto: ""});
                    }}
                    className="text-[10px] text-slate-400 underline"
                  >
                    Reiniciar Cotizador
                  </button>
                </div>
              </div>
            )}

          </div>

        </div>
      </section>

      {/* SECCIÓN CALENDARIO INTERACTIVO */}
      <section id="calendario" className="py-16 md:py-24 bg-slate-100 border-t border-b border-slate-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            {/* Texto Calendario */}
            <div className="lg:col-span-5 space-y-6 text-center lg:text-left">
              <span className="text-xs font-black text-orange-600 uppercase tracking-widest bg-orange-100 px-3.5 py-1.5 rounded-full inline-block">
                Sincronización Inmediata
              </span>
              <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight">
                Reserva una Sesión Informativa de 15 Minutos
              </h2>
              <p className="text-slate-600 leading-relaxed text-sm md:text-base">
                ¿Tienes dudas sobre cómo funciona la deducibilidad de tu PPR? ¿O qué nivel de hospitales te conviene elegir en tu seguro de Gastos Médicos? Agenda una sesión gratuita directamente en mi calendario virtual.
              </p>

              <div className="space-y-3 pt-2">
                <div className="flex items-center space-x-3 justify-center lg:justify-start text-xs font-bold text-slate-700">
                  <CheckIcon className="w-5 h-5 text-orange-500" />
                  <span>Sin costo y sin compromiso comercial</span>
                </div>
                <div className="flex items-center space-x-3 justify-center lg:justify-start text-xs font-bold text-slate-700">
                  <CheckIcon className="w-5 h-5 text-orange-500" />
                  <span>Llamada de voz o reunión en Zoom</span>
                </div>
                <div className="flex items-center space-x-3 justify-center lg:justify-start text-xs font-bold text-slate-700">
                  <CheckIcon className="w-5 h-5 text-orange-500" />
                  <span>Análisis de pólizas vigentes gratis</span>
                </div>
              </div>

              {/* Enlace directo a Calendly Real */}
              <div className="pt-4">
                <a 
                  href={CALENDLY_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-xs font-black uppercase text-slate-900 tracking-widest border-b-2 border-orange-500 pb-1 hover:text-orange-600 transition-colors inline-flex items-center space-x-2"
                >
                  <span>Abrir mi Calendly Tradicional</span>
                  <span>→</span>
                </a>
              </div>
            </div>

            {/* Formulario Widget Interactivos */}
            <div className="lg:col-span-7 bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-200">
              
              {!appointmentBooked ? (
                <form onSubmit={handleAppointmentSubmit} className="space-y-4">
                  <div className="text-center lg:text-left mb-4">
                    <h3 className="text-lg font-bold text-slate-900">Agenda Express de Asesoría</h3>
                    <p className="text-xs text-slate-500 mt-1">Selecciona el espacio de tiempo que mejor te acomode.</p>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-black text-slate-400 uppercase mb-2">Selecciona la Fecha</label>
                      <input 
                        type="date" 
                        min={new Date().toISOString().split('T')[0]}
                        value={appointment.date}
                        onChange={(e) => setAppointment({...appointment, date: e.target.value})}
                        className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-orange-500 font-semibold"
                        required
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-black text-slate-400 uppercase mb-2">Selecciona el Horario</label>
                      <select 
                        value={appointment.time}
                        onChange={(e) => setAppointment({...appointment, time: e.target.value})}
                        className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-orange-500 font-semibold"
                        required
                      >
                        <option value="">-- Elige horario --</option>
                        <option value="10:00 AM">10:00 AM (Hora Pacífico)</option>
                        <option value="11:30 AM">11:30 AM (Hora Pacífico)</option>
                        <option value="01:00 PM">01:00 PM (Hora Pacífico)</option>
                        <option value="04:00 PM">04:00 PM (Hora Pacífico)</option>
                        <option value="05:30 PM">05:30 PM (Hora Pacífico)</option>
                      </select>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div>
                      <label className="block text-[10px] font-black text-slate-400 uppercase mb-2">Nombre Completo</label>
                      <input 
                        type="text" 
                        placeholder="Ej: David L. Juárez"
                        value={appointment.name}
                        onChange={(e) => setAppointment({...appointment, name: e.target.value})}
                        className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-orange-500"
                        required
                      />
                    </div>
                    
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase mb-2">Número de WhatsApp</label>
                        <input 
                          type="tel" 
                          placeholder="Ej: 646 123 4567"
                          value={appointment.phone}
                          onChange={(e) => setAppointment({...appointment, phone: e.target.value})}
                          className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-orange-500"
                          required
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-black text-slate-400 uppercase mb-2">Ramo de Interés</label>
                        <select 
                          value={appointment.service}
                          onChange={(e) => setAppointment({...appointment, service: e.target.value})}
                          className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-orange-500 font-semibold"
                        >
                          <option value="Retiro PPR">Retiro PPR 💸</option>
                          <option value="Gastos Médicos Mayores">Gastos Médicos Mayores 🏥</option>
                          <option value="Estrategias de Ahorro">Estrategias de Ahorro 💵</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <button 
                    type="submit"
                    className="w-full bg-orange-500 hover:bg-orange-600 text-white font-extrabold py-3.5 rounded-xl text-xs transition-all tracking-wider uppercase shadow-lg shadow-orange-500/15"
                  >
                    Confirmar Fecha y Hora
                  </button>
                </form>
              ) : (
                <div className="text-center py-8 space-y-6 animate-in fade-in duration-300">
                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto text-green-600 text-3xl">
                    ✓
                  </div>
                  <div>
                    <h3 className="text-xl font-black text-slate-900">¡Tu horario ha sido pre-reservado!</h3>
                    <p className="text-xs text-slate-500 mt-2 max-w-sm mx-auto">
                      Para que tu cita quede debidamente agendada en la agenda del celular de Luis, por favor confirma tu reserva enviándole el mensaje directo de confirmación por WhatsApp.
                    </p>
                  </div>

                  <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 max-w-xs mx-auto text-xs space-y-1">
                    <p className="font-extrabold text-slate-800">Cita: Asesoría de Protección</p>
                    <p className="text-slate-600">Fecha: <span className="font-bold">{appointment.date}</span></p>
                    <p className="text-slate-600">Horario: <span className="font-bold">{appointment.time}</span></p>
                    <p className="text-slate-600">Servicio: <span className="font-bold">{appointment.service}</span></p>
                  </div>

                  <div className="flex flex-col sm:flex-row justify-center gap-2">
                    <a 
                      href={getAppointmentWALink()}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="bg-green-500 hover:bg-green-600 text-white font-extrabold px-6 py-3 rounded-xl text-xs flex items-center justify-center space-x-2 shadow-md"
                    >
                      <PhoneIcon className="w-4 h-4" />
                      <span>Enviar por WhatsApp</span>
                    </a>
                    <button 
                      onClick={() => setAppointmentBooked(false)}
                      className="bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold px-6 py-3 rounded-xl text-xs"
                    >
                      Modificar Datos
                    </button>
                  </div>
                </div>
              )}

            </div>

          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-slate-900 text-slate-400 py-12 md:py-16 text-xs border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 mb-8 pb-8 border-b border-slate-800">
            
            <div className="md:col-span-5 space-y-4">
              <div className="flex items-center space-x-2 text-white">
                <div className="bg-white text-slate-900 px-2 py-0.5 rounded font-black text-[10px]">GNP</div>
                <span className="font-extrabold text-sm tracking-tight">LUIS JUÁREZ / ASESOR EN PROTECCIÓN FINANCIERA</span>
              </div>
              <p className="max-w-sm text-slate-500">
                Página web informativa gestionada de forma directa por el Agente de Seguros de GNP certificado, Luis Alberto Juárez. "Vivir es un increíble documento, asegúrate de disfrutarlo."
              </p>
              <p className="text-[10px] text-slate-600 leading-normal">
                Todas las emisiones de póliza, cotizaciones y cobros se realizan bajo estrictos lineamientos oficiales autorizados por Grupo Nacional Provincial S.A.B. y la CNSF.
              </p>
            </div>

            <div className="md:col-span-4 space-y-3">
              <h4 className="text-white font-bold text-xs uppercase tracking-wider">Contacto Oficial</h4>
              <ul className="space-y-2 text-slate-500">
                <li>📍 Ensenada / Tijuana / Baja California</li>
                <li>✉️ contacto@tuasesorgnp.com</li>
                <li>📞 WhatsApp: +52 646 276 0036</li>
                <li>📸 Instagram: @luisjuarez_tuasesorgnp</li>
              </ul>
            </div>

            <div className="md:col-span-3 space-y-3">
              <h4 className="text-white font-bold text-xs uppercase tracking-wider">Servicios GNP</h4>
              <ul className="space-y-2 text-slate-500">
                <li><a href="#soluciones" className="hover:text-white">Estrategia de Retiro PPR</a></li>
                <li><a href="#soluciones" className="hover:text-white">Gastos Médicos Mayores</a></li>
                <li><a href="#soluciones" className="hover:text-white">Estrategia de Ahorro</a></li>
                <li><a href="#soluciones" className="hover:text-white">Seguro de Auto y Vida</a></li>
              </ul>
            </div>

          </div>

          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-[10px] text-slate-600">
            <p>© {new Date().getFullYear()} tuasesorgnp.com. Todos los derechos reservados.</p>
            <div className="flex space-x-4">
              <a href="#privacidad" className="hover:text-slate-400">Aviso de Privacidad</a>
              <span>•</span>
              <a href="#terminos" className="hover:text-slate-400">Términos de Intermediación</a>
            </div>
          </div>

        </div>
      </footer>

      {/* CHAT FLOTANTE DE WHATSAPP (ESTILO LUIS JUÁREZ) */}
      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
        
        {chatOpened && (
          <div className="bg-white rounded-2xl shadow-2xl border border-slate-100 w-72 mb-3 p-4 animate-in slide-in-from-bottom duration-300">
            <div className="flex items-center justify-between border-b border-slate-100 pb-2 mb-3">
              <div className="flex items-center space-x-2">
                <div className="relative w-8 h-8 bg-slate-900 rounded-full flex items-center justify-center text-white text-xs font-bold border border-orange-500">
                  LJ
                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border border-white"></span>
                </div>
                <div>
                  <span className="font-extrabold text-xs text-slate-900 block">Luis Juárez</span>
                  <span className="text-[10px] text-green-500 font-semibold block">Activo en WhatsApp</span>
                </div>
              </div>
              <button 
                onClick={() => setChatOpened(false)}
                className="text-slate-400 hover:text-slate-600 text-sm font-bold"
              >
                ✕
              </button>
            </div>

            <div className="bg-slate-50 p-3 rounded-xl mb-3 text-[11px] text-slate-700 leading-relaxed font-semibold">
              ¡Hola! Soy Luis Juárez. Platiquemos sobre cómo proteger tus sueños hoy. Elige qué ramo te interesa platicar:
            </div>

            <div className="space-y-1.5">
              {[
                { label: "Estrategias de Retiro PPR 💸", msg: "Hola Luis Juárez, quiero cotizar un plan de Retiro PPR de GNP." },
                { label: "Gastos Médicos Mayores 🏥", msg: "Hola Luis, me interesa cotizar un Seguro de Gastos Médicos." },
                { label: "Estrategias de Ahorro 💵", msg: "Hola Luis, me interesa platicar sobre las estrategias de ahorro." }
              ].map((item, idx) => (
                <a 
                  key={idx}
                  href={makeWhatsAppLink(item.msg)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="block bg-slate-100 hover:bg-orange-50 text-slate-800 hover:text-orange-950 p-2.5 rounded-lg text-left text-xs font-extrabold transition-all border border-transparent hover:border-orange-200"
                >
                  👉 {item.label}
                </a>
              ))}
            </div>
          </div>
        )}

        <button 
          onClick={() => setChatOpened(!chatOpened)}
          className="bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-2xl flex items-center justify-center transition-all transform hover:scale-110 relative"
        >
          <svg className="w-8 h-8 fill-current" viewBox="0 0 24 24">
            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.513 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.42 9.863-9.864.001-2.63-1.019-5.101-2.875-6.958C16.604 1.926 14.133.916 11.501.916 6.062.916 1.637 5.337 1.634 10.781c-.001 1.702.453 3.361 1.314 4.816L1.93 21.17l5.717-1.498z" />
          </svg>
          {!chatOpened && (
            <span className="absolute -top-1 -right-1 w-5 h-5 bg-orange-500 text-[10px] font-black text-white rounded-full flex items-center justify-center animate-bounce">
              1
            </span>
          )}
        </button>

      </div>

    </div>
  );
}