import React, { useState } from 'react';
import { 
  Shield, 
  PhoneOff, 
  FileText, 
  Scale, 
  CheckCircle2, 
  ArrowRight, 
  ChevronDown, 
  ChevronUp,
  Phone,
  Lock,
  UserCheck,
  AlertCircle
} from 'lucide-react';

// --- COMPONENTES REUTILIZABLES ---

const Button = ({ children, variant = 'primary', className = '' }) => {
  const baseStyle = "inline-flex items-center justify-center px-6 py-3 font-semibold rounded-md transition-all duration-300";
  const variants = {
    primary: "bg-amber-500 text-slate-900 hover:bg-amber-600 shadow-md",
    secondary: "bg-white text-slate-900 border border-slate-200 hover:bg-slate-50",
    outline: "bg-transparent border-2 border-white text-white hover:bg-white/10"
  };
  
  return (
    <button className={`${baseStyle} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const AccordionItem = ({ title, content }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border-b border-slate-200 last:border-0">
      <button 
        className="w-full flex justify-between items-center py-5 text-left focus:outline-none"
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className="font-semibold text-slate-800 text-lg pr-4">{title}</span>
        {isOpen ? <ChevronUp className="text-amber-500 flex-shrink-0" /> : <ChevronDown className="text-slate-400 flex-shrink-0" />}
      </button>
      <div className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-96 pb-5' : 'max-h-0'}`}>
        <p className="text-slate-600 leading-relaxed">{content}</p>
      </div>
    </div>
  );
};

// --- SECCIONES DE LA PÁGINA ---

const Header = () => (
  <header className="sticky top-0 w-full bg-white border-b border-slate-100 z-50 shadow-sm">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="flex justify-between items-center h-20">
        {/* Logo */}
        <div className="flex items-center gap-2">
          <Shield className="h-8 w-8 text-slate-900" />
          <span className="font-bold text-2xl tracking-tight text-slate-900">AVJ<span className="text-amber-500">Asesores</span></span>
        </div>
        
        {/* Teléfono Desktop */}
        <div className="hidden md:flex items-center gap-2 text-slate-600 font-medium">
          <span className="text-sm">¿Sufres acoso comercial? Llámanos:</span>
          <a href="tel:900000000" className="text-slate-900 font-bold text-lg flex items-center gap-1 hover:text-amber-600 transition-colors">
            <Phone className="h-5 w-5" /> 900 123 456
          </a>
        </div>

        {/* CTA */}
        <Button className="hidden sm:flex">Solicitar estudio</Button>
        <button className="sm:hidden p-2 text-slate-600"><Phone className="h-6 w-6" /></button>
      </div>
    </div>
  </header>
);

const Hero = () => (
  <section className="bg-slate-900 text-white pt-20 pb-24 lg:pt-32 lg:pb-40 relative overflow-hidden">
    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-amber-500 via-slate-900 to-slate-900"></div>
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div className="max-w-3xl">
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
          Defendemos tus derechos frente a los abusos comerciales.
        </h1>
        <p className="text-lg md:text-xl text-slate-300 mb-8 leading-relaxed">
          Asesoramiento jurídico continuado para frenar las presiones de venta, reclamar lo que es tuyo y recuperar la tranquilidad en tu propio hogar.
        </p>
        
        <ul className="space-y-4 mb-10 text-slate-200">
          <li className="flex items-center gap-3">
            <CheckCircle2 className="h-6 w-6 text-amber-500 flex-shrink-0" />
            <span className="text-lg">Departamento jurídico propio a tu disposición.</span>
          </li>
          <li className="flex items-center gap-3">
            <CheckCircle2 className="h-6 w-6 text-amber-500 flex-shrink-0" />
            <span className="text-lg">Defensa activa frente a llamadas y visitas no deseadas.</span>
          </li>
          <li className="flex items-center gap-3">
            <CheckCircle2 className="h-6 w-6 text-amber-500 flex-shrink-0" />
            <span className="text-lg">Equipamiento de protección para el hogar incluido.</span>
          </li>
        </ul>

        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
          <Button className="w-full sm:w-auto text-lg py-4 px-8">Solicitar estudio de mi caso</Button>
          <Button variant="outline" className="w-full sm:w-auto text-lg py-4 px-8">Ver planes de protección</Button>
        </div>
        <p className="mt-6 text-sm text-slate-400 flex items-center gap-2">
          <Shield className="h-4 w-4" /> Evaluamos tu situación legal sin compromiso inicial.
        </p>
      </div>
    </div>
  </section>
);

const TargetAudience = () => (
  <section className="py-20 bg-slate-50">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto text-center mb-16">
        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Estás en el lugar adecuado si necesitas recuperar el control.</h2>
        <p className="text-lg text-slate-600 leading-relaxed">
          No es tu culpa sentirte abrumado. Las tácticas de venta directa y el marketing telefónico están diseñados para agotar tu paciencia. En AVJ Asesores ayudamos a personas que:
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
        {[
          "Sienten presión por parte de comerciales que acuden a su domicilio.",
          "Han firmado contratos o compromisos que no entienden del todo.",
          "Están agotadas de recibir llamadas comerciales a todas horas.",
          "Quieren reclamar un abuso pero se enfrentan a un muro de contestadores y excusas.",
          "Desean proteger a familiares mayores frente a posibles engaños."
        ].map((item, index) => (
          <div key={index} className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-start gap-4">
            <AlertCircle className="h-6 w-6 text-amber-500 flex-shrink-0 mt-1" />
            <p className="text-slate-700 font-medium">{item}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ProblemsResolved = () => (
  <section className="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">
        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">Lo que las empresas complican, nosotros lo resolvemos.</h2>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        {[
          { icon: PhoneOff, title: "Llamadas insistentes", desc: "Exigimos el respeto a tu privacidad y el cese de comunicaciones comerciales no consentidas." },
          { icon: FileText, title: "Contratos abusivos", desc: "Revisamos la letra pequeña, identificamos cláusulas nulas y te ayudamos a desvincularte." },
          { icon: Scale, title: "Reclamaciones estancadas", desc: "Tomamos el control de tus quejas para que dejen de ignorarte y te den una solución real." },
          { icon: Shield, title: "Sensación de indefensión", desc: "Te damos el respaldo de un equipo jurídico para que nunca más tengas que enfrentarte solo a una gran empresa." }
        ].map((item, index) => (
          <div key={index} className="text-center group">
            <div className="mx-auto w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-100 transition-colors">
              <item.icon className="h-8 w-8 text-slate-900 group-hover:text-amber-600" />
            </div>
            <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
            <p className="text-slate-600 leading-relaxed">{item.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HowWeHelp = () => (
  <section className="py-24 bg-slate-900 text-white">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="flex flex-col lg:flex-row gap-16 items-center">
        <div className="lg:w-1/3">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">Tu escudo legal, paso a paso y siempre a tu lado.</h2>
          <p className="text-slate-300 text-lg mb-8 leading-relaxed">
            Hemos diseñado una metodología donde traducimos lo legal a lo práctico. Tú nos cuentas el problema, nosotros ejecutamos la solución.
          </p>
          <Button>Empezar ahora</Button>
        </div>
        
        <div className="lg:w-2/3 grid grid-cols-1 sm:grid-cols-2 gap-6">
          {[
            { step: "01", title: "Estudiamos tu situación", desc: "Analizamos tus contratos, recibos o las presiones que estás sufriendo para trazar un plan de acción." },
            { step: "02", title: "Te orientamos", desc: "Te explicamos tus derechos con palabras claras, sin rodeos legales ni tecnicismos." },
            { step: "03", title: "Te defendemos", desc: "Redactamos y presentamos las reclamaciones formales necesarias ante las empresas infractoras." },
            { step: "04", title: "Te acompañamos", desc: "Tienes a nuestro departamento jurídico disponible mes a mes para cualquier nueva duda o incidencia." },
            { step: "05", title: "Protegemos tu entorno", desc: "Reforzamos tu seguridad física instalando dispositivos disuasorios en tu hogar, según el plan.", className: "sm:col-span-2 border-amber-500 border" }
          ].map((item, index) => (
            <div key={index} className={`bg-slate-800 p-8 rounded-xl ${item.className || ''}`}>
              <span className="text-amber-500 font-mono text-xl font-bold mb-4 block">{item.step}.</span>
              <h3 className="text-xl font-bold mb-3">{item.title}</h3>
              <p className="text-slate-400">{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Authority = () => (
  <section className="py-20 bg-slate-50">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="grid grid-cols-1 lg:grid-cols-2">
          <div className="p-10 lg:p-16 flex flex-col justify-center">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">La ley está de tu lado. Nosotros nos encargamos de que se cumpla.</h2>
            <p className="text-lg text-slate-600 mb-8 leading-relaxed">
              En España, la legislación ampara al consumidor frente al acoso telefónico y las prácticas de venta agresiva. Sin embargo, hacer valer esos derechos requiere tiempo, conocimientos y firmeza.
            </p>
            <ul className="space-y-6">
              <li className="flex items-start gap-4">
                <div className="bg-blue-50 p-2 rounded-lg mt-1"><UserCheck className="h-6 w-6 text-slate-900" /></div>
                <div>
                  <h4 className="font-bold text-slate-900">Especialización</h4>
                  <p className="text-slate-600">No hacemos de todo; somos expertos en consumo y malas prácticas comerciales.</p>
                </div>
              </li>
              <li className="flex items-start gap-4">
                <div className="bg-blue-50 p-2 rounded-lg mt-1"><Scale className="h-6 w-6 text-slate-900" /></div>
                <div>
                  <h4 className="font-bold text-slate-900">Departamento Jurídico Propio</h4>
                  <p className="text-slate-600">No subcontratamos tu defensa. Nuestros especialistas gestionan tu caso de principio a fin.</p>
                </div>
              </li>
            </ul>
          </div>
          <div className="bg-slate-200 min-h-[300px] lg:min-h-full flex items-center justify-center relative p-10">
             {/* Placeholder for an image in a real project - Using a clean graphic block instead */}
             <div className="absolute inset-0 bg-slate-900 opacity-5"></div>
             <Shield className="h-48 w-48 text-slate-300 relative z-10" strokeWidth={1} />
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section className="py-24 bg-white" id="planes">
    <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">
        <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Planes de asesoramiento y defensa continuada.</h2>
        <p className="text-xl text-slate-600">Elige el nivel de protección que tu tranquilidad y la de los tuyos necesita.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
        {/* Plan 1 */}
        <div className="border border-slate-200 rounded-2xl p-8 lg:p-10 flex flex-col relative bg-white">
          <h3 className="text-2xl font-bold text-slate-900 mb-2">Plan Tranquilidad Esencial</h3>
          <p className="text-slate-600 mb-6 min-h-[48px]">Defensa jurídica permanente con control de acceso a tu hogar.</p>
          <div className="mb-8">
            <span className="text-5xl font-bold text-slate-900">39,90€</span>
            <span className="text-slate-500 font-medium"> / mes</span>
          </div>
          <ul className="space-y-4 mb-8 flex-grow">
            {[
              "Acceso ilimitado a nuestro departamento jurídico.",
              "Revisión de contratos y documentos comerciales.",
              "Gestión de reclamaciones por abusos en ventas.",
              "Mirilla inteligente incluida con tu alta.",
              "Instalación a domicilio sin coste adicional."
            ].map((feature, i) => (
              <li key={i} className="flex items-start gap-3">
                <CheckCircle2 className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
                <span className="text-slate-700">{feature}</span>
              </li>
            ))}
          </ul>
          <div className="mt-auto">
            <Button variant="secondary" className="w-full mb-4 border-slate-300">Solicitar Plan Esencial</Button>
            <p className="text-xs text-slate-500 leading-relaxed text-center">
              Servicio con un compromiso mínimo de 36 meses asociado a la activación de tu defensa legal y la instalación del dispositivo en tu domicilio.
            </p>
          </div>
        </div>

        {/* Plan 2 */}
        <div className="border-2 border-amber-500 rounded-2xl p-8 lg:p-10 flex flex-col relative bg-slate-900 text-white shadow-xl transform md:-translate-y-4">
          <div className="absolute top-0 right-0 bg-amber-500 text-slate-900 text-sm font-bold px-4 py-1 rounded-bl-lg rounded-tr-lg">
            MÁS ELEGIDO
          </div>
          <h3 className="text-2xl font-bold mb-2">Plan Tranquilidad Total</h3>
          <p className="text-slate-300 mb-6 min-h-[48px]">Nuestra máxima protección legal, bloqueando también el acoso en tu puerta y teléfono.</p>
          <div className="mb-8">
            <span className="text-5xl font-bold">49,90€</span>
            <span className="text-slate-400 font-medium"> / mes</span>
          </div>
          <ul className="space-y-4 mb-8 flex-grow">
            {[
              "Todo lo incluido en el Plan Tranquilidad Esencial.",
              "Trato prioritario en el estudio de viabilidad.",
              "Sistema de bloqueo de llamadas spam para teléfono fijo.",
              "Instalación completa de ambos dispositivos sin coste adicional."
            ].map((feature, i) => (
              <li key={i} className="flex items-start gap-3">
                <CheckCircle2 className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
                <span className="text-slate-200">{feature}</span>
              </li>
            ))}
          </ul>
          <div className="mt-auto">
            <Button className="w-full mb-4">Solicitar Plan Total</Button>
            <p className="text-xs text-slate-400 leading-relaxed text-center">
              Servicio con un compromiso mínimo de 36 meses asociado a la activación de tu defensa legal y la instalación del equipamiento en tu domicilio.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ComparisonTable = () => (
  <section className="py-16 bg-slate-50 hidden md:block">
    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <h3 className="text-2xl font-bold text-center text-slate-900 mb-10">Comparativa detallada</h3>
      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-slate-100">
              <th className="py-4 px-6 font-bold text-slate-900 border-b border-slate-200">Coberturas y Servicios</th>
              <th className="py-4 px-6 font-bold text-center text-slate-900 border-b border-slate-200 w-1/4">Plan Esencial</th>
              <th className="py-4 px-6 font-bold text-center text-amber-600 border-b border-slate-200 w-1/4">Plan Total</th>
            </tr>
          </thead>
          <tbody className="text-slate-700">
            {[
              ["Asesoramiento jurídico ilimitado", true, true],
              ["Revisión de contratos y recibos", true, true],
              ["Gestión de reclamaciones y bajas", true, true],
              ["Mirilla inteligente instalada en domicilio", true, true],
              ["Sistema bloqueador de llamadas spam", false, true],
              ["Prioridad en atención de casos", false, true],
            ].map((row, i) => (
              <tr key={i} className="border-b border-slate-100 last:border-0 hover:bg-slate-50">
                <td className="py-4 px-6 font-medium">{row[0]}</td>
                <td className="py-4 px-6 text-center">
                  {row[1] ? <CheckCircle2 className="h-5 w-5 text-amber-500 mx-auto" /> : <span className="text-slate-300">-</span>}
                </td>
                <td className="py-4 px-6 text-center bg-amber-50/30">
                  {row[2] ? <CheckCircle2 className="h-5 w-5 text-amber-500 mx-auto" /> : <span className="text-slate-300">-</span>}
                </td>
              </tr>
            ))}
            <tr className="bg-slate-50 font-bold">
              <td className="py-4 px-6 text-right">Cuota mensual</td>
              <td className="py-4 px-6 text-center text-lg">39,90 €</td>
              <td className="py-4 px-6 text-center text-lg text-slate-900">49,90 €</td>
            </tr>
            <tr className="text-sm text-slate-500">
              <td className="py-3 px-6 text-right">Compromiso del servicio</td>
              <td className="py-3 px-6 text-center">36 meses</td>
              <td className="py-3 px-6 text-center">36 meses</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
);

const ObjectionsAndFAQ = () => (
  <section className="py-24 bg-white">
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      
      {/* Objeciones */}
      <div className="mb-20">
        <h2 className="text-3xl font-bold text-slate-900 mb-2">Sabemos lo que estás pensando.</h2>
        <p className="text-xl text-slate-600 mb-10">Hablemos claro.</p>
        
        <div className="space-y-2">
          <AccordionItem 
            title='"No sé si mi caso concreto tiene recorrido."' 
            content="No te preocupes, para eso estamos. Antes de que asumas ningún compromiso, nuestro equipo valorará tu situación sin coste. Si no podemos ayudarte, te lo diremos con total honestidad." 
          />
          <AccordionItem 
            title='"No quiero complicarme con papeleos ni trámites."' 
            content="Ese es exactamente nuestro trabajo. Tú nos aportas la información inicial y nosotros nos encargamos de redactar los escritos, enviarlos y hacer el seguimiento." 
          />
          <AccordionItem 
            title='"No entiendo bien qué incluye el servicio."' 
            content="Incluye tener a un equipo jurídico a tu disposición para revisar cualquier contrato antes de firmar, y para reclamar si ya has firmado algo injusto. Además, reforzamos tu puerta (y tu teléfono fijo, según el plan) para que los comerciales no puedan molestarte." 
          />
          <AccordionItem 
            title='"Tengo miedo de que me sigan molestando."' 
            content="Con nosotros a tu lado, la situación cambia. Exigiremos formalmente la eliminación de tus datos de sus listas comerciales bajo apercibimiento legal ante la Agencia Española de Protección de Datos (AEPD)." 
          />
          <AccordionItem 
            title='"No sé qué plan me conviene más."' 
            content="Si tu mayor molestia son las visitas a casa, el Plan Esencial es suficiente. Si además recibes llamadas constantes al fijo, el Plan Total es la mejor opción. Habla con nosotros y te orientaremos." 
          />
        </div>
      </div>

      {/* FAQ */}
      <div>
        <h2 className="text-3xl font-bold text-slate-900 mb-10">Preguntas Frecuentes</h2>
        <div className="space-y-2 bg-slate-50 p-6 rounded-2xl border border-slate-200">
          <AccordionItem 
            title="¿Qué significa el compromiso de 36 meses?" 
            content="Al darte de alta, movilizamos a nuestro departamento jurídico, abrimos tu expediente y enviamos a un instalador profesional con los dispositivos. El compromiso de 36 meses nos permite absorber estos costes iniciales y garantizarte una tarifa plana y asequible a largo plazo." 
          />
          <AccordionItem 
            title="¿La instalación de los dispositivos tiene algún coste extra?" 
            content="No. El desplazamiento del técnico y la instalación en tu domicilio están incluidos en el alta de cualquiera de los planes." 
          />
          <AccordionItem 
            title="¿Puedo consultaros antes de firmar un contrato con otra empresa?" 
            content="Por supuesto. Es una de nuestras mayores recomendaciones. Antes de cambiar de compañía de luz, gas o telefonía, envíanos la propuesta y nuestro equipo revisará la letra pequeña por ti." 
          />
          <AccordionItem 
            title="¿Garantizáis el resultado de una reclamación?" 
            content="Ningún profesional serio puede garantizar el 100% de éxito en un procedimiento. Lo que sí garantizamos es que defenderemos tus derechos basándonos en la normativa vigente, agotando todas las vías extrajudiciales de reclamación." 
          />
        </div>
      </div>

    </div>
  </section>
);

const CTASection = () => (
  <section className="py-20 bg-amber-500 text-slate-900 text-center">
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <h2 className="text-3xl md:text-5xl font-bold mb-6">Tu tranquilidad no se negocia.</h2>
      <p className="text-xl md:text-2xl font-medium mb-10 opacity-90">Di basta al acoso comercial. Nosotros nos encargamos del resto.</p>
      <div className="flex flex-col sm:flex-row justify-center gap-4">
        <Button className="bg-slate-900 text-white hover:bg-slate-800 text-lg py-4 px-8">Solicitar estudio de viabilidad</Button>
        <Button className="bg-transparent border-2 border-slate-900 text-slate-900 hover:bg-slate-900/10 text-lg py-4 px-8">Ver planes de defensa</Button>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-slate-950 text-slate-400 py-12 border-t border-slate-800">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
      <div className="md:col-span-2">
        <div className="flex items-center gap-2 mb-4">
          <Shield className="h-6 w-6 text-slate-500" />
          <span className="font-bold text-xl tracking-tight text-white">AVJ<span className="text-amber-500">Asesores</span></span>
        </div>
        <p className="text-sm max-w-sm mb-6">
          Defensa jurídica especializada para proteger tus derechos como consumidor y blindar tu tranquilidad en el hogar.
        </p>
      </div>
      
      <div>
        <h4 className="text-white font-semibold mb-4">Servicios</h4>
        <ul className="space-y-2 text-sm">
          <li><a href="#" className="hover:text-amber-500 transition-colors">Protección frente a spam</a></li>
          <li><a href="#" className="hover:text-amber-500 transition-colors">Reclamaciones de consumo</a></li>
          <li><a href="#planes" className="hover:text-amber-500 transition-colors">Ver Planes</a></li>
        </ul>
      </div>

      <div>
        <h4 className="text-white font-semibold mb-4">Legal</h4>
        <ul className="space-y-2 text-sm">
          <li><a href="#" className="hover:text-amber-500 transition-colors">Aviso Legal</a></li>
          <li><a href="#" className="hover:text-amber-500 transition-colors">Política de Privacidad</a></li>
          <li><a href="#" className="hover:text-amber-500 transition-colors">Política de Cookies</a></li>
          <li><a href="#" className="hover:text-amber-500 transition-colors">Condiciones Generales</a></li>
        </ul>
      </div>
    </div>
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-800 text-sm text-center">
      <p>&copy; {new Date().getFullYear()} AVJ Asesores. Todos los derechos reservados.</p>
    </div>
  </footer>
);

export default function App() {
  return (
    <div className="min-h-screen bg-white font-sans selection:bg-amber-200 selection:text-slate-900">
      <Header />
      <main>
        <Hero />
        <TargetAudience />
        <ProblemsResolved />
        <HowWeHelp />
        <Authority />
        <Pricing />
        <ComparisonTable />
        <ObjectionsAndFAQ />
        <CTASection />
      </main>
      <Footer />
      
      {/* Botón flotante para móvil */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-slate-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-50">
        <Button className="w-full text-lg shadow-lg">Hablar con un asesor</Button>
      </div>
    </div>
  );
}