import React, { useState, useRef, useEffect } from 'react';
import { Play, Check, ChevronRight, BarChart3, Users, Zap, ShieldCheck, ArrowRight, MessageSquare, X, Globe, Database, Sparkles, MessageCircle, UserCheck, Megaphone, AlertCircle, HelpCircle, FileSpreadsheet } from 'lucide-react';

/* --- COMPONENTES AUXILIARES ---
*/

// Botón Principal (Pill Shape)
const Button = ({ children, variant = 'primary', className = '', icon: Icon, onClick }) => {
  const baseStyle = "inline-flex items-center justify-center px-8 py-4 rounded-full font-bold transition-all duration-300 transform hover:-translate-y-1 focus:outline-none cursor-pointer";
  
  const variants = {
    primary: "bg-[#8D1AF1] hover:bg-[#7a15d1] text-white shadow-[0_10px_25px_rgba(141,26,241,0.3)] hover:shadow-[0_15px_35px_rgba(141,26,241,0.4)]",
    secondary: "bg-white text-[#111111] border border-gray-200 hover:border-[#8D1AF1] hover:text-[#8D1AF1] shadow-sm",
    ghost: "bg-transparent text-[#4A4A4A] hover:text-[#8D1AF1]"
  };

  return (
    <button onClick={onClick} className={`${baseStyle} ${variants[variant]} ${className}`}>
      {children}
      {Icon && <Icon className="ml-2 w-5 h-5" />}
    </button>
  );
};

// Comparison Slider Component (Antes vs Después)
const ComparisonSlider = () => {
  const [sliderPosition, setSliderPosition] = useState(50);
  const containerRef = useRef(null);
  const isDragging = useRef(false);

  const handleMove = (clientX) => {
    if (containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
      const percentage = (x / rect.width) * 100;
      setSliderPosition(percentage);
    }
  };

  const onMouseDown = () => { isDragging.current = true; };
  const onMouseUp = () => { isDragging.current = false; };
  const onMouseMove = (e) => { if (isDragging.current) handleMove(e.clientX); };
  
  const onTouchMove = (e) => { handleMove(e.touches[0].clientX); };

  useEffect(() => {
    window.addEventListener('mouseup', onMouseUp);
    return () => window.removeEventListener('mouseup', onMouseUp);
  }, []);

  return (
    <div 
      ref={containerRef}
      className="relative w-full h-[500px] md:h-[600px] rounded-2xl overflow-hidden cursor-col-resize select-none shadow-[0_20px_40px_rgba(0,0,0,0.08)] border border-gray-100"
      onMouseMove={onMouseMove}
      onMouseDown={onMouseDown}
      onTouchMove={onTouchMove}
    >
      {/* CAPA FONDO (ANTES - Operación Desconectada/Manual) */}
      <div className="absolute inset-0 bg-gray-50 flex flex-col items-center justify-center p-4 md:p-8">
         <div className="absolute top-8 left-8 bg-red-100 text-red-700 px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider border border-red-200 z-10">
          Tu Operación Actual
        </div>

        <div className="flex flex-col gap-6 w-full max-w-3xl items-center opacity-90">
             {/* 1. MAPA MENTAL ROTO (Broken System) */}
            <div className="w-full bg-white border border-red-100 rounded-2xl p-4 md:p-6 flex flex-col md:flex-row items-center justify-between gap-4 shadow-sm relative overflow-hidden">
                
                {/* Step 1: Traffic (Blind Clicks) */}
                <div className="flex flex-col items-center text-center gap-2">
                    <div className="w-10 h-10 md:w-12 md:h-12 bg-gray-100 text-gray-400 rounded-xl flex items-center justify-center border border-gray-200">
                        <Megaphone size={20} />
                    </div>
                    <span className="text-[10px] md:text-xs font-bold text-gray-400 uppercase">Clics Ciegos</span>
                </div>

                {/* Broken Link */}
                <div className="flex flex-col items-center text-red-300">
                    <div className="relative">
                        <ArrowRight size={20} className="opacity-30" />
                        <X size={16} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold" />
                    </div>
                </div>

                {/* Step 2: No Filter (Direct to WA) */}
                <div className="flex flex-col items-center text-center gap-2">
                     <div className="w-10 h-10 md:w-12 md:h-12 bg-red-50 text-red-400 rounded-xl flex items-center justify-center border border-red-100">
                        <MessageSquare size={20} />
                    </div>
                    <span className="text-[10px] md:text-xs font-bold text-gray-400 uppercase">Spam/Curiosos</span>
                </div>

                {/* Broken Link */}
                <div className="flex flex-col items-center text-red-300">
                    <div className="relative">
                        <ArrowRight size={20} className="opacity-30" />
                        <X size={16} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold" />
                    </div>
                </div>

                 {/* Step 3: Manual Chaos (Excel) */}
                <div className="flex flex-col items-center text-center gap-2">
                    <div className="w-10 h-10 md:w-12 md:h-12 bg-yellow-50 text-yellow-600 rounded-xl flex items-center justify-center border border-yellow-100 relative">
                        <FileSpreadsheet size={20} />
                         <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse flex items-center justify-center text-[8px] text-white font-bold">!</div>
                    </div>
                    <span className="text-[10px] md:text-xs font-bold text-gray-400 uppercase">Seguimiento 0%</span>
                </div>

                 {/* Broken Link */}
                 <div className="flex flex-col items-center text-red-300">
                    <div className="relative">
                        <ArrowRight size={20} className="opacity-30" />
                        <X size={16} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold" />
                    </div>
                </div>

                 {/* Step 4: Owner Overwhelmed */}
                <div className="flex flex-col items-center text-center gap-2">
                    <div className="w-10 h-10 md:w-12 md:h-12 bg-gray-100 text-gray-500 rounded-xl flex items-center justify-center border border-gray-200">
                        <HelpCircle size={20} />
                    </div>
                    <span className="text-[10px] md:text-xs font-bold text-gray-400 uppercase">Sin Ventas</span>
                </div>
            </div>

            {/* 2. DASHBOARD CIEGO (Blindness) */}
            <div className="w-full max-w-lg bg-white rounded-xl shadow-sm border border-red-100 p-4 md:p-6 relative opacity-80">
                <div className="absolute -left-1 top-6 bottom-6 w-1 bg-red-300 rounded-r"></div>
                  <div className="flex justify-between items-center mb-4 md:mb-6">
                    <h4 className="font-bold text-gray-500 text-sm md:text-base">Ceguera Operativa</h4>
                    <span className="text-xs text-red-500 font-bold bg-red-50 px-2 py-1 rounded">No hay datos</span>
                  </div>
                  <div className="grid grid-cols-3 gap-2 md:gap-4 mb-4">
                    {[
                      { label: "ROAS", val: "?", color: "text-gray-300" },
                      { label: "Cierres", val: "?", color: "text-gray-300" },
                      { label: "Pérdida", val: "- ???", color: "text-red-300" }
                    ].map((stat, idx) => (
                      <div key={idx} className="bg-gray-50 p-2 md:p-3 rounded-lg text-center border border-gray-100">
                        <div className="text-[10px] text-gray-400 mb-1 uppercase tracking-wide">{stat.label}</div>
                        <div className={`text-lg md:text-xl font-bold ${stat.color}`}>{stat.val}</div>
                      </div>
                    ))}
                  </div>
                  {/* Mock Chart Lines (Flatline/Noise) */}
                  <div className="flex items-end space-x-2 h-16 md:h-20 grayscale opacity-30">
                    {[20, 15, 25, 10, 30, 15, 10].map((h, i) => (
                      <div key={i} className="flex-1 bg-gray-400 rounded-t-sm" style={{ height: `${h}%` }}></div>
                    ))}
                  </div>
            </div>

        </div>
      </div>

      {/* CAPA SUPERIOR (DESPUÉS - Infraestructura Keepscaling) */}
      <div 
        className="absolute inset-0 bg-white border-r-4 border-[#8D1AF1]"
        style={{ clipPath: `polygon(0 0, ${sliderPosition}% 0, ${sliderPosition}% 100%, 0 100%)` }}
      >
        <div className="w-full h-full bg-gradient-to-br from-white to-gray-50 p-4 md:p-8 flex flex-col items-center justify-center">
             <div className="absolute top-8 right-8 bg-green-100 text-green-700 px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider border border-green-200 z-10">
              Infraestructura Keepscaling
            </div>
            
            <div className="flex flex-col gap-6 w-full max-w-3xl items-center">
                
                {/* 1. MAPA MENTAL DEL SISTEMA (System Architecture) */}
                <div className="w-full bg-white/60 backdrop-blur-sm border border-gray-100 rounded-2xl p-4 md:p-6 flex flex-col md:flex-row items-center justify-between gap-4 shadow-sm">
                    {/* Step 1: Meta */}
                    <div className="flex flex-col items-center text-center gap-2">
                        <div className="w-10 h-10 md:w-12 md:h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center border border-blue-100 shadow-sm">
                            <Megaphone size={20} />
                        </div>
                        <span className="text-[10px] md:text-xs font-bold text-gray-500 uppercase">Tráfico</span>
                    </div>

                    <ArrowRight className="text-gray-300 hidden md:block" size={20} />
                    <div className="h-4 w-0.5 bg-gray-300 md:hidden"></div>

                    {/* Step 2: Web */}
                    <div className="flex flex-col items-center text-center gap-2">
                        <div className="w-10 h-10 md:w-12 md:h-12 bg-purple-50 text-[#8D1AF1] rounded-xl flex items-center justify-center border border-purple-100 shadow-sm">
                            <Globe size={20} />
                        </div>
                        <span className="text-[10px] md:text-xs font-bold text-gray-500 uppercase">Web/Filtro</span>
                    </div>

                    <ArrowRight className="text-gray-300 hidden md:block" size={20} />
                    <div className="h-4 w-0.5 bg-gray-300 md:hidden"></div>

                    {/* Step 3: HUB (WA + CRM + AI) */}
                    <div className="relative p-2 md:p-3 bg-white border border-gray-200 rounded-xl shadow-md flex flex-col items-center gap-2">
                        <div className="absolute -top-2 -right-2 bg-yellow-50 text-yellow-600 text-[10px] px-2 py-0.5 rounded-full border border-yellow-100 font-bold flex items-center gap-1">
                            <Sparkles size={10} /> IA
                        </div>
                        <div className="flex gap-2">
                            <div className="w-8 h-8 bg-green-50 rounded-lg flex items-center justify-center text-green-600"><MessageCircle size={16}/></div>
                            <div className="w-8 h-8 bg-gray-50 rounded-lg flex items-center justify-center text-gray-600"><Database size={16}/></div>
                        </div>
                        <span className="text-[10px] md:text-xs font-bold text-gray-800 uppercase">Nutrición</span>
                    </div>

                    <ArrowRight className="text-gray-300 hidden md:block" size={20} />
                    <div className="h-4 w-0.5 bg-gray-300 md:hidden"></div>

                    {/* Step 4: Owner */}
                    <div className="flex flex-col items-center text-center gap-2">
                        <div className="w-10 h-10 md:w-12 md:h-12 bg-[#111111] text-white rounded-xl flex items-center justify-center border border-gray-800 shadow-sm">
                            <UserCheck size={20} />
                        </div>
                        <span className="text-[10px] md:text-xs font-bold text-gray-500 uppercase">Cierre</span>
                    </div>
                </div>

                {/* 2. DASHBOARD DE RESULTADOS (Evidence) */}
                <div className="w-full max-w-lg bg-white rounded-xl shadow-lg border border-gray-100 p-4 md:p-6 relative">
                  <div className="absolute -left-1 top-6 bottom-6 w-1 bg-green-400 rounded-r"></div>
                  <div className="flex justify-between items-center mb-4 md:mb-6">
                    <h4 className="font-bold text-gray-800 text-sm md:text-base">Control de Mando</h4>
                    <span className="text-xs text-green-600 font-bold bg-green-50 px-2 py-1 rounded">+24% vs mes anterior</span>
                  </div>
                  <div className="grid grid-cols-3 gap-2 md:gap-4 mb-4">
                    {[
                      { label: "ROAS", val: "4.2x", color: "text-[#8D1AF1]" },
                      { label: "Cierres", val: "18", color: "text-gray-800" },
                      { label: "Revenue", val: "$12k", color: "text-green-600" }
                    ].map((stat, idx) => (
                      <div key={idx} className="bg-gray-50 p-2 md:p-3 rounded-lg text-center">
                        <div className="text-[10px] text-gray-500 mb-1 uppercase tracking-wide">{stat.label}</div>
                        <div className={`text-lg md:text-xl font-bold ${stat.color}`}>{stat.val}</div>
                      </div>
                    ))}
                  </div>
                  {/* Mock Chart Lines */}
                  <div className="flex items-end space-x-2 h-16 md:h-20">
                    {[40, 65, 45, 80, 55, 90, 100].map((h, i) => (
                      <div key={i} className="flex-1 bg-[#8D1AF1] opacity-20 rounded-t-sm hover:opacity-100 transition-opacity" style={{ height: `${h}%` }}></div>
                    ))}
                  </div>
                </div>
            </div>
        </div>
      </div>

      {/* Handle / Slider Button */}
      <div 
        className="absolute top-0 bottom-0 w-10 cursor-col-resize flex items-center justify-center -ml-5 z-20"
        style={{ left: `${sliderPosition}%` }}
      >
        <div className="w-10 h-10 bg-white rounded-full shadow-[0_4px_10px_rgba(0,0,0,0.2)] flex items-center justify-center text-[#8D1AF1] border border-gray-100">
          <div className="flex gap-1">
            <div className="w-0.5 h-3 bg-gray-300"></div>
            <div className="w-0.5 h-3 bg-gray-300"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* --- LANDING PAGE PRINCIPAL ---
*/

export default function KeepscalingLanding() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Función de Scroll Suave
  const scrollToSection = (e, sectionId) => {
    e.preventDefault();
    const element = document.getElementById(sectionId);
    if (element) {
      // Ajuste de offset para considerar el Navbar fijo (80px)
      const headerOffset = 80;
      const elementPosition = element.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth"
      });
      setMobileMenuOpen(false);
    }
  };

  return (
    <div className="min-h-screen bg-white text-[#111111] font-sans selection:bg-[#8D1AF1] selection:text-white">
      
      {/* 1. NAVBAR */}
      <nav className="fixed w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 transition-all duration-300">
        <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 cursor-pointer group" onClick={(e) => window.scrollTo({ top: 0, behavior: 'smooth' })}>
              <div className="w-8 h-8 bg-[#8D1AF1] rounded-lg flex items-center justify-center text-white font-bold text-xl group-hover:scale-105 transition-transform">K</div>
              <span className="font-extrabold text-xl tracking-tight text-[#111111]">KEEP SCALING</span>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#sistema" onClick={(e) => scrollToSection(e, 'sistema')} className="text-sm font-medium text-gray-500 hover:text-[#8D1AF1] transition-colors">El Sistema</a>
              <a href="#casos" onClick={(e) => scrollToSection(e, 'casos')} className="text-sm font-medium text-gray-500 hover:text-[#8D1AF1] transition-colors">Casos</a>
              <a href="#founder" onClick={(e) => scrollToSection(e, 'founder')} className="text-sm font-medium text-gray-500 hover:text-[#8D1AF1] transition-colors">Nosotros</a>
              <button onClick={(e) => scrollToSection(e, 'audit')} className="bg-[#111111] text-white px-6 py-2.5 rounded-full text-sm font-bold hover:bg-[#8D1AF1] transition-colors shadow-lg shadow-gray-200">
                Auditar Infraestructura
              </button>
            </div>

            {/* Mobile Toggle */}
            <div className="md:hidden flex items-center">
              <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-gray-800">
                {mobileMenuOpen ? <X size={28} /> : <div className="space-y-1.5"><div className="w-6 h-0.5 bg-black"></div><div className="w-6 h-0.5 bg-black"></div></div>}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-100 absolute w-full p-4 flex flex-col space-y-4 shadow-xl">
             <a href="#sistema" onClick={(e) => scrollToSection(e, 'sistema')} className="text-gray-600 font-medium py-2">El Sistema</a>
             <a href="#casos" onClick={(e) => scrollToSection(e, 'casos')} className="text-gray-600 font-medium py-2">Casos</a>
             <a href="#founder" onClick={(e) => scrollToSection(e, 'founder')} className="text-gray-600 font-medium py-2">Nosotros</a>
             <button onClick={(e) => scrollToSection(e, 'audit')} className="w-full bg-[#8D1AF1] text-white py-3 rounded-xl font-bold">Auditar Infraestructura</button>
          </div>
        )}
      </nav>

      {/* 2. HERO SECTION */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        {/* Grid Background Tech Effect */}
        <div className="absolute inset-0 z-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
        <div className="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-white to-transparent z-10"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            
            {/* Columna Izquierda: Copy */}
            <div className="text-center lg:text-left">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-50 border border-purple-100 mb-6">
                <span className="w-2 h-2 rounded-full bg-[#8D1AF1]"></span>
                <span className="text-xs font-bold uppercase tracking-wide text-[#8D1AF1]">Ingeniería de Crecimiento para Negocios de Servicios</span>
              </div>
              
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.1] mb-6 tracking-tight text-[#111111]">
                Diseñamos la Infraestructura para <br className="hidden lg:block"/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#8D1AF1] to-[#4D0E8F]">Escalar tu Negocio.</span>
              </h1>
              
              <p className="text-lg text-gray-600 leading-relaxed mb-8 max-w-xl mx-auto lg:mx-0">
                Transformamos la operación manual en sistemas de alto rendimiento. Integramos Marketing, Estrategia, Datos y Procesos Comerciales para que crezcas con orden y previsibilidad, eliminando el factor suerte.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <Button variant="primary" icon={ChevronRight} onClick={(e) => scrollToSection(e, 'sistema')}>
                  Ver Cómo Funciona el Sistema
                </Button>
              </div>

              {/* Social Proof */}
              <div className="mt-12 border-t border-gray-100 pt-8">
                <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Partners de Crecimiento de:</p>
                <div className="flex justify-center lg:justify-start gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
                  {/* Logos simulados con texto para demo */}
                  <span className="font-bold text-xl text-gray-700 font-serif">TrueImplant</span>
                  <span className="font-bold text-xl text-gray-700 italic">Miyazato</span>
                  <span className="font-bold text-xl text-gray-700 tracking-tighter">DR.GABY</span>
                </div>
              </div>
            </div>

            {/* Columna Derecha: VSL Mockup */}
            <div className="relative">
              <div onClick={(e) => scrollToSection(e, 'sistema')} className="relative rounded-2xl overflow-hidden shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] border border-gray-100 bg-gray-50 aspect-video group cursor-pointer">
                {/* Placeholder Image Gradient */}
                <div className="absolute inset-0 bg-gradient-to-br from-gray-900 to-gray-800 opacity-90 z-10 group-hover:scale-105 transition-transform duration-700"></div>
                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center p-8 text-center">
                    <div className="w-20 h-20 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center mb-4 border border-white/20 shadow-2xl group-hover:scale-110 transition-transform duration-300">
                        <Play className="text-white ml-1 fill-white" size={32} />
                    </div>
                    <p className="text-white font-medium tracking-wide">Ver el Protocolo Keepscaling</p>
                    <p className="text-gray-400 text-sm mt-2">Duración: 2 min</p>
                </div>
                {/* Decorative Elements */}
                <div className="absolute bottom-4 left-4 z-20 flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <span className="text-xs text-white/80 font-mono">SYSTEM_ONLINE</span>
                </div>
              </div>
              
              {/* Floating Badge */}
              <div className="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-xl border border-gray-100 hidden md:flex items-center gap-3 z-30">
                 <div className="bg-green-100 p-2 rounded-lg text-green-600">
                    <BarChart3 size={24} />
                 </div>
                 <div>
                    <p className="text-xs text-gray-500 font-bold uppercase">Resultado Promedio</p>
                    <p className="text-lg font-bold text-[#111111]">+3.5x ROAS</p>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. SECCIÓN DE DOLORES: "El Diagnóstico" */}
      <section className="py-24 bg-[#F8F9FA]">
        <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-extrabold mb-4 text-[#111111]">
                    ¿Tu negocio tiene excelentes resultados técnicos, <br className="hidden md:block"/> pero pobres resultados comerciales?
                </h2>
                <p className="text-gray-500 text-lg">
                    El "Efecto Embudo Roto": Inviertes más, pero ganas lo mismo.
                </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
                {/* Card 1 */}
                <div className="bg-white p-8 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 hover:shadow-xl transition-all hover:-translate-y-1">
                    <div className="w-14 h-14 bg-red-50 rounded-2xl flex items-center justify-center text-red-500 mb-6">
                        <Users size={28} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Leads Basura y Curiosos</h3>
                    <p className="text-gray-500 leading-relaxed text-sm">
                        Tu equipo comercial pierde horas filtrando consultas de bajo valor, preguntas por precio o prospectos sin presupuesto que no convierten.
                    </p>
                </div>

                {/* Card 2 */}
                <div className="bg-white p-8 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 hover:shadow-xl transition-all hover:-translate-y-1 relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-[#8D1AF1]/10 to-transparent rounded-bl-full"></div>
                    <div className="w-14 h-14 bg-purple-50 rounded-2xl flex items-center justify-center text-[#8D1AF1] mb-6">
                        <Zap size={28} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Ceguera de Datos</h3>
                    <p className="text-gray-500 leading-relaxed text-sm">
                        Inviertes sin conocer tu retorno real (ROAS). Ves clics y mensajes, pero desconoces por qué no se traducen en dinero. Operas por sensaciones, no por métricas financieras.
                    </p>
                </div>

                {/* Card 3 */}
                <div className="bg-white p-8 rounded-3xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 hover:shadow-xl transition-all hover:-translate-y-1">
                    <div className="w-14 h-14 bg-orange-50 rounded-2xl flex items-center justify-center text-orange-500 mb-6">
                        <ShieldCheck size={28} />
                    </div>
                    <h3 className="text-xl font-bold mb-3">Techo Operativo</h3>
                    <p className="text-gray-500 leading-relaxed text-sm">
                        Tu facturación depende 100% de tu tiempo manual. Si tú no vendes o atiendes, el negocio se detiene. No tienes un sistema predecible.
                    </p>
                </div>
            </div>
        </div>
      </section>

      {/* 4. EL MECANISMO ÚNICO: "El Protocolo Keepscaling" */}
      <section id="sistema" className="py-24 bg-white relative 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 gap-16 items-start">
                
                {/* Sticky Header Left */}
                <div className="md:w-1/3 md:sticky md:top-32">
                    <h2 className="text-3xl md:text-4xl font-extrabold mb-6 text-[#111111]">
                        El Protocolo Keepscaling
                    </h2>
                    <p className="text-gray-600 mb-8 leading-relaxed">
                        No hacemos "campañas de marketing". Construimos ecosistemas de venta de punta a punta. Transformamos desconocidos en clientes de alto valor sin que tengas que perseguirlos.
                    </p>
                    <Button variant="primary" onClick={(e) => scrollToSection(e, 'audit')}>Agendar Diagnóstico</Button>
                </div>

                {/* Timeline Right */}
                <div className="md:w-2/3 relative pl-8 md:pl-0">
                    {/* Vertical Line */}
                    <div className="absolute left-8 md:left-12 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#8D1AF1] via-gray-200 to-transparent"></div>

                    <div className="space-y-16">
                        {/* Step 1 */}
                        <div className="relative pl-24 md:pl-32 group">
                            <div className="absolute left-0 top-0 w-16 h-16 md:w-24 md:h-24 bg-white border-4 border-gray-50 rounded-full flex items-center justify-center z-10 shadow-sm group-hover:border-[#8D1AF1] transition-colors">
                                <span className="text-2xl md:text-3xl font-bold text-gray-300 group-hover:text-[#8D1AF1]">01</span>
                            </div>
                            <h3 className="text-2xl font-bold mb-3">Ingeniería de Oferta</h3>
                            <p className="text-gray-600 mb-2 font-medium">Dejamos de vender "servicios" y empezamos a vender "transformaciones".</p>
                            <p className="text-sm text-gray-500">
                                Estudiamos tu negocio y servicio para diseñar, junto a vos, una nueva perspectiva que comunique tu verdadero valor y diferencial. Esto nos permite atraer al 10% del mercado que paga bien, eliminando definitivamente la competencia por precio.
                            </p>
                        </div>

                        {/* Step 2 */}
                        <div className="relative pl-24 md:pl-32 group">
                            <div className="absolute left-0 top-0 w-16 h-16 md:w-24 md:h-24 bg-white border-4 border-gray-50 rounded-full flex items-center justify-center z-10 shadow-sm group-hover:border-[#8D1AF1] transition-colors">
                                <span className="text-2xl md:text-3xl font-bold text-gray-300 group-hover:text-[#8D1AF1]">02</span>
                            </div>
                            <h3 className="text-2xl font-bold mb-3">Infraestructura Digital & Sistemas</h3>
                            <p className="text-gray-600 mb-2 font-medium">Marketing Táctico + Web + Gestión Operativa.</p>
                            <p className="text-sm text-gray-500">
                                Construimos tus activos digitales: creación de contenidos y web de alta conversión para atraer, sumado a la instalación de tu sistema de gestión en Google Sheets para ordenar el flujo.
                            </p>
                        </div>

                        {/* Step 3 */}
                        <div className="relative pl-24 md:pl-32 group">
                            <div className="absolute left-0 top-0 w-16 h-16 md:w-24 md:h-24 bg-white border-4 border-gray-50 rounded-full flex items-center justify-center z-10 shadow-sm group-hover:border-[#8D1AF1] transition-colors">
                                <span className="text-2xl md:text-3xl font-bold text-gray-300 group-hover:text-[#8D1AF1]">03</span>
                            </div>
                            <h3 className="text-2xl font-bold mb-3">Sistemas de Lazo Cerrado</h3>
                            <p className="text-gray-600 mb-2 font-medium">Optimizamos por Dinero, no por Clics.</p>
                            <p className="text-sm text-gray-500">Conectamos tu CRM (Google Sheets) con la API de Meta. Entrenamos a la IA con tus ventas reales para encontrar más clientes pagadores automáticamente.</p>
                        </div>

                        {/* Step 4 */}
                        <div className="relative pl-24 md:pl-32 group">
                            <div className="absolute left-0 top-0 w-16 h-16 md:w-24 md:h-24 bg-white border-4 border-gray-50 rounded-full flex items-center justify-center z-10 shadow-sm group-hover:border-[#8D1AF1] transition-colors">
                                <span className="text-2xl md:text-3xl font-bold text-gray-300 group-hover:text-[#8D1AF1]">04</span>
                            </div>
                            <h3 className="text-2xl font-bold mb-3">Ejecución Partner</h3>
                            <p className="text-gray-600 mb-2 font-medium">No te damos un manual, lo hacemos contigo.</p>
                            <p className="text-sm text-gray-500">Ponemos al Setter, gestionamos los anuncios y optimizamos el cierre. Nos convertimos en tu brazo armado de crecimiento.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* 5. LA TRANSFORMACIÓN (Comparison Slider) */}
      <section id="casos" className="py-24 bg-[#F8F9FA]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
                <span className="text-[#8D1AF1] font-bold tracking-widest text-xs uppercase mb-2 block">Evidencia Visual</span>
                <h2 className="text-3xl md:text-4xl font-extrabold text-[#111111]">Orden del Caos</h2>
                <p className="mt-4 text-gray-500">Desliza para ver la diferencia operativa.</p>
            </div>
            
            <ComparisonSlider />

            <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                <div className="bg-white p-4 rounded-xl shadow-sm">
                   <div className="text-2xl font-bold text-[#8D1AF1]">100%</div>
                   <div className="text-xs text-gray-500 uppercase font-bold mt-1">Trazabilidad</div>
                </div>
                <div className="bg-white p-4 rounded-xl shadow-sm">
                   <div className="text-2xl font-bold text-[#8D1AF1]">24/7</div>
                   <div className="text-xs text-gray-500 uppercase font-bold mt-1">Captación</div>
                </div>
                <div className="bg-white p-4 rounded-xl shadow-sm">
                   <div className="text-2xl font-bold text-[#8D1AF1]">&lt; 2h</div>
                   <div className="text-xs text-gray-500 uppercase font-bold mt-1">Gestión Diaria</div>
                </div>
                <div className="bg-white p-4 rounded-xl shadow-sm">
                   <div className="text-2xl font-bold text-[#8D1AF1]">3x</div>
                   <div className="text-xs text-gray-500 uppercase font-bold mt-1">Cierre de Ventas</div>
                </div>
            </div>
        </div>
      </section>

      {/* 6. AUTORIDAD (Perfil Lucas) */}
      <section id="founder" className="py-24 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-100 shadow-[0_20px_40px_rgba(0,0,0,0.04)] flex flex-col md:flex-row items-center gap-12">
                
                {/* Image Placeholder */}
                <div className="w-48 h-48 md:w-64 md:h-64 flex-shrink-0 relative">
                   <div className="absolute inset-0 bg-gray-200 rounded-2xl rotate-3"></div>
                   <img 
                      src="https://placehold.co/400x400/111/fff?text=Lucas" 
                      alt="Lucas Founder" 
                      className="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-lg -rotate-3 hover:rotate-0 transition-all duration-500 grayscale hover:grayscale-0"
                   />
                </div>

                <div className="flex-1 text-center md:text-left">
                    <div className="inline-block bg-[#111111] text-white text-xs font-bold px-3 py-1 rounded mb-4">FOUNDER</div>
                    <h3 className="text-3xl font-extrabold mb-4">Lucas</h3>
                    <p className="text-xl text-gray-500 font-medium mb-6">Arquitecto de Sistemas & Growth Partner</p>
                    <div className="space-y-4 text-gray-600 leading-relaxed">
                        <p>
                           "En Keepscaling no vendemos magia, vendemos lógica. Mi obsesión es conectar tu inversión en marketing con tu cuenta bancaria a través de código y procesos."
                        </p>
                        <p>
                           Como instructor del Gonzalez Dojo Capital y consultor estratégico, aplico la disciplina marcial a los negocios: <strong>Orden, Constancia y Resultados.</strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* 7. CTA FINAL (Footer) */}
      <footer id="audit" className="relative bg-[#111111] text-white py-24 overflow-hidden">
        {/* Background Gradient Accent */}
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#8D1AF1] opacity-20 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 translate-x-1/2"></div>

        <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
            <h2 className="text-4xl md:text-6xl font-extrabold mb-6 tracking-tight">
                Deja de competir por precio. <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#8D1AF1] to-purple-400">Empieza a competir por Valor.</span>
            </h2>
            <p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
                No necesitas más leads. Necesitas un sistema que convierta desconocidos en clientes rentables mientras duermes.
            </p>
            
            <div className="flex flex-col items-center gap-6">
                <button className="bg-white text-[#8D1AF1] px-10 py-5 rounded-full font-bold text-lg hover:bg-gray-100 transition-all shadow-[0_0_40px_rgba(141,26,241,0.4)] transform hover:-translate-y-1">
                    Solicitar Auditoría de Infraestructura
                </button>
                <p className="text-sm text-gray-500 flex items-center gap-2">
                    <span className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></span>
                    Solo aceptamos 4 clientes nuevos al mes para garantizar la ejecución.
                </p>
            </div>

            <div className="mt-24 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center text-gray-600 text-sm">
                <p>&copy; 2024 Keepscaling. Todos los derechos reservados.</p>
                <div className="flex gap-6 mt-4 md:mt-0">
                    <a href="#" className="hover:text-white transition-colors">Privacidad</a>
                    <a href="#" className="hover:text-white transition-colors">Términos</a>
                </div>
            </div>
        </div>
      </footer>
    </div>
  );
}