// HomeV3 — Hero centrado con logo real, banner interactivo, cards femeninas, // Sobre Mí con foto protagonista, reseñas por categoría, CTA agenda destacado const LOGO_IMG = 'uploads/el-arte-de-quererte-brief-claude-design.jpg'; // ── Helpers ────────────────────────────────────────────────── const SectionLabel = ({ text }) => (
{text}
); const SectionTitle = ({ children, center = false, italic = true }) => (

{children}

); // ── SERVICE CARD (feminine, rounded, hover magic) ───────────── const ServiceCardV3 = ({ name, desc, price, duration, tag, img, needsCoordination, onBook }) => { const [hovered, setHovered] = React.useState(false); const handleBook = (e) => { if (e) e.stopPropagation(); if (needsCoordination) { const waUrl = `https://wa.me/56983059044?text=${encodeURIComponent( `Hola Fran! Me interesó el servicio de *${name}* y me gustaría coordinar una hora.` )}`; window.open(waUrl, '_blank'); } else { onBook(); } }; return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: '#fff', borderRadius: 24, overflow: 'hidden', boxShadow: hovered ? (needsCoordination ? '0 24px 64px rgba(37,211,102,0.22)' : '0 24px 64px rgba(136,201,193,0.22)') : '0 4px 20px rgba(0,0,0,0.05)', transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)', transform: hovered ? 'translateY(-8px)' : 'none', cursor: 'default', display: 'flex', flexDirection: 'column' }}> {/* Image */}
{name} { e.target.style.display='none'; }} /> {/* Soft overlay on hover */}
{tag && {tag}}
{/* Content */}

{name}

{desc}

{duration &&
{duration}
}
{price}
); }; // ── TESTIMONIAL CARD ────────────────────────────────────────── const TestiCard = ({ name, loc, text, featured }) => (
"

{text}

{name}
{loc}
); // ── HERO SECTION — self-contained, no external deps ────────── const HeroSection = ({ setPage, config }) => { const phrases = (config && config.heroPhrases) ? config.heroPhrases : ['Tu espacio de bienestar']; const quote = (config && config.heroQuote) ? config.heroQuote : 'Permítete ese momento de paz'; const [mouse, setMouse] = React.useState({ x: 50, y: 50 }); const [phraseIdx, setPhraseIdx] = React.useState(0); const [phrasePhase, setPhrasePhase] = React.useState('visible'); // 'visible' | 'exiting' | 'entering' const heroRef = React.useRef(null); const onMouseMove = (e) => { const r = (heroRef.current && heroRef.current.getBoundingClientRect()); if (!r) return; setMouse({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 }); }; React.useEffect(() => { const cycle = setInterval(() => { // 1. Exit upward setPhrasePhase('exiting'); // 2. Swap phrase + start entering from below setTimeout(() => { setPhraseIdx(i => (i + 1) % phrases.length); setPhrasePhase('entering'); // 3. Snap to entering start, then animate to visible setTimeout(() => setPhrasePhase('visible'), 30); }, 550); }, 5600); return () => clearInterval(cycle); }, []); return (
{/* Ken Burns bg — shifted down by nav height so logo clears the nav */}
{/* Overlay — stronger for readability */}
{/* Mouse spotlight */}
{/* Shimmer sweep */}
{/* ── CONTENT — z-index 10 ensures it's always on top ── */}
{/* Label pill */}
Cosmetología  ·  Masoterapia
{/* Quote */}

"{quote}"

{/* CTAs */}
{/* Rotating phrase — glass card */}

{phrases[phraseIdx]}

{/* Scroll indicator */}
Descubrir
); }; // ── HOME V3 ─────────────────────────────────────────────────── const HomeV3 = ({ setPage }) => { const [siteConfig, setSiteConfig] = React.useState(null); React.useEffect(() => { fetch('/api/config') .then(res => res.json()) .then(setSiteConfig) .catch(console.error); }, []); const [mounted, setMounted] = React.useState(false); const [promoHover, setPromoHover] = React.useState(null); const [testiCat, setTestiCat] = React.useState('todos'); React.useEffect(() => { setTimeout(() => setMounted(true), 80); }, []); const [services, setServices] = React.useState(() => { try { const stored = localStorage.getItem('eadq_services'); if (stored) { const parsed = JSON.parse(stored); return parsed.filter(s => s.show_on_home).sort((a,b) => (a.home_order || 0) - (b.home_order || 0)).slice(0, 6); } } catch (e) {} return []; }); React.useEffect(() => { fetch('/api/services') .then(res => res.json()) .then(data => { if (Array.isArray(data)) { const homeServices = data.filter(s => s.show_on_home).sort((a,b) => (a.home_order || 0) - (b.home_order || 0)).slice(0, 6); if (homeServices.length > 0) { const mapped = homeServices.map(s => ({ ...s, desc: s.description || s.desc || '', needsCoordination: s.needs_coordination !== undefined ? s.needs_coordination : s.needsCoordination })); setServices(mapped); } } }) .catch(console.error); }, []); React.useEffect(() => { const fetchServices = async () => { try { const response = await fetch('/api/services'); if (!response.ok) throw new Error('Failed to fetch services from API'); const data = await response.json(); if (Array.isArray(data) && data.length > 0) { const mapped = data.map(s => ({ ...s, desc: s.description || s.desc || '', needsCoordination: s.needs_coordination !== undefined ? s.needs_coordination : s.needsCoordination })); setServices(mapped); localStorage.setItem('eadq_services', JSON.stringify(mapped)); return; } } catch (err) { console.warn('⚠️ No se pudo obtener servicios del servidor, usando fallback local:', err); } // Fallback a localStorage try { const stored = localStorage.getItem('eadq_services'); if (stored) { setServices(JSON.parse(stored)); } } catch (e) { console.error('Error al cargar de localStorage:', e); } }; fetchServices(); }, []); const promos = (siteConfig && siteConfig.home && siteConfig.home.promos) ? siteConfig.home.promos : []; const fallbackTestis = [ { cat: 'faciales', name: 'Camila Rojas', loc: 'La Florida', text: 'Salí con la piel increíble. El ambiente es completamente acogedor y Fran sabe exactamente qué necesita cada piel.', featured: true }, { cat: 'masajes', name: 'Valentina Morales', loc: 'Ñuñoa', text: 'El masaje de relajación fue lo que mi cuerpo pedía hace meses. Ya agendé el próximo sin dudarlo.' }, { cat: 'pestañas', name: 'Daniela Pizarro', loc: 'Las Condes', text: 'El lash lifting quedó natural pero con un efecto impresionante. Muy profesional y detallista.' }, { cat: 'masajes', name: 'Sofía Herrera', loc: 'Peñalolén', text: 'El masaje descontracturante fue increíble. Las contracturas que tenía desde hace meses desaparecieron.' }, { cat: 'faciales', name: 'Isabela Contreras', loc: 'Macul', text: 'La limpieza facial me dejó la piel brillante. Fran explica todo el proceso y se nota su amor por lo que hace.' }, ]; const allTestis = (siteConfig && siteConfig.reviews && siteConfig.reviews.length > 0) ? siteConfig.reviews.sort((a,b) => a.order - b.order).map(r => ({ cat: 'todos', name: r.name, loc: r.city, text: r.message, featured: r.order === 1, rating: r.rating })) : fallbackTestis; const testiCats = (siteConfig && siteConfig.reviews && siteConfig.reviews.length > 0) ? ['todos'] : ['todos', 'faciales', 'masajes', 'pestañas']; const visibleTestis = testiCat === 'todos' ? allTestis : allTestis.filter(t => t.cat === testiCat); const fade = (i, delay = 0) => mounted ? { animation: `fadeUpHome 0.7s cubic-bezier(0.16,1,0.3,1) ${i * 0.1 + delay}s both` } : { opacity: 0 }; return (
{/* ── HERO — full-bleed image + spotlight + Ken Burns ── */} {/* ── PROMO BANNER — interactive cards ─────────────── */}
{/* Scrolling label */}
{Array(4).fill('Limpieza Facial · Masaje de Relajación · Lash Lifting 20% OFF · Tratamiento Reductor · Gift Cards · ').join('')}
{/* Promo cards */}
{promos.map((p, i) => (
setPage(p.page)} style={{ padding: '44px 40px', background: promoHover === i ? p.color : 'transparent', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.08)' : 'none', position: 'relative', overflow: 'hidden' }} onMouseEnter={() => setPromoHover(i)} onMouseLeave={() => setPromoHover(null)} >
{p.label}
{p.title}
{p.badge &&
{p.badge}
}
{p.price} {p.og && {p.og}}
Ver más →
))}
{/* ── SERVICIOS cards ───────────────────────────────── */}
Diseñados para ti

Cada servicio pensado para nutrir tu piel, relajar tu cuerpo y reconectar con tu bienestar.

{services.map((s, i) => (
setPage('agenda')} />
))}
{/* ── TESTIMONIOS — por categoría ───────────────────── */}
Lo que dicen
nuestras clientas
{/* Category tabs */}
{testiCats.map(c => ( ))}
{visibleTestis.length > 0 ? (
{visibleTestis.slice(0,3).map((t, i) => (
))}
) : (
No hay reseñas en esta categoría aún.
)}
{/* ── AGENDA / HORARIOS ─────────────────────────────── */}
Horarios de atención

Reserva tu cita online en cualquier momento. Disponible 24/7.

{/* Schedule cards */}
{(siteConfig && siteConfig.schedule && siteConfig.schedule.blocks ? siteConfig.schedule.blocks : [ { days: ['Lunes','Miércoles','Viernes'], time: '16:00 – 20:00', isClosed: false }, { days: ['Martes','Jueves',''], time: '08:00 – 20:00', isClosed: false }, { days: ['Sábado','',''], time: '09:00 – 15:00', isClosed: false }, { days: ['Domingo','',''], time: 'Cerrado', isClosed: true } ]).map((block, i) => { const bg = block.isClosed ? '#F5F5F5' : (i % 2 === 0 ? '#E8F5F3' : '#FCE8EC'); const color = block.isClosed ? '#ccc' : (i % 2 === 0 ? '#88C9C1' : '#F4B8C1'); const daysStr = block.days.filter(d => d).join(' · '); const timeStr = block.isClosed ? 'Cerrado' : block.time; return (
e.currentTarget.style.transform='scale(1.02)'} onMouseLeave={e => e.currentTarget.style.transform='scale(1)'} >
{daysStr}
{timeStr}
)})}
{siteConfig && siteConfig.schedule ? siteConfig.schedule.address : 'Mariano Sánchez Fontecilla 11950, Peñalolén'} · {siteConfig && siteConfig.schedule ? siteConfig.schedule.phone : '+56 9 8305 9044'}
{/* ── CTA AGENDA ────────────────────────────────────── */}

¿Lista para darte el momento que mereces?

Agenda tu sesión
en minutos

Elige tu horario, selecciona tu servicio y confirma en segundos. Te esperamos pronto.

); }; Object.assign(window, { HomeV3 });