import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
import { 
  Instagram, 
  ChevronRight, 
  Star, 
  Clock, 
  MapPin, 
  Menu, 
  X,
  Phone,
  Sparkles,
  Award,
  ArrowRight,
  ChevronLeft,
  ShieldCheck,
  CheckCircle2,
  Plus,
  Minus,
  GraduationCap,
  Lock,
  Mail,
  User,
  BookOpen,
  LogOut,
  Paintbrush,
  HeartPulse,
  Eye,
  Droplets,
  ScanFace,
  Scissors,
  Flower2
} from 'lucide-react';

// Paleta de Colores Chairy Monasterios (Manual de Marca)
const COLORS = {
  gold: '#ceac6f',
  nude: '#dbc5a4',
  grey: '#a6aaab',
  light: '#f7f7f7',
  dark: '#1a1a1a'
};

// Utilidad para optimizar carga en Cloudflare Free
const getOptimizedImg = (url, width = 800) => `${url}&w=${width}&q=75&auto=format&fit=crop`;

/* ─── COMPONENTE: SLIDER ANTES/DESPUÉS ─── */
const BeforeAfterSlider = () => {
  const [sliderPos, setSliderPos] = useState(50);
  const containerRef = useRef(null);

  const handleInteraction = (e) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left;
    const pos = (x / rect.width) * 100;
    setSliderPos(Math.max(0, Math.min(100, pos)));
  };

  return (
    <div 
      ref={containerRef}
      className="relative w-full max-w-4xl mx-auto aspect-[4/3] md:aspect-video overflow-hidden rounded-[2.5rem] cursor-ew-resize shadow-2xl border-[8px] border-white bg-[#dbc5a4]"
      onMouseMove={handleInteraction}
      onTouchMove={handleInteraction}
    >
      {/* Después */}
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ backgroundImage: `url(${getOptimizedImg('https://images.unsplash.com/photo-1595475241929-30119934161a?auto=format&fit=crop', 1200)})` }}
      />
      {/* Antes */}
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ 
          backgroundImage: `url(${getOptimizedImg('https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop', 1200)})`,
          clipPath: `inset(0 ${100 - sliderPos}% 0 0)`
        }}
      />
      {/* Control */}
      <div className="absolute inset-y-0 w-[2px] bg-white z-20" style={{ left: `${sliderPos}%` }}>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-xl border border-[#ceac6f]">
          <div className="flex gap-0.5">
            <ChevronLeft size={12} color={COLORS.gold} />
            <ChevronRight size={12} color={COLORS.gold} />
          </div>
        </div>
      </div>
    </div>
  );
};

/* ─── COMPONENTE: MODAL ACADEMIA ─── */
const AcademiaModal = ({ isOpen, onClose }) => {
  const [mode, setMode] = useState('login');
  if (!isOpen) return null;

  return (
    <motion.div 
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
      className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
      onClick={onClose}
    >
      <motion.div 
        initial={{ y: 20, scale: 0.95 }} animate={{ y: 0, scale: 1 }}
        className="bg-white rounded-2xl w-full max-w-md overflow-hidden shadow-2xl"
        onClick={e => e.stopPropagation()}
      >
        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-[#FDFBF9]">
          <div className="flex items-center gap-2">
            <GraduationCap color={COLORS.gold} />
            <span className="font-serif text-lg tracking-widest uppercase">Academia Online</span>
          </div>
          <button onClick={onClose}><X size={20}/></button>
        </div>
        <div className="p-8">
          <div className="flex bg-gray-100 rounded-lg p-1 mb-8">
            <button onClick={() => setMode('login')} className={`flex-1 py-2 text-xs uppercase tracking-widest font-bold rounded ${mode === 'login' ? 'bg-white shadow-sm' : 'text-gray-400'}`}>Ingresar</button>
            <button onClick={() => setMode('reg')} className={`flex-1 py-2 text-xs uppercase tracking-widest font-bold rounded ${mode === 'reg' ? 'bg-white shadow-sm' : 'text-gray-400'}`}>Registro</button>
          </div>
          <form className="space-y-4">
            <div className="relative">
              <Mail className="absolute left-3 top-3 text-gray-300" size={18} />
              <input type="email" placeholder="Email" className="w-full pl-10 pr-4 py-3 border border-gray-100 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f]"/>
            </div>
            <div className="relative">
              <Lock className="absolute left-3 top-3 text-gray-300" size={18} />
              <input type="password" placeholder="Contraseña" className="w-full pl-10 pr-4 py-3 border border-gray-100 rounded-lg text-sm focus:outline-none focus:border-[#ceac6f]"/>
            </div>
            <button className="w-full py-4 bg-[#1a1a1a] text-white text-xs uppercase tracking-widest font-bold rounded-lg hover:bg-[#ceac6f] transition-all">Acceder al Curso</button>
          </motion.form>
        </div>
      </motion.div>
    </motion.div>
  );
};

/* ─── APP PRINCIPAL ─── */
export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isAcademiaOpen, setIsAcademiaOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { scrollYProgress } = useScroll();
  const yHero = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const services = [
    { icon: <Paintbrush color={COLORS.gold} />, title: "Micropigmentación de Cejas", desc: "Técnica pelo a pelo hiperrealista para cejas naturales." },
    { icon: <HeartPulse color={COLORS.gold} />, title: "Micropigmentación de Labios", desc: "Color y definición 24/7 con acabado acuarela." },
    { icon: <Eye color={COLORS.gold} />, title: "Delineado de Ojos", desc: "Mirada definida con técnica de alta precisión." },
    { icon: <Sparkles color={COLORS.gold} />, title: "Remoción Química", desc: "Corrección segura de trabajos anteriores." },
    { icon: <ScanFace color={COLORS.gold} />, title: "Visajismo", desc: "Estudio de armonía facial personalizado." },
    { icon: <Award color={COLORS.gold} />, title: "Limpieza Facial", desc: "Tecnología avanzada para una piel radiante." }
  ];

  return (
    <div className="min-h-screen bg-[#F7F7F7] font-sans text-[#1a1a1a] antialiased">
      
      {/* Nav Optimizado para Cloudflare */}
      <nav className={`fixed w-full h-20 z-[100] transition-all duration-700 flex items-center ${scrolled ? 'bg-white/90 backdrop-blur-md shadow-sm' : 'bg-transparent'}`}>
        <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
          <div className="text-xl md:text-2xl font-serif tracking-[0.3em] uppercase">
            CHAIRY <span style={{ color: COLORS.gold }}>MONASTERIOS</span>
          </div>
          <div className="hidden md:flex items-center space-x-10 text-[10px] tracking-[0.4em] uppercase font-bold">
            <a href="#servicios" className="hover:text-[#ceac6f] transition-colors">Servicios</a>
            <a href="#resultados" className="hover:text-[#ceac6f] transition-colors">Resultados</a>
            <button onClick={() => setIsAcademiaOpen(true)} className="flex items-center gap-2 hover:text-[#ceac6f] transition-colors">
              <GraduationCap size={16}/> Academia
            </button>
            <a href="https://wa.me/tu_numero" className="px-8 py-3 bg-[#1a1a1a] text-white hover:bg-[#ceac6f] transition-all rounded-sm">Agendar</a>
          </div>
          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      <AnimatePresence>
        {isMenuOpen && (
          <motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} className="fixed inset-0 z-[99] bg-white flex flex-col items-center justify-center space-y-8 text-center">
            <a href="#servicios" onClick={() => setIsMenuOpen(false)} className="text-3xl font-serif">Servicios</a>
            <a href="#resultados" onClick={() => setIsMenuOpen(false)} className="text-3xl font-serif">Resultados</a>
            <button onClick={() => { setIsMenuOpen(false); setIsAcademiaOpen(true); }} className="text-3xl font-serif">Academia</button>
            <button onClick={() => setIsMenuOpen(false)} className="absolute top-8 right-8"><X size={32}/></button>
          </motion.div>
        )}
      </AnimatePresence>

      <AcademiaModal isOpen={isAcademiaOpen} onClose={() => setIsAcademiaOpen(false)} />

      {/* Hero: Diseño Robusto para Cloudflare */}
      <section className="relative h-[95vh] flex items-center overflow-hidden bg-[#dbc5a4]">
        <motion.div style={{ y: yHero }} className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-[#F7F7F7] via-[#F7F7F7]/40 to-transparent z-10" />
          <img 
            src={getOptimizedImg('https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop', 1600)}
            className="w-full h-full object-cover"
            loading="eager"
            alt="Hero Chairy Monasterios"
          />
        </motion.div>
        
        <div className="relative z-20 container mx-auto px-6 md:px-12">
          <motion.div initial={{ opacity: 0, x: -30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 1 }}>
            <span className="inline-block px-4 py-1 border border-[#ceac6f] text-[#ceac6f] text-[10px] uppercase tracking-[0.5em] mb-8 font-bold">Artist & Educator</span>
            <h1 className="text-6xl md:text-[8rem] font-serif leading-[0.85] mb-10 text-[#1a1a1a]">Diseño que <br/><span className="italic font-light" style={{ color: COLORS.gold }}>inspira</span></h1>
            <div className="flex flex-col md:flex-row gap-6">
              <button className="bg-[#1a1a1a] text-white px-12 py-6 text-[11px] tracking-[0.3em] uppercase font-bold hover:bg-[#ceac6f] transition-all shadow-2xl">Quiero mi evaluación</button>
              <div className="flex items-center gap-4 text-xs font-serif italic text-gray-500">
                <MapPin size={16} color={COLORS.gold}/> Maracay & Caracas
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Servicios: Grid Optimizado */}
      <section id="servicios" className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-serif">Servicios de Autor</h2>
            <p className="text-gray-400 uppercase tracking-widest text-[10px] mt-4">Precisión milimétrica en cada trazo</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services.map((s, i) => (
              <div key={i} className="p-10 border border-gray-50 rounded-3xl bg-[#FDFBF9] hover:bg-white hover:shadow-2xl hover:border-transparent transition-all duration-500 group">
                <div className="mb-6">{s.icon}</div>
                <h3 className="text-xl font-serif mb-4 group-hover:text-[#ceac6f] transition-colors">{s.title}</h3>
                <p className="text-gray-400 text-sm leading-relaxed">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Antes/Después: Punto de Conversión */}
      <section id="resultados" className="py-24 bg-[#F7F7F7]">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-4xl md:text-5xl font-serif mb-16">Resultados Reales</h2>
          <BeforeAfterSlider />
        </div>
      </section>

      {/* Footer */}
      <footer className="py-20 bg-white border-t border-gray-100">
        <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-12">
          <div className="text-2xl font-serif tracking-[0.3em] uppercase">CHAIRY <span style={{ color: COLORS.gold }}>MONASTERIOS</span></div>
          <div className="flex space-x-8 text-[10px] tracking-[0.4em] uppercase font-bold text-gray-400">
            <a href="#" className="hover:text-[#ceac6f]">Instagram</a>
            <a href="#" className="hover:text-[#ceac6f]">WhatsApp</a>
            <a href="#" className="hover:text-[#ceac6f]">Academia</a>
          </div>
          <p className="text-[10px] text-gray-300 uppercase tracking-widest">&copy; 2026 Crafted for Chairy Monasterios</p>
        </div>
      </footer>

      {/* Floating Button WhatsApp */}
      <a href="https://wa.me/tu_numero" className="fixed bottom-10 right-10 z-[150] bg-[#25D366] text-white p-5 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center group">
        <Phone size={26} fill="white" />
        <span className="max-w-0 overflow-hidden group-hover:max-w-xs group-hover:ml-4 transition-all duration-500 whitespace-nowrap text-[10px] uppercase tracking-widest font-bold">Agendar Ahora</span>
      </a>

    </div>
  );
}