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
} from 'lucide-react';

// Paleta de colores oficial validada
const COLORS = {
  gold: '#ceac6f',
  nude: '#dbc5a4',
  grey: '#a6aaab',
  light: '#f7f7f7',
  dark: '#1a1a1a'
};

const BeforeAfter = () => {
  const [sliderPos, setSliderPos] = useState(50);
  const containerRef = useRef(null);

  const handleMove = (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 h-[400px] md:h-[550px] overflow-hidden rounded-3xl cursor-ew-resize shadow-2xl border-4 border-white"
      onMouseMove={handleMove}
      onTouchMove={handleMove}
    >
      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ backgroundImage: `url('https://images.unsplash.com/photo-1595475241929-30119934161a?auto=format&fit=crop&q=80')` }}
      >
        <div className="absolute top-6 right-6 bg-black/60 backdrop-blur-md px-6 py-2 rounded-full text-[10px] text-white uppercase tracking-widest font-bold">Después</div>
      </div>

      <div 
        className="absolute inset-0 bg-cover bg-center"
        style={{ 
          backgroundImage: `url('https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&q=80')`,
          clipPath: `inset(0 ${100 - sliderPos}% 0 0)`
        }}
      >
        <div className="absolute top-6 left-6 bg-white/80 backdrop-blur-md px-6 py-2 rounded-full text-[10px] text-black uppercase tracking-widest font-bold">Antes</div>
      </div>

      <div className="absolute inset-y-0 w-[2px] bg-white z-10" style={{ left: `${sliderPos}%` }}>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-2xl border-2 border-[#ceac6f]">
          <div className="flex gap-1">
            <ChevronLeft size={14} color={COLORS.gold} />
            <ChevronRight size={14} color={COLORS.gold} />
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { scrollYProgress } = useScroll();
  const yBg = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);

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

  const services = [
    { title: "Microblading Pro", tag: "Hiperrealismo", desc: "Técnica manual de alta precisión para cejas perfectas.", price: "Desde $250" },
    { title: "Lip Blush", tag: "Acuarela", desc: "Color y volumen sutil que revitaliza tus labios.", price: "Desde $300" },
    { title: "Powder Brows", tag: "Sombreado", desc: "Efecto maquillaje degradado para mayor densidad.", price: "Desde $280" }
  ];

  return (
    <div className="min-h-screen font-light selection:bg-[#ceac6f] selection:text-white" style={{ backgroundColor: COLORS.light }}>
      
      {/* Navbar Moderno */}
      <nav className={`fixed w-full z-50 transition-all duration-700 ${scrolled ? 'bg-white/95 backdrop-blur-md py-4 shadow-md' : 'bg-transparent py-8'}`}>
        <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
          <div className="text-2xl font-serif tracking-[0.2em] uppercase cursor-pointer">
            Chairy <span style={{ color: COLORS.gold }}>Monasterios</span>
          </div>
          
          <div className="hidden md:flex items-center space-x-10 text-[10px] tracking-[0.3em] uppercase font-bold">
            <a href="#proceso" className="hover:text-[#ceac6f] transition-all">El Proceso</a>
            <a href="#servicios" className="hover:text-[#ceac6f] transition-all">Servicios</a>
            <a href="#resultados" className="hover:text-[#ceac6f] transition-all">Resultados</a>
            <button className="px-8 py-4 bg-[#1a1a1a] text-white hover:bg-[#ceac6f] transition-all duration-500 rounded-sm shadow-xl">
              Agendar VIP
            </button>
          </div>

          <button className="md:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={24}/> : <Menu size={24}/>}
          </button>
        </div>
      </nav>

      {/* Mobile Menu */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div 
            initial={{ opacity: 0, x: '100%' }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: '100%' }}
            className="fixed inset-0 z-[60] bg-white flex flex-col items-center justify-center space-y-12"
          >
            <button className="absolute top-8 right-8" onClick={() => setIsMenuOpen(false)}><X size={32}/></button>
            <a href="#proceso" onClick={() => setIsMenuOpen(false)} className="text-3xl font-serif">El Proceso</a>
            <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 className="px-12 py-5 bg-[#1a1a1a] text-white text-xs tracking-widest uppercase">Reservar Ahora</button>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Hero Visual */}
      <section className="relative h-screen flex items-center overflow-hidden">
        <motion.div style={{ y: yBg }} className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/80 to-transparent z-10" />
          <img 
            src="https://images.unsplash.com/photo-1522337482544-b9034d612e4d?auto=format&fit=crop&q=80" 
            className="w-full h-full object-cover"
            alt="Arte en la piel"
          />
        </motion.div>
        
        <div className="relative z-20 container mx-auto px-6 md:px-12">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 1.2 }}
            className="max-w-3xl"
          >
            <span className="inline-block px-4 py-1 bg-[#ceac6f]/10 text-[#ceac6f] text-[10px] uppercase tracking-[0.5em] mb-8 font-bold">
              Premium Micro-Artistry
            </span>
            <h1 className="text-6xl md:text-[8rem] font-serif text-[#1a1a1a] leading-[0.9] mb-10">
              Belleza que <br/>
              <span className="italic font-light" style={{ color: COLORS.gold }}>Persevera</span>
            </h1>
            <p className="max-w-md text-gray-500 text-lg mb-12 font-light leading-relaxed">
              Especialista certificada en técnicas de micropigmentación que realzan tus rasgos con absoluta naturalidad.
            </p>
            <div className="flex items-center space-x-8">
              <button className="bg-[#1a1a1a] text-white px-12 py-6 rounded-sm hover:bg-[#ceac6f] transition-all shadow-2xl flex items-center group">
                <span className="text-[10px] uppercase tracking-widest font-bold">Descubrir tu diseño</span>
                <ArrowRight size={16} className="ml-4 group-hover:translate-x-2 transition-transform"/>
              </button>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Sección El Proceso (Nueva) */}
      <section id="proceso" className="py-32 bg-white">
        <div className="container mx-auto px-6 md:px-12">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
            <div className="relative">
              <img src="https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&q=80" className="rounded-3xl shadow-2xl" alt="Proceso"/>
              <div className="absolute -bottom-10 -right-10 bg-[#dbc5a4] p-12 rounded-2xl hidden md:block">
                <Sparkles size={40} className="text-[#ceac6f] mb-4" />
                <p className="text-[#1a1a1a] font-serif text-2xl">Diseño <br/> Personalizado</p>
              </div>
            </div>
            <div className="space-y-12">
              <h2 className="text-4xl md:text-5xl font-serif">Tu transformación <br/> en 3 pasos</h2>
              <div className="space-y-8">
                {[
                  { n: "01", t: "Visagismo y Diseño", d: "Estudiamos tu estructura ósea para crear el arco perfecto que armonice con tu rostro." },
                  { n: "02", t: "Aplicación de Pigmento", d: "Utilizamos pigmentos hipoalergénicos de alta gama para un color duradero y real." },
                  { n: "03", t: "Perfeccionamiento", d: "Una sesión de retoque a las 4 semanas para asegurar la saturación y forma ideal." }
                ].map((step, idx) => (
                  <div key={idx} className="flex gap-8 group">
                    <span className="text-3xl font-serif text-[#ceac6f]/30 group-hover:text-[#ceac6f] transition-colors">{step.n}</span>
                    <div>
                      <h4 className="text-xl font-bold mb-2 uppercase tracking-widest text-sm">{step.t}</h4>
                      <p className="text-gray-500 text-sm leading-relaxed">{step.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Resultados Antes/Después */}
      <section id="resultados" className="py-32" style={{ backgroundColor: COLORS.light }}>
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-5xl font-serif mb-6 text-[#1a1a1a]">Resultados Reales</h2>
          <p className="text-gray-500 mb-20 max-w-xl mx-auto uppercase tracking-widest text-[10px]">Desliza para ver el cambio de nuestras clientas</p>
          <BeforeAfter />
        </div>
      </section>

      {/* Servicios Premium */}
      <section id="servicios" className="py-32 bg-white">
        <div className="container mx-auto px-6 md:px-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services.map((s, i) => (
              <motion.div 
                key={i}
                whileHover={{ y: -15 }}
                className="p-12 border border-gray-100 rounded-2xl bg-[#fcfaf7] hover:bg-white hover:shadow-2xl transition-all duration-500"
              >
                <div className="w-12 h-[1px] bg-[#ceac6f] mb-8" />
                <h3 className="text-2xl font-serif mb-4">{s.title}</h3>
                <p className="text-gray-500 text-sm mb-10 leading-relaxed">{s.desc}</p>
                <div className="flex justify-between items-center">
                  <span className="font-bold text-[#ceac6f]">{s.price}</span>
                  <button className="p-3 rounded-full bg-white text-[#1a1a1a] hover:bg-[#ceac6f] hover:text-white transition-all shadow-sm">
                    <ChevronRight size={18} />
                  </button>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Final */}
      <section className="py-32 relative overflow-hidden bg-[#1a1a1a]">
        <div className="container mx-auto px-6 text-center relative z-10 text-white">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            className="max-w-3xl mx-auto"
          >
            <h2 className="text-5xl md:text-7xl font-serif mb-12">¿Lista para despertar <br/> siempre lista?</h2>
            <p className="text-white/60 mb-16 uppercase tracking-[0.3em] text-[10px]">Agenda tu evaluación gratuita hoy mismo</p>
            <a 
              href="https://wa.me/yournumber"
              className="inline-block px-16 py-7 bg-[#ceac6f] text-white text-xs tracking-[0.4em] uppercase font-bold hover:bg-white hover:text-black transition-all duration-500 rounded-sm"
            >
              Hablar con Chairy
            </a>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 bg-white text-center border-t border-gray-100">
        <div className="container mx-auto px-6">
          <p className="text-[9px] text-gray-400 uppercase tracking-[0.5em]">
            &copy; 2026 Chairy Monasterios &bull; Todos los derechos reservados &bull; Crafted for Excellence
          </p>
        </div>
      </footer>

      {/* Botón WhatsApp Flotante */}
      <a 
        href="https://wa.me/yournumber" 
        className="fixed bottom-10 right-10 z-[100] bg-[#25D366] text-white p-5 rounded-full shadow-2xl hover:scale-110 active:scale-95 transition-all"
      >
        <Phone size={24} fill="white" />
        <span className="absolute -top-1 -right-1 bg-red-500 w-4 h-4 rounded-full flex items-center justify-center text-[8px] animate-bounce">1</span>
      </a>

    </div>
  );
};

export default App;