// ServiciosV5 — Luxury Soft, composición editorial con agrupamiento por categorías const ServiciosV5 = ({ setPage }) => { const [open, setOpen] = React.useState(null); const [filter, setFilter] = React.useState('Todos'); const [visible, setVisible] = React.useState({}); const refs = React.useRef({}); // Intersection Observer para animar la aparición de los bloques de categorías React.useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { setVisible(prev => ({ ...prev, [entry.target.getAttribute('data-key')]: true })); } }); }, { threshold: 0.08 } ); Object.values(refs.current).forEach(el => { if (el) observer.observe(el); }); return () => observer.disconnect(); }, []); const services = [ { id: 'facial', name: 'Limpieza Facial Profunda', price: '$25.000', alt: '2 por $40.000', duration: '60 min', tag: 'Más solicitado', category: 'Cosmetología', img: 'uploads/facial_service.png', desc: 'Limpieza profunda que remueve impurezas, células muertas y exceso de sebo. Incluye vapor facial, extracción, mascarilla hidratante y protector solar final.', benefits: ['Poros desobstruidos', 'Piel hidratada y luminosa', 'Reducción de imperfecciones', 'Mascarilla personalizada', 'Extracción sin daño', 'Resultados desde la primera sesión'] }, { id: 'relajacion', name: 'Masaje de Relajación', price: '$30.000', alt: null, duration: '60 min', tag: 'Favorito', category: 'Masoterapia', img: 'uploads/massage_service.png', desc: 'Una hora de bienestar total. Técnicas suaves y envolventes que liberan la tensión acumulada, relajan el sistema nervioso y reconectan el cuerpo con la calma.', benefits: ['Reduce el estrés', 'Alivia tensión muscular', 'Mejora la circulación', 'Libera endorfinas', 'Sueño reparador', 'Bienestar total'] }, { id: 'express', name: 'Masaje Express', price: '$20.000', alt: null, duration: '30 min', tag: 'Ideal para comenzar', category: 'Masoterapia', img: 'uploads/massage_service.png', desc: 'Ideal si buscas regalarte una pausa de bienestar en poco tiempo. 30 minutos que liberan tensiones, relajan la mente y renuevan tus energías.', benefits: ['Disminuye estrés', 'Relaja cuerpo y mente', 'Mejora bienestar general', 'Rápido y efectivo', 'Sin cita previa disponible', 'Precio accesible'] }, { id: 'piernas', name: 'Masaje de Piernas Cansadas', price: '$20.000', alt: null, duration: '30 min', tag: null, category: 'Masoterapia', img: 'uploads/massage_service.png', desc: 'Alivia pesadez, cansancio y tensión en las piernas. Ideal para quienes permanecen mucho tiempo de pie o sentadas.', benefits: ['Alivia pesadez', 'Activa la circulación', 'Reduce inflamación', 'Drena líquidos', 'Piernas ligeras', 'Efecto inmediato'] }, { id: 'descontracturante', name: 'Masaje Descontracturante', price: 'desde $25.000', alt: null, duration: '60 min', tag: null, category: 'Masoterapia', img: 'uploads/massage_service.png', desc: 'Indicado para dolor muscular intenso y contracturas. Trabaja zonas específicas con presión profunda y técnicas terapéuticas.', benefits: ['Libera contracturas', 'Alivia dolor cervical', 'Mejora rango de movimiento', 'Técnica terapéutica', 'Ideal post-estrés', 'Efecto duradero'] }, { id: 'lash', name: 'Lash Lifting', price: 'Consultar', alt: null, duration: '45 min', tag: '20% OFF', category: 'Cosmetología', img: 'uploads/lash_service.png', desc: 'Curvatura y definición desde la raíz sin extensiones. Ojos más abiertos y definidos de forma natural. Duración de 6 a 8 semanas.', benefits: ['Sin extensiones', 'Duración 6–8 semanas', 'Efecto natural', 'No daña las pestañas', 'Resistente al agua', 'Sin mantenimiento diario'] }, { id: 'reductor', name: 'Tratamiento Reductor', price: '$220.000', alt: 'Pack 10 sesiones', duration: '10 sesiones', tag: 'Pack completo', category: 'Corporales', img: 'uploads/body_treatment.png', desc: 'Programa completo de transformación corporal. Masajes reductores, aparatología avanzada, drenaje linfático y seguimiento semanal.', benefits: ['10 sesiones', 'Masajes reductores', 'Aparatología', 'Drenaje linfático', 'Tratamiento reafirmante', 'Seguimiento semanal'] }, { id: 'giftcard', name: 'Gift Card', price: 'A tu medida', alt: null, duration: '—', tag: null, category: 'Otros Servicios', img: 'uploads/gift_card_beauty.png', desc: 'El regalo perfecto. Elige el servicio o el monto y la gift card digital llega al instante por email. Válida por 6 meses.', benefits: ['Válida 6 meses', 'Canjeable en todo', 'Llega por email', 'Mensaje personalizado', 'Compra online', 'Ideal para regalar'] }, ]; const CheckIcon = () => ( ); // Group services by category const allCategories = ['Cosmetología', 'Masoterapia', 'Corporales', 'Otros Servicios']; const categoriesOrder = filter === 'Todos' ? allCategories : [filter]; const servicesByCategory = {}; services.forEach(s => { const cat = s.category || 'Otros Servicios'; if (!servicesByCategory[cat]) { servicesByCategory[cat] = []; } servicesByCategory[cat].push(s); }); return (
{/* ─── Hero Header ─────────────────────────────────────── */}
Experiencias de Bienestar

El arte de
cuidarte

Tratamientos diseñados para nutrir tu piel, relajar tu cuerpo y reconectar con tu bienestar. Cada sesión es un acto de amor propio.

{/* ─── Banner de Promociones ─────────────────────────── */}
Propuestas Especiales

Promociones Destacadas

{[ { title: 'Dúo Limpieza Facial', badge: 'Dos Personas', price: '$40.000', original: '$50.000', desc: 'Reserva para ti y un acompañante. Incluye dos limpiezas faciales profundas completas.', targetId: 'facial' }, { title: 'Lash Lifting Radiante', badge: 'Mirada Perfecta', price: 'Consultar', original: null, desc: 'Curvatura natural y definición desde la raíz. Destaca tu mirada sin necesidad de extensiones.', targetId: 'lash' }, { title: 'Tratamiento Reductor', badge: '10 Sesiones', price: '$220.000', original: '$250.000', desc: 'Plan intensivo reductor y reafirmante con aparatología avanzada y masajes drenantes.', targetId: 'reductor' } ].map((promo, idx) => (
{ const targetEl = document.querySelector(`[data-key="${promo.targetId}"]`); if (targetEl) { targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }} style={{ background: '#fff', borderRadius: '16px', padding: '24px', border: '1px solid rgba(136, 201, 193, 0.15)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 4px 12px rgba(0,0,0,0.01)', cursor: 'pointer' }} >
{promo.badge}

{promo.title}

{promo.desc}

{promo.original && ( {promo.original} )} {promo.price}
Ver más →
))}
{/* ─── Filters ───────────────────────────────────────────── */}
{['Todos', ...allCategories].map(cat => ( ))}
{/* ─── Services List (grouped by category) ─────────────── */}
{categoriesOrder.map(categoryName => { const servicesInCat = servicesByCategory[categoryName] || []; if (servicesInCat.length === 0) return null; const isVis = visible[categoryName]; return (
{ refs.current[categoryName] = el; }} className={`svc5-category-block`} style={{ opacity: isVis ? 1 : 0, transform: isVis ? 'translateY(0)' : 'translateY(40px)', }} >

🌿 {categoryName}

{servicesInCat.map(s => (
{/* Image */}
{s.name} { e.target.src = `https://picsum.photos/seed/${s.id}/400/300`; }} />
{/* Details */}

{s.name}

{s.price}
{s.tag && ( {s.tag} )} ⏱ {s.duration} {s.alt && ( • {s.alt} )}

{s.desc}

{open === s.id && (

{s.desc}

{s.benefits.map(b => (
{b}
))}
)}
))}
); })}
{/* ─── Bottom CTA ─────────────────────────────────────── */}
¿No sabes cuál elegir?

Escríbenos y te ayudamos a encontrar el tratamiento ideal para ti.

{ e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 8px 28px rgba(37,211,102,0.45)'; }} onMouseLeave={e => { e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='0 4px 20px rgba(37,211,102,0.3)'; }} > Consultar por WhatsApp
); }; Object.assign(window, { ServiciosV5 });