// HomeV5 — Rediseño premium de la página de inicio
// Estilo: "Luxury / Refined Softness" · Mint, Peach, Gold, Off-white
// Incorpora un bloque dedicado para conectar con Instagram, adaptado para Babel Standalone.

// ── Iconos Internos ──────────────────────────────────────────
const IconInstaCircle = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
  </svg>
);

const IconHeartSolid = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ display: 'inline-block', marginRight: 4, verticalAlign: 'middle' }}>
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </svg>
);

const IconMessageSolid = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ display: 'inline-block', marginRight: 4, verticalAlign: 'middle' }}>
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </svg>
);

const IconStarSolid = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="#C9A96E" style={{ display: 'inline-block', marginRight: 2 }}>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  </svg>
);

// ── Helpers de Estructura Visual ──────────────────────────────
const Label5 = ({ text, color }) => {
  const textColor = color || '#88C9C1';
  return (
    <div style={{
      fontFamily: "'Outfit', sans-serif",
      fontSize: 10,
      letterSpacing: 5,
      color: textColor,
      textTransform: 'uppercase',
      fontWeight: 600,
      marginBottom: 16
    }}>
      {text}
    </div>
  );
};

const Heading5 = ({ children, center, italic, size, mb }) => {
  const isCenter = center !== undefined ? center : false;
  const isItalic = italic !== undefined ? italic : true;
  const fontSize = size || 'clamp(36px, 4vw, 54px)';
  const marginBottom = mb !== undefined ? mb : 24;

  return (
    <h2 style={{
      fontFamily: "'Cormorant Garamond', serif",
      fontSize: fontSize,
      fontWeight: isItalic ? 400 : 700,
      fontStyle: isItalic ? 'italic' : 'normal',
      color: '#1a1a1a',
      lineHeight: 1.1,
      margin: `0 0 ${marginBottom}px`,
      textAlign: isCenter ? 'center' : 'left'
    }}>
      {children}
    </h2>
  );
};

// ── Componente de Animación al Desplazar (Scroll Reveal) ──────
const ScrollRevealSection = ({ children, delay, direction }) => {
  const isDelay = delay !== undefined ? delay : 0;
  const dir = direction || 'up';
  const [inView, setInView] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const fallback = setTimeout(() => setInView(true), 400);
    if (typeof IntersectionObserver !== 'undefined') {
      const observer = new IntersectionObserver(
        (entries) => {
          if (entries[0].isIntersecting) {
            setInView(true);
            clearTimeout(fallback);
          }
        },
        { threshold: 0.05, rootMargin: '0px 0px -40px 0px' }
      );
      if (ref.current) observer.observe(ref.current);
      return () => {
        observer.disconnect();
        clearTimeout(fallback);
      };
    } else {
      setInView(true);
    }
  }, []);

  const getTransform = () => {
    if (inView) return 'translateY(0) translateX(0) scale(1)';
    if (dir === 'left') return 'translateX(-48px) translateY(0) scale(1)';
    if (dir === 'right') return 'translateX(48px) translateY(0) scale(1)';
    if (dir === 'scale') return 'translateY(20px) scale(0.97)';
    return 'translateY(36px) scale(1)';
  };

  return (
    <div
      ref={ref}
      style={{
        opacity: inView ? 1 : 0,
        transform: getTransform(),
        transition: `opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) ${isDelay}s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) ${isDelay}s`,
        willChange: inView ? 'auto' : 'transform, opacity'
      }}
    >
      {children}
    </div>
  );
};

// ── SERVICE CARD V5 ───────────────────────────────────────────
const ServiceCardV5 = ({ 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 {
      localStorage.setItem('eadq_selected_service_name', name);
      onBook();
    }
  };

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: '#fff',
        borderRadius: 24,
        overflow: 'hidden',
        boxShadow: hovered 
          ? (needsCoordination ? '0 24px 64px rgba(37,211,102,0.18)' : '0 24px 64px rgba(136,201,193,0.18)') 
          : '0 4px 20px rgba(0,0,0,0.04)',
        transition: 'all 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
        transform: hovered ? 'translateY(-8px)' : 'none',
        display: 'flex',
        flexDirection: 'column',
        border: '1px solid rgba(136, 201, 193, 0.12)',
        height: '100%'
      }}
    >
      {/* Image */}
      <div className="service-card-v5-img" style={{ position: 'relative', height: 210, overflow: 'hidden', background: 'linear-gradient(135deg, #E8F5F3 0%, #FCE8EC 100%)' }}>
        <img
          src={img && img.trim() !== '' ? img : 'https://picsum.photos/seed/' + name.toLowerCase().replace(/\s+/g, '-') + '/600/400'}
          alt={name}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            transition: 'transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
            transform: hovered ? 'scale(1.06)' : 'scale(1)'
          }}
          onError={(e) => { e.target.style.display = 'none'; }}
        />
        {/* Hover wash color */}
        <div style={{
          position: 'absolute',
          inset: 0,
          background: needsCoordination 
            ? 'linear-gradient(to top, rgba(37,211,102,0.3) 0%, transparent 60%)' 
            : 'linear-gradient(to top, rgba(136,201,193,0.3) 0%, transparent 60%)',
          opacity: hovered ? 1 : 0,
          transition: 'opacity 0.4s ease'
        }}/>
        {tag && (
          <span style={{
            position: 'absolute',
            top: 14,
            left: 14,
            background: 'rgba(250,250,248,0.92)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            color: '#88C9C1',
            fontSize: 9,
            fontFamily: "'Outfit', sans-serif",
            fontWeight: 700,
            letterSpacing: 2,
            padding: '5px 14px',
            borderRadius: 40,
            textTransform: 'uppercase',
            border: '1px solid rgba(136, 201, 193, 0.2)'
          }}>
            {tag}
          </span>
        )}
      </div>

      {/* Content */}
      <div className="service-card-v5-body" style={{ padding: '24px 26px 26px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h3 className="service-card-v5-title" style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 600, color: '#1a1a1a', margin: '0 0 8px', lineHeight: 1.2 }}>
          {name}
        </h3>
        <p className="service-card-v5-desc" style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#666', lineHeight: 1.7, margin: '0 0 16px', flex: 1 }}>
          {desc}
        </p>
        {duration && (
          <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: '#88C9C1', letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 20, fontWeight: 500 }}>
            {duration}
          </div>
        )}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto' }}>
          <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 700, color: '#1a1a1a' }}>
            {price}
          </span>
          <button
            onClick={handleBook}
            style={{
              background: hovered ? (needsCoordination ? '#25D366' : '#88C9C1') : 'transparent',
              color: hovered ? '#fff' : (needsCoordination ? '#25D366' : '#88C9C1'),
              border: '1.5px solid ' + (needsCoordination ? 'rgba(37,211,102,0.6)' : 'rgba(136,201,193,0.6)'),
              cursor: 'pointer',
              fontFamily: "'Outfit', sans-serif",
              fontSize: 10,
              letterSpacing: 2,
              fontWeight: 700,
              padding: '10px 22px',
              borderRadius: 40,
              textTransform: 'uppercase',
              transition: 'all 0.35s cubic-bezier(0.16, 1, 0.3, 1)'
            }}
          >
            {needsCoordination ? 'Coordinar' : 'Reservar'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ── TESTIMONIAL CARD V5 ───────────────────────────────────────
const TestiCardV5 = ({ name, loc, text, featured }) => (
  <div style={{
    background: featured ? 'linear-gradient(135deg, #88C9C1 0%, #6bb5ac 100%)' : '#fff',
    borderRadius: 24,
    padding: featured ? '44px 38px' : '36px 32px',
    boxShadow: featured ? '0 16px 44px rgba(136,201,193,0.22)' : '0 4px 24px rgba(0,0,0,0.04)',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    minHeight: 240,
    border: featured ? 'none' : '1px solid rgba(136, 201, 193, 0.12)'
  }}>
    <div>
      <div style={{ display: 'flex', gap: 3, marginBottom: 18 }}>
        {[1, 2, 3, 4, 5].map(star => <IconStarSolid key={star}/>)}
      </div>
      <p style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontSize: featured ? 21 : 18,
        fontStyle: 'italic',
        color: featured ? '#fff' : '#1a1a1a',
        lineHeight: 1.65,
        margin: 0
      }}>
        "{text}"
      </p>
    </div>
    <div style={{
      marginTop: 28,
      paddingTop: 20,
      borderTop: '1px solid ' + (featured ? 'rgba(255,255,255,0.2)' : 'rgba(136,201,193,0.18)')
    }}>
      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, fontWeight: 700, color: featured ? '#fff' : '#1a1a1a', letterSpacing: 0.5 }}>
        {name}
      </div>
      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: featured ? 'rgba(255,255,255,0.7)' : '#88C9C1', marginTop: 3, letterSpacing: 1.5, textTransform: 'uppercase' }}>
        {loc}
      </div>
    </div>
  </div>
);

// ── HERO V5 ───────────────────────────────────────────────────
const HeroV5 = ({ setPage, config }) => {
  const defaultPhrases = [
    'Tu espacio de bienestar, belleza y amor propio',
    'Porque mereces un momento solo para ti',
    'Cada tratamiento, un acto de amor propio',
    'Bienvenida a un lugar donde el cuidado es arte'
  ];
  const phrases = (config && config.heroPhrases && config.heroPhrases.length > 0) ? config.heroPhrases : defaultPhrases;
  const quote = (config && config.heroQuote) ? config.heroQuote : 'Permítete ese momento de paz';

  const [mouse, setMouse] = React.useState({ x: 50, y: 50 });
  const [scrollY, setScrollY] = React.useState(0);
  const [phraseIdx, setPhraseIdx] = React.useState(0);
  const [phase, setPhase] = React.useState('visible');
  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 handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setPhase('exiting');
      setTimeout(() => {
        setPhraseIdx(i => (i + 1) % phrases.length);
        setPhase('entering');
        setTimeout(() => setPhase('visible'), 30);
      }, 550);
    }, 5600);
    return () => clearInterval(timer);
  }, [phrases]);

  return (
    <section
      ref={heroRef}
      onMouseMove={onMouseMove}
      style={{
        position: 'relative',
        minHeight: '100dvh',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center'
      }}
    >
      <style>{`
        @keyframes kenBurnsV5 { from { transform:scale(1); } to { transform:scale(1.08) translateY(-1%); } }
        @keyframes shimmerV5 { 0% { left:-100%; } 60%,100% { left:160%; } }
        @keyframes elegantRevealV5 {
          0% { opacity: 0; transform: translateY(36px) scale(0.97); filter: blur(6px); }
          100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes scrollDotV5 {
          0% { transform: translateY(0); opacity: 0.3; }
          50% { transform: translateY(6px); opacity: 1; }
          100% { transform: translateY(0); opacity: 0.3; }
        }
        .h5-el-0 { animation: elegantRevealV5 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
        .h5-title-reveal { animation: elegantRevealV5 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
        .h5-el-2 { animation: elegantRevealV5 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
        .h5-el-3 { animation: elegantRevealV5 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both; }
        .h5-el-4 { animation: elegantRevealV5 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both; }
      `}</style>

      {/* Background with Ken Burns + Parallax scroll effect */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          zIndex: 0,
          transform: 'translateY(' + (scrollY * 0.15) + 'px) translateZ(0)',
          overflow: 'hidden'
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: '-8%',
            animation: 'kenBurnsV5 18s ease-in-out infinite alternate',
            backgroundImage: "url('uploads/Gemini_Generated_Image_8j2b908j2b908j2b.png')",
            backgroundSize: 'cover',
            backgroundPosition: 'center 74px'
          }}
        />
      </div>

      {/* Multilayer overlays */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(170deg, rgba(5,18,16,0.5) 0%, rgba(5,18,16,0.65) 45%, rgba(5,18,16,0.85) 100%)' }}/>

      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(to top, rgba(201,169,110,0.12) 0%, transparent 40%)' }}/>

      {/* Spotlight effect */}
      <div style={{
        position: 'absolute',
        inset: 0,
        zIndex: 2,
        pointerEvents: 'none',
        background: `radial-gradient(ellipse 520px 400px at ${mouse.x}% ${mouse.y}%, rgba(136,201,193,0.09) 0%, transparent 65%)`,
        transition: 'background 0.1s linear'
      }}/>

      {/* Shimmer sweep */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute',
          top: 0,
          left: '-100%',
          width: '50%',
          height: '100%',
          background: 'linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.025) 50%, transparent 65%)',
          animation: 'shimmerV5 14s ease-in-out infinite'
        }}/>
      </div>

      {/* Hero content */}
      <div style={{ position: 'relative', zIndex: 10, padding: '148px 24px 80px', maxWidth: 840, width: '100%' }}>
        {/* Label badge pill */}
        <div className="h5-el-0" style={{ marginBottom: 40 }}>
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 12,
            fontFamily: "'Outfit', sans-serif",
            fontSize: 10,
            letterSpacing: 6,
            color: 'rgba(255,255,255,0.95)',
            textTransform: 'uppercase',
            fontWeight: 600,
            background: 'rgba(136,201,193,0.18)',
            backdropFilter: 'blur(16px)',
            WebkitBackdropFilter: 'blur(16px)',
            border: '1px solid rgba(136,201,193,0.4)',
            padding: '12px 34px',
            borderRadius: 50,
            boxShadow: '0 0 36px rgba(136,201,193,0.15), inset 0 1px 0 rgba(255,255,255,0.08)'
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#88C9C1', display: 'inline-block', boxShadow: '0 0 10px rgba(136,201,193,0.8)' }}/>
            ✨ Cosmetología &nbsp;·&nbsp; Masoterapia ✨
          </span>
        </div>

        {/* Title */}
        <div className="h5-title-reveal" style={{ marginBottom: 20 }}>
          <h1 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 'clamp(52px, 7.2vw, 92px)',
            fontWeight: 300,
            fontStyle: 'italic',
            color: '#ffffff',
            textShadow: '0 2px 50px rgba(0,0,0,0.35)',
            lineHeight: 1.0,
            margin: '0 0 8px',
            letterSpacing: '-0.015em'
          }}>
            El Arte de Quererte
          </h1>
          <div style={{ width: 64, height: 1, background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.7), transparent)', margin: '0 auto' }}/>
        </div>

        {/* Tagline quote */}
        <div className="h5-el-2" style={{ marginBottom: 52 }}>
          <p style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 'clamp(22px, 2.8vw, 32px)',
            fontWeight: 400,
            fontStyle: 'italic',
            color: '#C9A96E',
            textShadow: '0 0 40px rgba(201,169,110,0.4)',
            lineHeight: 1.3,
            margin: 0
          }}>
            "{quote}"
          </p>
        </div>

        {/* Action buttons */}
        <div className="h5-el-3" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 52 }}>
          <button
            onClick={() => setPage('agenda')}
            style={{
              background: '#88C9C1',
              color: '#fff',
              border: 'none',
              cursor: 'pointer',
              fontFamily: "'Outfit', sans-serif",
              fontSize: 11,
              letterSpacing: 2.5,
              textTransform: 'uppercase',
              fontWeight: 700,
              padding: '17px 46px',
              borderRadius: 50,
              boxShadow: '0 8px 32px rgba(136,201,193,0.5)',
              transition: 'all 0.35s cubic-bezier(0.16, 1, 0.3, 1)'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#6bb5ac';
              e.currentTarget.style.transform = 'translateY(-3px)';
              e.currentTarget.style.boxShadow = '0 16px 44px rgba(136,201,193,0.6)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = '#88C9C1';
              e.currentTarget.style.transform = 'none';
              e.currentTarget.style.boxShadow = '0 8px 32px rgba(136,201,193,0.5)';
            }}
          >
            Agenda tu Cita
          </button>

          <button
            onClick={() => setPage('servicios')}
            style={{
              background: 'rgba(255,255,255,0.11)',
              color: '#fff',
              border: '1.5px solid rgba(255,255,255,0.38)',
              cursor: 'pointer',
              fontFamily: "'Outfit', sans-serif",
              fontSize: 11,
              letterSpacing: 2.5,
              textTransform: 'uppercase',
              fontWeight: 600,
              padding: '17px 38px',
              borderRadius: 50,
              backdropFilter: 'blur(16px)',
              WebkitBackdropFilter: 'blur(16px)',
              transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.22)';
              e.currentTarget.style.borderColor = 'rgba(255,255,255,0.6)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.11)';
              e.currentTarget.style.borderColor = 'rgba(255,255,255,0.38)';
            }}
          >
            Ver Servicios
          </button>
        </div>

        {/* Cycling Phrase slider */}
        <div className="h5-el-4" style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{
            background: 'rgba(5,18,16,0.42)',
            backdropFilter: 'blur(24px)',
            WebkitBackdropFilter: 'blur(24px)',
            border: '1px solid rgba(255,255,255,0.12)',
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06)',
            borderRadius: 16,
            padding: '20px 38px',
            maxWidth: 660,
            width: '100%',
            minHeight: 68,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden'
          }}>
            <p style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 'clamp(13px, 1.3vw, 15px)',
              fontStyle: 'italic',
              color: 'rgba(255,255,255,0.92)',
              lineHeight: 1.6,
              margin: 0,
              opacity: phase === 'visible' ? 1 : 0,
              transform: phase === 'exiting' ? 'translateY(-20px)' : (phase === 'entering' ? 'translateY(20px)' : 'translateY(0)'),
              transition: phase === 'visible'
                ? 'opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)'
                : (phase === 'exiting' ? 'opacity 0.45s ease-in, transform 0.45s ease-in' : 'none')
            }}>
              {phrases[phraseIdx]}
            </p>
          </div>
        </div>
      </div>

      {/* Discover scroll indicator (Removed for cleaner mobile/desktop view) */}
      <div className="h5-el-4" style={{ display: 'none' }}></div>

    </section>
  );
};

// ── INSTAGRAM SECTION (NUEVO & INTERACTIVO) ──────────────────
const InstagramSection = ({ setPage }) => {
  const [hoverIdx, setHoverIdx] = React.useState(null);
  const [activePost, setActivePost] = React.useState(null);

  // 6 mock posts structured with local spa images, captions, likes, comments, and booking target
  const instaPosts = [
    {
      img: 'uploads/gallery_facial_result.png',
      likes: 184,
      comments: 12,
      caption: 'Limpieza profunda y desconexión total 💆‍♀️✨. Devuelve la luz natural a tu piel. Tratamientos personalizados utilizando principios activos de alta gama y aparatología avanzada para remover impurezas y renovar tu piel. ¡Reserva hoy y regálate una sesión!',
      serviceName: 'Limpieza Facial Profunda',
      price: '$25.000',
      commentsList: [
        { user: 'coni_valenzuela', text: '¡Salí con la piel brillante! El mejor tratamiento que me he hecho. ✨' },
        { user: 'pau_andrea', text: 'Un espacio maravilloso de desconexión total.' }
      ]
    },
    {
      img: 'uploads/lash_service.png',
      likes: 98,
      comments: 6,
      caption: 'Lash Lifting: Mirada fresca, natural y arqueada sin necesidad de extensiones. 👀🌸 Un proceso delicado donde curvamos y teñimos tus pestañas naturales desde la raíz. La duración promedio es de 6 a 8 semanas. ¡Atrévete a lucir una mirada expresiva!',
      serviceName: 'Lash Lifting',
      price: 'Consultar',
      commentsList: [
        { user: 'javiera.p', text: 'Quedaron hermosas y súper naturales! Me duró casi dos meses 😍.' },
        { user: 'cotecarrasco', text: 'Seca Fran! El lifting me encanta.' }
      ]
    },
    {
      img: 'uploads/massage_service.png',
      likes: 215,
      comments: 19,
      caption: 'El arte de soltar tensiones. Una hora de calma pura para tu cuerpo y mente. 🧘‍♀️🌿 Nuestro masaje de relajación combina aromaterapia y técnicas envolventes para disolver el estrés acumulado de la semana. Un momento único de bienestar en Santiago.',
      serviceName: 'Masaje de Relajación',
      price: '$25.000',
      commentsList: [
        { user: 'valeriv', text: 'Literalmente salí flotando de la consulta. ¡Demasiado recomendado!' },
        { user: 'loreto_g', text: 'Aromas exquisitos y una camilla súper cómoda.' }
      ]
    },
    {
      img: 'uploads/spa_ambiance.png',
      likes: 142,
      comments: 8,
      caption: 'Nuestro santuario en Peñalolén. Diseñado especialmente para tu tranquilidad. 🏡🕯️ Hemos acondicionado cada detalle de nuestra consulta para que comiences a relajarte desde el primer segundo. Aromaterapia, toallas tibias y música suave.',
      serviceName: 'Masaje de Relajación',
      price: '$25.000',
      commentsList: [
        { user: 'cami_rojas', text: 'El lugar transmite una paz increíble. Dan ganas de quedarse a vivir allí.' },
        { user: 'fran.arellano', text: 'Excelente higiene y ambientación impecable 🌸.' }
      ]
    },
    {
      img: 'uploads/body_treatment.png',
      likes: 167,
      comments: 11,
      caption: 'Tratamientos corporales personalizados. Resultados visibles con técnicas no invasivas. 💫 Combinamos masajes manuales, aparatología específica y drenaje linfático para moldear tu figura y tonificar la piel. Agenda una evaluación previa.',
      serviceName: 'Tratamiento Reductor',
      price: '$220.000',
      commentsList: [
        { user: 'dani.pizarro', text: 'Los resultados se notan desde las primeras sesiones. Increíble servicio!' },
        { user: 'cotecarrasco', text: 'Muy profesional Fran y explica todo muy claro.' }
      ]
    },
    {
      img: 'uploads/gift_card_beauty.png',
      likes: 129,
      comments: 4,
      caption: 'Regala amor propio 🎁. Sorprende con una Gift Card digital o física para cualquier servicio. Elige el tratamiento o monto libre para regalar un momento de paz a esa persona especial. Envío inmediato por email o WhatsApp.',
      serviceName: 'Gift Card',
      price: 'A tu medida',
      commentsList: [
        { user: 'sofi.herrera', text: 'Se la regalé a mi mamá y le fascinó! El mejor regalo de cumpleaños.' },
        { user: 'm.morales', text: 'Súper rápido el envío de la tarjeta digital, salvador total!' }
      ]
    }
  ];

  return (
    <section style={{ position: 'relative', padding: '100px 24px', background: '#FAFAF8', borderTop: '1px solid rgba(136,201,193,0.15)', zIndex: 5 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        
        {/* Instagram Profile Header */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 52 }}>
          <Label5 text="Conecta en Redes"/>
          <Heading5 center italic size="42px" mb={12}>Síguenos en Instagram</Heading5>
          
          <a
            href="https://instagram.com/elartedequererte.fran"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              textDecoration: 'none',
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              background: 'rgba(136,201,193,0.06)',
              border: '1px solid rgba(136,201,193,0.22)',
              borderRadius: 50,
              padding: '10px 24px',
              transition: 'all 0.3s ease',
              marginBottom: 32
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(136,201,193,0.12)';
              e.currentTarget.style.borderColor = 'rgba(136,201,193,0.4)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'rgba(136,201,193,0.06)';
              e.currentTarget.style.borderColor = 'rgba(136,201,193,0.22)';
            }}
          >
            <span style={{ color: '#88C9C1' }}><IconInstaCircle/></span>
            <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14, fontWeight: 600, color: '#1a1a1a', letterSpacing: 0.5 }}>
              @elartedequererte.fran
            </span>
          </a>

          {/* Social Stats Info */}
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            gap: 40,
            fontFamily: "'Outfit', sans-serif",
            fontSize: 13,
            color: '#666',
            marginBottom: 20
          }}>
            <div><strong>148</strong> publicaciones</div>
            <div><strong>3.4k</strong> seguidores</div>
            <div><strong>518</strong> seguidos</div>
          </div>
          
          <p style={{
            fontFamily: "'Outfit', sans-serif",
            fontSize: 14,
            color: '#7a7a7a',
            lineHeight: 1.6,
            maxWidth: '52ch',
            margin: '0 auto 12px'
          }}>
            Tips de cosmetología, recomendaciones de cuidado en casa, ofertas exclusivas y un vistazo al día a día en nuestra consulta residencial de Peñalolén. ¡Haz clic en cualquier publicación para ver detalles y reservar!
          </p>
        </div>

        {/* 3x2 / Responsive Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 24,
          marginBottom: 52
        }}>
          {instaPosts.map((post, idx) => {
            const isHovered = hoverIdx === idx;
            return (
              <div
                key={idx}
                onClick={() => setActivePost(post)}
                onMouseEnter={() => setHoverIdx(idx)}
                onMouseLeave={() => setHoverIdx(null)}
                style={{
                  borderRadius: 20,
                  cursor: 'pointer',
                  aspectRatio: '1 / 1',
                  display: 'block',
                  transform: isHovered ? 'translateY(-10px) scale(1.02)' : 'translateY(0) scale(1)',
                  transition: 'transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
                  boxShadow: isHovered ? '0 20px 48px rgba(136,201,193,0.22)' : '0 4px 16px rgba(0,0,0,0.04)',
                }}
              >
                {/* Inner: clips image but doesn't block the outer transform */}
                <div style={{
                  width: '100%',
                  height: '100%',
                  borderRadius: 20,
                  overflow: 'hidden',
                  border: '1px solid rgba(136, 201, 193, 0.12)',
                  position: 'relative'
                }}>
                  {/* Background Image */}
                  <img
                    src={post.img}
                    alt="Publicación de Instagram"
                    style={{
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover',
                      display: 'block',
                      transition: 'transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
                      transform: isHovered ? 'scale(1.05)' : 'scale(1)'
                    }}
                    onError={(e) => { e.target.src = 'https://picsum.photos/seed/insta-' + idx + '/500/500'; }}
                  />

                  {/* Frosted Glass Overlay */}
                  <div style={{
                    position: 'absolute',
                    inset: 0,
                    background: 'rgba(255, 255, 255, 0.92)',
                    backdropFilter: 'blur(10px)',
                    WebkitBackdropFilter: 'blur(10px)',
                    opacity: isHovered ? 1 : 0,
                    transition: 'opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    padding: 24,
                    boxSizing: 'border-box'
                  }}>
                    {/* Top: Icon & Follow */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ color: '#88C9C1' }}><IconInstaCircle/></span>
                      <span style={{
                        fontFamily: "'Outfit', sans-serif",
                        fontSize: 10,
                        fontWeight: 700,
                        color: '#C9A96E',
                        letterSpacing: 1.5,
                        textTransform: 'uppercase'
                      }}>
                        Ver Post
                      </span>
                    </div>

                    {/* Mid: Text Caption */}
                    <div style={{ margin: '14px 0' }}>
                      <p style={{
                        fontFamily: "'Outfit', sans-serif",
                        fontSize: 13,
                        color: '#333',
                        lineHeight: 1.5,
                        margin: 0,
                        display: '-webkit-box',
                        WebkitLineClamp: 3,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden'
                      }}>
                        {post.caption}
                      </p>
                    </div>

                    {/* Bottom: Interactive Stats */}
                    <div style={{
                      display: 'flex',
                      gap: 18,
                      fontFamily: "'Outfit', sans-serif",
                      fontSize: 12,
                      color: '#666',
                      borderTop: '1px solid rgba(136, 201, 193, 0.18)',
                      paddingTop: 14
                    }}>
                      <span style={{ display: 'flex', alignItems: 'center' }}>
                        <IconHeartSolid/> {post.likes}
                      </span>
                      <span style={{ display: 'flex', alignItems: 'center' }}>
                        <IconMessageSolid/> {post.comments}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Wide Follow Button */}
        <div style={{ textAlign: 'center' }}>
          <a
            href="https://instagram.com/elartedequererte.fran"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              textDecoration: 'none',
              background: 'linear-gradient(135deg, #88C9C1, #6bb5ac)',
              color: '#fff',
              border: 'none',
              padding: '16px 44px',
              borderRadius: 50,
              fontFamily: "'Outfit', sans-serif",
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: 2,
              textTransform: 'uppercase',
              cursor: 'pointer',
              transition: 'all 0.3s cubic-bezier(0.22, 1, 0.36, 1)',
              boxShadow: '0 4px 15px rgba(136, 201, 193, 0.25)'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-2px)';
              e.currentTarget.style.boxShadow = '0 8px 24px rgba(136, 201, 193, 0.45)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = '0 4px 15px rgba(136, 201, 193, 0.25)';
            }}
          >
            Ver más en Instagram
          </a>
        </div>

      </div>

      {/* Lightbox Modal detail popup */}
      {activePost && (
        <div
          onClick={() => setActivePost(null)}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 1000,
            background: 'rgba(15, 23, 21, 0.85)',
            backdropFilter: 'blur(16px)',
            WebkitBackdropFilter: 'blur(16px)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 24,
            animation: 'fadeInInstaModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) both'
          }}
        >
          <style>{`
            @keyframes fadeInInstaModal { from { opacity: 0; } to { opacity: 1; } }
            @keyframes scaleInInstaModal { from { transform: scale(0.92) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
            .insta-modal-card {
              display: flex;
              background: #fff;
              border-radius: 24px;
              overflow: hidden;
              max-width: 920px;
              width: 100%;
              max-height: 85vh;
              box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3);
              animation: scaleInInstaModal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
            }
            .insta-modal-img {
              width: 55%;
              background: #0d1211;
              position: relative;
              display: flex;
              align-items: center;
              justifyContent: center;
            }
            .insta-modal-info {
              width: 45%;
              padding: 36px;
              display: flex;
              flex-direction: column;
              justifyContent: space-between;
              box-sizing: border-box;
              overflow-y: auto;
            }
            @media (max-width: 780px) {
              .insta-modal-card { flex-direction: column; max-height: 90vh; }
              .insta-modal-img { width: 100%; height: 280px; }
              .insta-modal-info { width: 100%; padding: 24px; }
            }
          `}</style>
          <div
            className="insta-modal-card"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Image side */}
            <div className="insta-modal-img">
              <img
                src={activePost.img}
                alt="Instagram Ampliado"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                onError={(e) => { e.target.src = 'https://picsum.photos/seed/insta-full/800/800'; }}
              />
            </div>

            {/* Content side */}
            <div className="insta-modal-info">
              {/* Header profile row */}
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <img
                      src="uploads/Fran Perfil.jpg"
                      alt="Fran Profile"
                      style={{ width: 34, height: 34, borderRadius: '50%', objectFit: 'cover' }}
                      onError={(e) => { e.target.src = 'https://picsum.photos/seed/avatar/100/100'; }}
                    />
                    <div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, fontWeight: 700, color: '#1a1a1a' }}>
                        elartedequererte.fran
                      </div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: '#9a9a9a', letterSpacing: 0.5 }}>
                        Peñalolén, Santiago
                      </div>
                    </div>
                  </div>
                  <button
                    onClick={() => setActivePost(null)}
                    style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 28, color: '#bbb', lineHeight: 1 }}
                    onMouseEnter={e => e.target.style.color = '#1a1a1a'}
                    onMouseLeave={e => e.target.style.color = '#bbb'}
                  >
                    ×
                  </button>
                </div>

                {/* Caption scrollable */}
                <p style={{
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 13.5,
                  color: '#444',
                  lineHeight: 1.6,
                  marginBottom: 24,
                  maxHeight: '120px',
                  overflowY: 'auto',
                  borderBottom: '1px solid rgba(136,201,193,0.12)',
                  paddingBottom: 16
                }}>
                  {activePost.caption}
                </p>

                {/* Mock Comments list */}
                <div style={{ marginBottom: 24 }}>
                  <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: '#9a9a9a', textTransform: 'uppercase', letterSpacing: 1, fontWeight: 700, marginBottom: 12 }}>
                    Comentarios
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {activePost.commentsList && activePost.commentsList.map((c, i) => (
                      <div key={i} style={{ fontSize: 12.5, fontFamily: "'Outfit', sans-serif", lineHeight: 1.4 }}>
                        <strong style={{ color: '#1a1a1a', marginRight: 6 }}>{c.user}</strong>
                        <span style={{ color: '#555' }}>{c.text}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Booking section */}
              <div style={{ borderTop: '1px solid rgba(136,201,193,0.12)', paddingTop: 20 }}>
                {activePost.serviceName ? (
                  <div style={{ background: 'rgba(136,201,193,0.05)', border: '1px solid rgba(136,201,193,0.22)', borderRadius: 16, padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 14 }}>
                    <div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: '#88C9C1', letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 600, marginBottom: 2 }}>
                        Tratamiento Publicado
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                        <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 19, fontWeight: 700, color: '#1a1a1a' }}>
                          {activePost.serviceName}
                        </span>
                        <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, fontWeight: 600, color: '#C9A96E' }}>
                          {activePost.price}
                        </span>
                      </div>
                    </div>
                    <button
                      onClick={() => {
                        localStorage.setItem('eadq_selected_service_name', activePost.serviceName);
                        setActivePost(null);
                        setPage('agenda');
                      }}
                      style={{
                        background: 'linear-gradient(135deg, #88C9C1, #6bb5ac)',
                        color: '#fff',
                        border: 'none',
                        cursor: 'pointer',
                        fontFamily: "'Outfit', sans-serif",
                        fontSize: 11,
                        letterSpacing: 1.5,
                        textTransform: 'uppercase',
                        fontWeight: 700,
                        padding: '12px 20px',
                        borderRadius: 30,
                        transition: 'transform 0.2s',
                        boxShadow: '0 4px 12px rgba(136,201,193,0.2)'
                      }}
                      onMouseEnter={(e) => e.target.style.transform = 'scale(1.02)'}
                      onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
                    >
                      Reservar tratamiento de la foto
                    </button>
                  </div>
                ) : (
                  <button
                    onClick={() => { setActivePost(null); setPage('agenda'); }}
                    style={{
                      width: '100%',
                      background: 'linear-gradient(135deg, #88C9C1, #6bb5ac)',
                      color: '#fff',
                      border: 'none',
                      cursor: 'pointer',
                      fontFamily: "'Outfit', sans-serif",
                      fontSize: 11,
                      letterSpacing: 2,
                      textTransform: 'uppercase',
                      fontWeight: 700,
                      padding: '14px 20px',
                      borderRadius: 30,
                      marginBottom: 14,
                      boxShadow: '0 4px 12px rgba(136,201,193,0.2)'
                    }}
                  >
                    Agendar una Cita Online
                  </button>
                )}
                
                {/* External instagram direct link */}
                <a
                  href="https://instagram.com/elartedequererte.fran"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: 8,
                    fontFamily: "'Outfit', sans-serif",
                    fontSize: 11,
                    color: '#7a7a7a',
                    textDecoration: 'none',
                    letterSpacing: 1,
                    textTransform: 'uppercase',
                    textAlign: 'center'
                  }}
                  onMouseEnter={e => e.target.style.color = '#1a1a1a'}
                  onMouseLeave={e => e.target.style.color = '#7a7a7a'}
                >
                  <IconInstaCircle/> Ver post original en Instagram
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

const RecomendadorSection = ({ setPage }) => {
  const [step, setStep] = React.useState(0); // 0: intro, 1: objetivo, 2: tiempo, 3: zona, 'loading', 4: result
  const [answers, setAnswers] = React.useState({ objetivo: '', tiempo: '', zona: '' });
  const [loadingMsg, setLoadingMsg] = React.useState('Analizando tus respuestas...');
  const [selectingValue, setSelectingValue] = React.useState(null);
  const [loaderPercent, setLoaderPercent] = React.useState(0);
  const [resultPercent, setResultPercent] = React.useState(0);

  const handleSelectOption = (key, value) => {
    if (selectingValue) return; // guard against double clicks
    setSelectingValue(value);
    
    const nextAnswers = Object.assign({}, answers, { [key]: value });
    setAnswers(nextAnswers);
    
    setTimeout(() => {
      setSelectingValue(null);
      if (step === 3) {
        setStep('loading');
      } else {
        setStep(prev => prev + 1);
      }
    }, 450);
  };

  React.useEffect(() => {
    if (step === 'loading') {
      setLoaderPercent(0);
      const start = Date.now();
      const duration = 2200;
      
      const interval = setInterval(() => {
        const elapsed = Date.now() - start;
        const progress = Math.min(1, elapsed / duration);
        const percent = Math.floor(progress * 100);
        setLoaderPercent(percent);
        
        if (percent < 35) {
          setLoadingMsg('Sintonizando tu energía corporal...');
        } else if (percent < 70) {
          setLoadingMsg('Filtrando rituales de bienestar...');
        } else {
          setLoadingMsg('Creando tu fórmula personalizada...');
        }

        if (progress >= 1) {
          clearInterval(interval);
          setStep(4);
        }
      }, 30);
      
      return () => clearInterval(interval);
    }
  }, [step]);

  React.useEffect(() => {
    if (step === 4) {
      setResultPercent(0);
      const t = setTimeout(() => {
        setResultPercent(98);
      }, 100);
      return () => clearTimeout(t);
    }
  }, [step]);

  const resetQuiz = () => {
    setAnswers({ objetivo: '', tiempo: '', zona: '' });
    setSelectingValue(null);
    setLoaderPercent(0);
    setResultPercent(0);
    setStep(1);
  };

  const getRecommendation = () => {
    const { objetivo, zona } = answers;

    if (objetivo === 'masajes') {
      if (zona === 'cuerpo') {
        return {
          name: 'Masaje Descontracturante',
          price: 'desde $25.000',
          duration: '60 min',
          img: 'uploads/massage_service.png',
          desc: 'Masaje de presión media-alta ideal para disolver tensiones y contracturas localizadas. Perfecto para restaurar la elasticidad muscular.'
        };
      }
      return {
        name: 'Masaje de Relajación',
        price: '$25.000',
        duration: '60 min',
        img: 'uploads/massage_service.png',
        desc: 'Sesión integral de masoterapia relajante con aromaterapia. Disuelve el estrés acumulado de la semana y reconecta con tu cuerpo.'
      };
    }

    if (objetivo === 'facial') {
      return {
        name: 'Limpieza Facial Profunda',
        price: '$25.000',
        duration: '60 min',
        img: 'uploads/facial_service.png',
        desc: 'Tratamiento facial restaurador con exfoliación, vapor y aparatología para purificar los poros en profundidad y devolver el brillo natural.'
      };
    }

    if (objetivo === 'mirada') {
      return {
        name: 'Lash Lifting',
        price: 'Consultar',
        duration: '45 min',
        img: 'uploads/lash_service.png',
        desc: 'Curva y define tus pestañas naturales desde la raíz sin extensiones. Incluye tintura para unas pestañas con mayor espesor y definición.'
      };
    }

    if (objetivo === 'reductor') {
      return {
        name: 'Tratamiento Reductor',
        price: '$220.000',
        duration: '10 sesiones',
        img: 'uploads/body_treatment.png',
        desc: 'Tratamiento reductivo y reafirmante localizado. Combina masajes de drenaje, masoterapia y aparatología en un pack completo.'
      };
    }

    return {
      name: 'Limpieza Facial Profunda',
      price: '$25.000',
      duration: '60 min',
      img: 'uploads/facial_service.png',
      desc: 'Remueve impurezas, hidrata y devuelve el brillo natural a tu rostro. Ideal para comenzar tu camino de cuidado personal.'
    };
  };

  const recommendation = getRecommendation();

  const handleBook = () => {
    localStorage.setItem('eadq_selected_service_name', recommendation.name);
    setPage('agenda');
  };

  const getRationale = () => {
    const { objetivo, tiempo, zona } = answers;
    let text = "Hemos diseñado esta recomendación personalizada para ti. ";
    
    if (objetivo === 'masajes') {
      text += "Dado que tu prioridad actual es desconectarte y aliviar la tensión corporal, ";
    } else if (objetivo === 'facial') {
      text += "Como tu foco está en la limpieza, hidratación y luminosidad de tu piel, ";
    } else if (objetivo === 'mirada') {
      text += "Para destacar la belleza natural de tu rostro y mirada sin intervenciones invasivas, ";
    } else if (objetivo === 'reductor') {
      text += "Buscando reducir centímetros, moldear y tonificar de forma efectiva, ";
    }
    
    if (tiempo === 'corto') {
      text += "este ritual express es ideal para encajar en tu día a día sin prisa pero con el máximo impacto. ";
    } else if (tiempo === 'medio') {
      text += "hemos seleccionado una sesión de 1 hora que permite una desconexión profunda y un trabajo minucioso. ";
    } else if (tiempo === 'largo') {
      text += "te proponemos un plan estructurado de varias sesiones para lograr resultados duraderos y profundos. ";
    }
    
    if (zona === 'rostro') {
      text += "Se enfoca directamente en revitalizar y refrescar las facciones de tu cara.";
    } else if (zona === 'cuerpo') {
      text += "Centra su acción en las áreas del cuerpo que acumulan mayor cansancio y contractura.";
    } else if (zona === 'todo') {
      text += "Ofrece una experiencia integral que abarca cuerpo y mente para un bienestar holístico.";
    }
    
    return text;
  };

  const stepsInfo = [
    {
      title: '¿Cuál es tu objetivo principal?',
      key: 'objetivo',
      options: [
        { label: 'Desconectarme y relajar el cuerpo', value: 'masajes', icon: '🌿' },
        { label: 'Limpieza e hidratación del rostro', value: 'facial', icon: '💆‍♀️' },
        { label: 'Destacar mi mirada de forma natural', value: 'mirada', icon: '✨' },
        { label: 'Reducir centímetros y tonificar', value: 'reductor', icon: '💫' }
      ]
    },
    {
      title: '¿De cuánto tiempo dispones para consentirte?',
      key: 'tiempo',
      options: [
        { label: 'Menos de 1 hora (Sesión Express)', value: 'corto', icon: '⏱️' },
        { label: '1 hora (Sesión Estándar)', value: 'medio', icon: '🌸' },
        { label: 'Quiero un plan completo (Múltiples sesiones)', value: 'largo', icon: '💎' }
      ]
    },
    {
      title: '¿Qué área te gustaría priorizar hoy?',
      key: 'zona',
      options: [
        { label: 'Mi rostro (Cuidado de la piel o pestañas)', value: 'rostro', icon: '☀️' },
        { label: 'Zonas específicas (Espalda, piernas, abdomen)', value: 'cuerpo', icon: '🌱' },
        { label: 'Una desconexión general e integral', value: 'todo', icon: '🕊️' }
      ]
    }
  ];

  return (
    <div style={{ maxWidth: 1000, margin: '0 auto', background: '#fff', borderRadius: 32, border: '1px solid rgba(136, 201, 193, 0.18)', boxShadow: '0 24px 64px rgba(0,0,0,0.03)', overflow: 'hidden', animation: 'elegantRevealV5 1s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
      <style>{`
        @keyframes slideFadeQuiz {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .quiz-opt-card {
          position: relative;
          background: #fff;
          border: 1.5px solid rgba(136, 201, 193, 0.22);
          border-radius: 20px;
          padding: 24px 20px;
          font-family: 'Outfit', sans-serif;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 12px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.02);
          width: 100%;
          box-sizing: border-box;
          overflow: hidden;
        }
        .quiz-opt-card:hover {
          border-color: #88C9C1;
          background: rgba(136, 201, 193, 0.04);
          transform: translateY(-4px);
          box-shadow: 0 12px 28px rgba(136, 201, 193, 0.12);
        }
        .quiz-opt-card:hover .quiz-opt-icon {
          background: #88C9C1 !important;
          color: #fff !important;
          transform: scale(1.08) rotate(3deg);
        }
        .quiz-opt-card:active {
          transform: scale(0.97);
        }
        .quiz-opt-card.selected {
          border-color: #C9A96E !important;
          background: rgba(201, 169, 110, 0.05) !important;
          transform: scale(0.96);
          box-shadow: 0 4px 12px rgba(201, 169, 110, 0.1) !important;
        }
        .quiz-opt-card.selected .quiz-opt-icon {
          background: #C9A96E !important;
          color: #fff !important;
          transform: scale(1.1);
        }
        .quiz-opt-card.dimmed {
          opacity: 0.35 !important;
          transform: scale(0.95);
          pointer-events: none;
        }
        .quiz-step-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #eaeaea;
          transition: background 0.3s;
        }
        .quiz-step-dot.active {
          background: #88C9C1;
          width: 24px;
          border-radius: 4px;
        }
        .quiz-grid-v5 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        @media (max-width: 600px) {
          .quiz-grid-v5 { grid-template-columns: 1fr !important; }
        }
        @keyframes floatGlow1 {
          0% { transform: translate(0px, 0px) scale(1); }
          50% { transform: translate(20px, -30px) scale(1.2); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        @keyframes floatGlow2 {
          0% { transform: translate(0px, 0px) scale(1); }
          50% { transform: translate(-30px, 20px) scale(0.8); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        @keyframes goldenGlowV5 {
          0% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
          70% { box-shadow: 0 0 0 10px rgba(201, 169, 110, 0); }
          100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
        }
        @keyframes certificateReveal {
          from { opacity: 0; transform: scale(0.96) translateY(10px); }
          to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes shimmerBtn {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
      `}</style>

      {/* Top Gold/Mint Progress Bar */}
      <div style={{ width: '100%', height: 6, background: '#F0EFEA', position: 'relative' }}>
        <div style={{
          height: '100%',
          background: 'linear-gradient(90deg, #88C9C1, #C9A96E)',
          width: step === 0 ? '0%' : step === 'loading' ? '100%' : step === 4 ? '100%' : `${(step / 3) * 100}%`,
          transition: 'width 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
          boxShadow: '0 0 10px rgba(201, 169, 110, 0.4)'
        }}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.3fr' }} className="sobre-wrap-v5">
        {/* Left panel - static context */}
        <div style={{
          background: 'linear-gradient(135deg, #F5FAF9 0%, #FCE8EC 100%)',
          padding: '64px 48px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          position: 'relative',
          overflow: 'hidden'
        }}>
          {/* Floating Luxury Gradient Circles */}
          <div style={{ position: 'absolute', top: '-10%', left: '-10%', width: '80%', height: '80%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,201,193,0.18) 0%, transparent 70%)', filter: 'blur(30px)', animation: 'floatGlow1 8s ease-in-out infinite', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', bottom: '-10%', right: '-10%', width: '80%', height: '80%', borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,184,193,0.15) 0%, transparent 70%)', filter: 'blur(30px)', animation: 'floatGlow2 10s ease-in-out infinite', pointerEvents: 'none' }} />

          <div style={{ position: 'relative', zIndex: 2 }}>
            <Label5 text="Diagnóstico" color="#88C9C1" />
            <Heading5 italic={true} size="38px" mb={16}>Tu Momento de Paz Ideal</Heading5>
            <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14, color: '#666', lineHeight: 1.8, margin: 0 }}>
              El bienestar no es igual para todas. Responde estas sencillas preguntas y descubre qué tratamiento se adapta mejor a tu estado de ánimo, necesidades y tiempo actual.
            </p>

            {/* Live selections tracker */}
            {step > 1 && (
              <div style={{ marginTop: 36, animation: 'slideFadeQuiz 0.5s ease both' }}>
                <h4 style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, letterSpacing: 2, color: '#C9A96E', fontWeight: 700, textTransform: 'uppercase', marginBottom: 14 }}>
                  Tu selección actual
                </h4>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {answers.objetivo && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, animation: 'slideFadeQuiz 0.4s ease both' }}>
                      <span style={{ color: '#88C9C1', fontSize: 14, fontWeight: 700 }}>✓</span>
                      <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#444' }}>
                        <strong>Objetivo:</strong> {
                          answers.objetivo === 'masajes' ? 'Relajación y masajes' :
                          answers.objetivo === 'facial' ? 'Cuidado facial' :
                          answers.objetivo === 'mirada' ? 'Destacar la mirada' :
                          answers.objetivo === 'reductor' ? 'Reductivo y firmeza' : ''
                        }
                      </span>
                    </div>
                  )}
                  {answers.tiempo && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, animation: 'slideFadeQuiz 0.4s ease both' }}>
                      <span style={{ color: '#88C9C1', fontSize: 14, fontWeight: 700 }}>✓</span>
                      <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#444' }}>
                        <strong>Tiempo:</strong> {
                          answers.tiempo === 'corto' ? 'Sesión Express (< 1h)' :
                          answers.tiempo === 'medio' ? 'Sesión Estándar (1h)' :
                          answers.tiempo === 'largo' ? 'Plan Completo' : ''
                        }
                      </span>
                    </div>
                  )}
                  {answers.zona && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, animation: 'slideFadeQuiz 0.4s ease both' }}>
                      <span style={{ color: '#88C9C1', fontSize: 14, fontWeight: 700 }}>✓</span>
                      <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#444' }}>
                        <strong>Área:</strong> {
                          answers.zona === 'rostro' ? 'Rostro y pestañas' :
                          answers.zona === 'cuerpo' ? 'Zonas específicas' :
                          answers.zona === 'todo' ? 'Desconexión integral' : ''
                        }
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
          
          {/* Steps indicator */}
          <div style={{ position: 'relative', zIndex: 2 }}>
            {step > 0 && step <= 3 && (
              <div style={{ display: 'flex', gap: 6, marginTop: 40, alignItems: 'center' }}>
                {[1, 2, 3].map((s) => (
                  <div key={s} className={`quiz-step-dot ${step === s ? 'active' : ''}`} />
                ))}
                <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#88C9C1', fontWeight: 600, marginLeft: 12, letterSpacing: 1, textTransform: 'uppercase' }}>
                  Paso {step} de 3
                </span>
              </div>
            )}
            {step === 'loading' && (
              <div style={{ marginTop: 40 }}>
                <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#C9A96E', fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                  ✦ Analizando...
                </span>
              </div>
            )}
            {step === 4 && (
              <div style={{ marginTop: 40 }}>
                <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#F4B8C1', fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  ✦ Diagnóstico Completado
                </span>
              </div>
            )}
          </div>
        </div>

        {/* Right panel - dynamic steps */}
        <div style={{ padding: '64px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden', position: 'relative' }}>
          
          {step === 0 && (
            <div style={{ animation: 'slideFadeQuiz 0.5s ease both' }}>
              <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 32, fontStyle: 'italic', fontWeight: 400, color: '#1a1a1a', margin: '0 0 16px', lineHeight: 1.25 }}>
                ¿No estás segura de qué reservar hoy?
              </h3>
              <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14.5, color: '#666', lineHeight: 1.8, marginBottom: 36 }}>
                Hemos diseñado un test inteligente inspirado en la masoterapia y cosmética orgánica para guiarte hacia tu ritual de bienestar ideal. Encuentra el tratamiento que se adapta a tu día.
              </p>
              <button
                onClick={() => setStep(1)}
                style={{
                  background: 'linear-gradient(135deg, #1a1a1a, #333333)',
                  color: '#fff',
                  border: 'none',
                  borderRadius: 50,
                  padding: '16px 40px',
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: 2,
                  textTransform: 'uppercase',
                  cursor: 'pointer',
                  transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
                  boxShadow: '0 8px 20px rgba(0,0,0,0.1)'
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = '#88C9C1';
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = '0 12px 24px rgba(136, 201, 193, 0.3)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = 'linear-gradient(135deg, #1a1a1a, #333333)';
                  e.currentTarget.style.transform = 'none';
                  e.currentTarget.style.boxShadow = '0 8px 20px rgba(0,0,0,0.1)';
                }}
              >
                Comenzar Diagnóstico ✦
              </button>
            </div>
          )}

          {step >= 1 && step <= 3 && (
            <div style={{ width: '100%', overflow: 'hidden' }}>
              <div style={{
                display: 'flex',
                width: '300%',
                transition: 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
                transform: `translateX(-${(step - 1) * 33.333}%)`
              }}>
                {stepsInfo.map((stepData, idx) => {
                  const stepNum = idx + 1;
                  return (
                    <div key={stepNum} style={{ width: '33.333%', flexShrink: 0, padding: '4px' }}>
                      <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 500, color: '#1a1a1a', margin: '0 0 24px', lineHeight: 1.3 }}>
                        {stepData.title}
                      </h3>
                      <div className="quiz-grid-v5">
                        {stepData.options.map((opt) => {
                          const isSelected = answers[stepData.key] === opt.value;
                          const hasSelectedSomethingInStep = !!answers[stepData.key];
                          const isDimmed = hasSelectedSomethingInStep && !isSelected;

                          return (
                            <button
                              key={opt.value}
                              className={`quiz-opt-card ${isSelected ? 'selected' : ''} ${isDimmed ? 'dimmed' : ''}`}
                              onClick={() => handleSelectOption(stepData.key, opt.value)}
                            >
                              <div style={{
                                width: 48,
                                height: 48,
                                borderRadius: '50%',
                                background: isSelected ? '#C9A96E' : 'rgba(136, 201, 193, 0.08)',
                                color: isSelected ? '#fff' : '#88C9C1',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                fontSize: 22,
                                transition: 'all 0.3s'
                              }} className="quiz-opt-icon">
                                {isSelected ? '✓' : opt.icon}
                              </div>
                              <div style={{
                                fontFamily: "'Outfit', sans-serif",
                                fontSize: 13,
                                fontWeight: 600,
                                color: isSelected ? '#C9A96E' : '#1a1a1a',
                                lineHeight: 1.3
                              }}>
                                {opt.label}
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {step === 'loading' && (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 280, textAlign: 'center', animation: 'slideFadeQuiz 0.5s ease both' }}>
              
              {/* Circular progress SVG */}
              <div style={{ position: 'relative', width: 90, height: 90, marginBottom: 28 }}>
                <svg width="90" height="90" viewBox="0 0 90 90" style={{ transform: 'rotate(-90deg)' }}>
                  <circle
                    cx="45"
                    cy="45"
                    r="34"
                    stroke="rgba(136, 201, 193, 0.15)"
                    strokeWidth="4"
                    fill="transparent"
                  />
                  <circle
                    cx="45"
                    cy="45"
                    r="34"
                    stroke="#C9A96E"
                    strokeWidth="4"
                    fill="transparent"
                    strokeDasharray={2 * Math.PI * 34}
                    strokeDashoffset={2 * Math.PI * 34 - (loaderPercent / 100) * (2 * Math.PI * 34)}
                    strokeLinecap="round"
                    style={{ transition: 'stroke-dashoffset 0.05s linear' }}
                  />
                </svg>
                <div style={{
                  position: 'absolute',
                  inset: 16,
                  borderRadius: '50%',
                  background: 'rgba(136, 201, 193, 0.08)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 16,
                  fontWeight: 700,
                  fontFamily: "'Outfit', sans-serif",
                  color: '#C9A96E'
                }}>
                  {loaderPercent}%
                </div>
              </div>

              <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontStyle: 'italic', color: '#1a1a1a', margin: '0 0 8px' }}>
                Preparando tu recomendación
              </h4>
              <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#88C9C1', fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', margin: '0 0 24px' }}>
                {loadingMsg}
              </p>

              {/* Milestones Checklist */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', maxWidth: 280, margin: '0 auto', textAlign: 'left', borderTop: '1px solid #f0efea', paddingTop: 20 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: loaderPercent >= 35 ? 1 : 0.4, transition: 'opacity 0.3s' }}>
                  <span style={{ color: loaderPercent >= 35 ? '#88C9C1' : '#ccc', fontSize: 14, fontWeight: 'bold' }}>
                    {loaderPercent >= 35 ? '✓' : '○'}
                  </span>
                  <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#555' }}>
                    Respuestas validadas
                  </span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: loaderPercent >= 70 ? 1 : 0.4, transition: 'opacity 0.3s' }}>
                  <span style={{ color: loaderPercent >= 70 ? '#88C9C1' : '#ccc', fontSize: 14, fontWeight: 'bold' }}>
                    {loaderPercent >= 70 ? '✓' : '○'}
                  </span>
                  <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#555' }}>
                    Base de rituales consultada
                  </span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: loaderPercent >= 100 ? 1 : 0.4, transition: 'opacity 0.3s' }}>
                  <span style={{ color: loaderPercent >= 100 ? '#88C9C1' : '#ccc', fontSize: 14, fontWeight: 'bold' }}>
                    {loaderPercent >= 100 ? '✓' : '○'}
                  </span>
                  <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#555' }}>
                    Fórmula personalizada lista
                  </span>
                </div>
              </div>
            </div>
          )}

          {step === 4 && (
            <div style={{ animation: 'certificateReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
              
              {/* Prescription Header: Compatibility Dial + Metadata */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
                <div style={{ position: 'relative', width: 70, height: 70, flexShrink: 0 }}>
                  <svg width="70" height="70" viewBox="0 0 70 70" style={{ transform: 'rotate(-90deg)' }}>
                    <circle cx="35" cy="35" r="28" fill="transparent" stroke="rgba(201, 169, 110, 0.1)" strokeWidth="3" />
                    <circle
                      cx="35"
                      cy="35"
                      r="28"
                      fill="transparent"
                      stroke="#C9A96E"
                      strokeWidth="3.5"
                      strokeDasharray={2 * Math.PI * 28}
                      strokeDashoffset={2 * Math.PI * 28 - (resultPercent / 100) * (2 * Math.PI * 28)}
                      strokeLinecap="round"
                      style={{ transition: 'stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
                    />
                  </svg>
                  <div style={{
                    position: 'absolute',
                    inset: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: "'Outfit', sans-serif",
                    fontSize: 12,
                    fontWeight: 700,
                    color: '#C9A96E'
                  }}>
                    {resultPercent}%
                  </div>
                </div>
                <div>
                  <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 9.5, letterSpacing: 2.5, color: '#88C9C1', fontWeight: 700, textTransform: 'uppercase', marginBottom: 2 }}>
                    Diagnóstico de Bienestar
                  </div>
                  <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#777' }}>
                    Ritual sugerido de alta compatibilidad
                  </div>
                </div>
              </div>

              {/* Luxury Prescription Frame */}
              <div style={{
                position: 'relative',
                background: '#FAF9F5',
                border: '1px solid rgba(201, 169, 110, 0.25)',
                borderRadius: 24,
                padding: 24,
                marginBottom: 32,
                boxShadow: '0 8px 32px rgba(0,0,0,0.02)'
              }} className="prescription-card-v5">
                {/* Thin inner gold frame */}
                <div style={{
                  position: 'absolute',
                  inset: 8,
                  border: '1px solid rgba(201, 169, 110, 0.12)',
                  borderRadius: 18,
                  pointerEvents: 'none'
                }} />

                <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, fontStyle: 'italic', fontWeight: 500, color: '#1a1a1a', margin: '0 0 16px', position: 'relative', zIndex: 2 }}>
                  {recommendation.name}
                </h3>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 20, alignItems: 'center', position: 'relative', zIndex: 2 }}>
                  <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 12, height: 130, width: '100%', border: '1px solid rgba(0,0,0,0.05)' }}>
                    <img
                      src={recommendation.img}
                      alt={recommendation.name}
                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                      onError={e => { e.target.src = 'https://picsum.photos/seed/reco/300/200'; }}
                    />
                    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(26,26,26,0.1) 0%, transparent 60%)' }}/>
                  </div>
                  <div>
                    <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: '#555', lineHeight: 1.6, margin: '0 0 14px' }}>
                      {getRationale()}
                    </p>
                    <div style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                      <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, fontWeight: 700, color: '#1a1a1a' }}>
                        {recommendation.price}
                      </span>
                      <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#88C9C1', textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 600 }}>
                        ⏱️ {recommendation.duration}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
                <button
                  onClick={handleBook}
                  style={{
                    background: 'linear-gradient(135deg, #88C9C1 0%, #6bb5ac 50%, #C9A96E 100%)',
                    backgroundSize: '200% auto',
                    color: '#fff',
                    border: 'none',
                    borderRadius: 50,
                    padding: '16px 40px',
                    fontFamily: "'Outfit', sans-serif",
                    fontSize: 11,
                    fontWeight: 700,
                    letterSpacing: 2,
                    textTransform: 'uppercase',
                    cursor: 'pointer',
                    transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                    boxShadow: '0 8px 24px rgba(136, 201, 193, 0.35)',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8,
                    animation: 'goldenGlowV5 2s infinite, shimmerBtn 4s linear infinite'
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = '0 12px 32px rgba(136, 201, 193, 0.5)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.transform = 'none';
                    e.currentTarget.style.boxShadow = '0 8px 24px rgba(136, 201, 193, 0.35)';
                  }}
                >
                  Agendar este Servicio ✦
                </button>
                
                <button
                  onClick={resetQuiz}
                  style={{
                    background: 'transparent',
                    color: '#7a7a7a',
                    border: 'none',
                    fontFamily: "'Outfit', sans-serif",
                    fontSize: 12,
                    fontWeight: 600,
                    cursor: 'pointer',
                    textDecoration: 'underline',
                    transition: 'color 0.2s',
                    padding: '8px 12px'
                  }}
                  onMouseEnter={e => e.target.style.color = '#1a1a1a'}
                  onMouseLeave={e => e.target.style.color = '#7a7a7a'}
                >
                  Repetir test
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const fallbackServices = [

  { name: 'Limpieza Facial Profunda', price: '$25.000', duration: '60 min', tag: 'Más solicitado', img: 'uploads/facial_service.png', desc: 'Remueve impurezas, hidrata y restaura el equilibrio de tu piel desde la primera sesión.' },
  { name: 'Masaje de Relajación', price: '$25.000', duration: '60 min', tag: 'Oferta', img: 'uploads/massage_service.png', desc: 'Una hora de calma total. Técnicas envolventes que disuelven la tensión y reconectan tu cuerpo.' },
  { name: 'Masaje Descontracturante', price: 'desde $25.000', duration: '60 min', img: 'uploads/massage_service.png', desc: 'Presión terapéutica profunda sobre zonas específicas. Libera contracturas y restaura la movilidad.' },
  { name: 'Lash Lifting', price: 'Consultar', duration: '45 min', tag: '20% OFF', img: 'uploads/lash_service.png', desc: 'Curvatura y definición natural desde la raíz. Sin extensiones, duración de 6 a 8 semanas.' },
  { name: 'Tratamiento Reductor', price: '$220.000', duration: '10 sesiones', tag: 'Pack completo', img: 'uploads/body_treatment.png', desc: 'Programa completo: masajes, aparatología, drenaje linfático y seguimiento personalizado.' },
  { name: 'Gift Card', price: 'A tu medida', img: 'uploads/gift_card_beauty.png', desc: 'El regalo perfecto. Elige el servicio o monto y la gift card llega al instante por email.' }
];

// ── TESTIMONIALS SLIDER Carrusel ──────────────────────────────
const TestimonialsSlider = ({ testimonials }) => {
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    setIdx(0);
  }, [testimonials]);

  if (!testimonials || testimonials.length === 0) return null;

  const handlePrev = () => {
    setIdx(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setIdx(prev => (prev === testimonials.length - 1 ? 0 : prev + 1));
  };

  const current = testimonials[idx];

  return (
    <div style={{ position: 'relative', maxWidth: 800, margin: '0 auto', padding: '0 16px' }}>
      <style>{`
        @keyframes fadeSlideTestiV5 {
          0% { opacity: 0; transform: translateX(24px) scale(0.99); filter: blur(2px); }
          100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
        }
        .testi-nav-btn {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 1px solid rgba(136, 201, 193, 0.35);
          background: #fff;
          color: #88C9C1;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          box-shadow: 0 4px 12px rgba(0,0,0,0.02);
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
        }
        .testi-nav-btn:hover {
          background: #88C9C1;
          color: #fff;
          border-color: #88C9C1;
          box-shadow: 0 8px 20px rgba(136, 201, 193, 0.25);
        }
        @media (max-width: 960px) {
          .testi-nav-btn { position: static; transform: none; }
          .testi-controls-row { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }
          .testi-nav-btn.desktop { display: none; }
        }
      `}</style>

      {/* Prev button for desktop */}
      <button onClick={handlePrev} className="testi-nav-btn desktop" style={{ left: -68 }} aria-label="Anterior">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
      </button>

      {/* Slide Content wrapper */}
      <div key={idx} style={{ animation: 'fadeSlideTestiV5 0.6s cubic-bezier(0.22, 1, 0.36, 1) both' }}>
        <div style={{
          background: '#fff',
          borderRadius: 28,
          padding: '48px 44px',
          boxShadow: '0 12px 40px rgba(0,0,0,0.03)',
          border: '1px solid rgba(136, 201, 193, 0.12)',
          position: 'relative'
        }}>
          {/* Big quotation mark */}
          <div style={{
            position: 'absolute',
            top: 24,
            right: 36,
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 120,
            color: 'rgba(136, 201, 193, 0.12)',
            lineHeight: 1,
            pointerEvents: 'none',
            userSelect: 'none'
          }}>
            ”
          </div>

          <div style={{ display: 'flex', gap: 3, marginBottom: 20 }}>
            {[1, 2, 3, 4, 5].map(star => <IconStarSolid key={star}/>)}
          </div>

          <p style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 20,
            fontStyle: 'italic',
            color: '#1a1a1a',
            lineHeight: 1.7,
            margin: '0 0 32px',
            position: 'relative',
            zIndex: 1
          }}>
            "{current.text}"
          </p>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid rgba(136, 201, 193, 0.12)', paddingTop: 24 }}>
            <div>
              <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14, fontWeight: 700, color: '#1a1a1a', letterSpacing: 0.5 }}>
                {current.name}
              </div>
              <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#88C9C1', marginTop: 3, letterSpacing: 1.5, textTransform: 'uppercase' }}>
                {current.loc}
              </div>
            </div>
            {current.cat && current.cat !== 'todos' && (
              <span style={{
                background: 'rgba(244, 184, 193, 0.08)',
                color: '#F4B8C1',
                fontFamily: "'Outfit', sans-serif",
                fontSize: 9,
                fontWeight: 700,
                letterSpacing: 1.5,
                textTransform: 'uppercase',
                padding: '4px 12px',
                borderRadius: 20,
                border: '1px solid rgba(244, 184, 193, 0.2)'
              }}>
                {current.cat}
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Next button for desktop */}
      <button onClick={handleNext} className="testi-nav-btn desktop" style={{ right: -68 }} aria-label="Siguiente">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>

      {/* Controls row for mobile */}
      <div className="testi-controls-row">
        <button onClick={handlePrev} className="testi-nav-btn" aria-label="Anterior" style={{ display: 'none' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <button onClick={handleNext} className="testi-nav-btn" aria-label="Siguiente" style={{ display: 'none' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
      </div>

      {/* Dots indicators */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 28 }}>
        {testimonials.map((_, i) => (
          <button
            key={i}
            onClick={() => setIdx(i)}
            style={{
              width: idx === i ? 24 : 8,
              height: 8,
              borderRadius: 4,
              background: idx === i ? '#88C9C1' : 'rgba(0,0,0,0.1)',
              border: 'none',
              padding: 0,
              cursor: 'pointer',
              transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)'
            }}
            aria-label={'Ir al testimonio ' + (i + 1)}
          />
        ))}
      </div>
    </div>
  );
};

// ── EDITORIAL SERVICES Component ──────────────────────────────
const EditorialServices = ({ services, setPage }) => {
  const [activeIdx, setActiveIdx] = React.useState(0);

  React.useEffect(() => {
    setActiveIdx(0);
  }, [services]);

  if (!services || services.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '60px 0', color: '#7a7a7a', fontFamily: "'Outfit', sans-serif", fontSize: 14 }}>
        No hay servicios en esta categoría actualmente.
      </div>
    );
  }

  const activeService = services[activeIdx] || services[0];

  const handleBook = (svc) => {
    if (svc.needsCoordination || svc.needs_coordination) {
      const waUrl = "https://wa.me/56983059044?text=" + encodeURIComponent(
        "Hola Fran! Me interesó el servicio de *" + svc.name + "* y me gustaría coordinar una hora."
      );
      window.open(waUrl, '_blank');
    } else {
      localStorage.setItem('eadq_selected_service_name', svc.name);
      setPage('agenda');
    }
  };

  return (
    <div style={{ position: 'relative' }}>
      <style>{`
        .editorial-split {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 64px;
          align-items: start;
        }
        .editorial-list {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        .editorial-item {
          padding: 24px 0;
          border-bottom: 1px solid rgba(136, 201, 193, 0.15);
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          position: relative;
          display: flex;
          align-items: flex-start;
          gap: 20px;
        }
        .editorial-item:hover {
          padding-left: 12px;
        }
        .editorial-item-line {
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 0;
          height: 1.5px;
          background: #C9A96E;
          transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .editorial-item.active .editorial-item-line {
          width: 100%;
        }
        .editorial-item.active .editorial-item-title {
          color: #88C9C1 !important;
        }
        .editorial-item-desc {
          max-height: 0;
          overflow: hidden;
          opacity: 0;
          transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
          font-family: 'Outfit', sans-serif;
          font-size: 13.5px;
          color: #666;
          line-height: 1.7;
          margin-top: 0;
        }
        .editorial-item.active .editorial-item-desc {
          max-height: 100px;
          opacity: 1;
          margin-top: 10px;
        }
        .editorial-sticky-card {
          position: sticky;
          top: 100px;
          background: #fff;
          border-radius: 28px;
          overflow: hidden;
          border: 1px solid rgba(136, 201, 193, 0.18);
          box-shadow: 0 16px 48px rgba(136, 201, 193, 0.08);
          display: flex;
          flex-direction: column;
        }
        .editorial-mobile-grid {
          display: none;
        }
        @media (max-width: 900px) {
          .editorial-split { display: none; }
          .editorial-mobile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
          }
        }
        @media (max-width: 600px) {
          .editorial-mobile-grid { grid-template-columns: 1fr; }
        }
        @keyframes fadeImgZoomV5 {
          from { opacity: 0.3; transform: scale(1.04) rotate(0.5deg); filter: blur(3px); }
          to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
        }
      `}</style>

      {/* Desktop Editorial Split View */}
      <div className="editorial-split">
        {/* Left Column: Sticky Luxury Preview Card */}
        <div className="editorial-sticky-card">
          <div style={{ position: 'relative', height: 320, overflow: 'hidden', background: 'linear-gradient(135deg, #E8F5F3 0%, #FCE8EC 100%)' }}>
            <img
              key={activeService.name}
              src={activeService.img && activeService.img.trim() !== '' ? activeService.img : 'https://picsum.photos/seed/' + activeService.name.toLowerCase().replace(/\s+/g, '-') + '/600/400'}
              alt={activeService.name}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                display: 'block',
                animation: 'fadeImgZoomV5 0.7s cubic-bezier(0.16, 1, 0.3, 1) both'
              }}
              onError={(e) => { e.target.style.display = 'none'; }}
            />
            {activeService.tag && (
              <span style={{
                position: 'absolute',
                top: 20,
                left: 20,
                background: 'rgba(250,250,248,0.92)',
                backdropFilter: 'blur(8px)',
                WebkitBackdropFilter: 'blur(8px)',
                color: '#88C9C1',
                fontSize: 9,
                fontFamily: "'Outfit', sans-serif",
                fontWeight: 700,
                letterSpacing: 2,
                padding: '6px 14px',
                borderRadius: 40,
                textTransform: 'uppercase',
                border: '1px solid rgba(136, 201, 193, 0.2)',
                zIndex: 2
              }}>
                {activeService.tag}
              </span>
            )}
            <div style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(to top, rgba(26,26,26,0.3) 0%, transparent 60%)',
              pointerEvents: 'none'
            }}/>
          </div>

          <div style={{ padding: '32px', display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div>
                <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: '#C9A96E', letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>
                  Tarifa Especial
                </div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 36, fontWeight: 700, color: '#1a1a1a', lineHeight: 1 }}>
                  {activeService.price}
                </div>
              </div>
              {activeService.duration && (
                <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#88C9C1', letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 600 }}>
                  ⏱️ {activeService.duration}
                </div>
              )}
            </div>

            <button
              onClick={() => handleBook(activeService)}
              style={{
                background: 'linear-gradient(135deg, #88C9C1, #6bb5ac)',
                color: '#fff',
                border: 'none',
                cursor: 'pointer',
                fontFamily: "'Outfit', sans-serif",
                fontSize: 11,
                letterSpacing: 2.5,
                fontWeight: 700,
                padding: '16px 32px',
                borderRadius: 40,
                textTransform: 'uppercase',
                transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
                boxShadow: '0 8px 24px rgba(136,201,193,0.35)',
                textAlign: 'center'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-2px)';
                e.currentTarget.style.boxShadow = '0 12px 32px rgba(136,201,193,0.5)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'scale(1)';
                e.currentTarget.style.boxShadow = '0 8px 24px rgba(136,201,193,0.35)';
              }}
            >
              {(activeService.needsCoordination || activeService.needs_coordination) ? 'Coordinar por WhatsApp' : 'Reservar Sesión'}
            </button>
          </div>
        </div>

        {/* Right Column: Editorial Typographic List */}
        <div className="editorial-list">
          {services.map((svc, index) => {
            const isActive = activeIdx === index;
            const numberStr = (index + 1) < 10 ? '0' + (index + 1) : '' + (index + 1);
            return (
              <div
                key={svc.name}
                className={`editorial-item ${isActive ? 'active' : ''}`}
                onMouseEnter={() => setActiveIdx(index)}
                onClick={() => handleBook(svc)}
              >
                {/* Separator line */}
                <div className="editorial-item-line"/>

                {/* Index number */}
                <span style={{
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 14,
                  fontWeight: 600,
                  color: isActive ? '#C9A96E' : 'rgba(201, 169, 110, 0.4)',
                  marginTop: 4,
                  transition: 'color 0.3s'
                }}>
                  {numberStr}
                </span>

                {/* Main block */}
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <h4 className="editorial-item-title" style={{
                      fontFamily: "'Cormorant Garamond', serif",
                      fontSize: 'clamp(22px, 2.5vw, 28px)',
                      fontWeight: 500,
                      color: '#1a1a1a',
                      margin: 0,
                      transition: 'color 0.3s'
                    }}>
                      {svc.name}
                    </h4>
                    <span style={{
                      fontFamily: "'Cormorant Garamond', serif",
                      fontSize: 20,
                      fontWeight: 600,
                      color: isActive ? '#1a1a1a' : '#7a7a7a',
                      transition: 'color 0.3s'
                    }}>
                      {svc.price}
                    </span>
                  </div>
                  
                  {/* Collapsible description */}
                  <p className="editorial-item-desc">
                    {svc.desc}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Mobile Grid View fallback */}
      <div className="editorial-mobile-grid">
        {services.map((svc) => (
          <div key={svc.name}>
            <ServiceCardV5 {...svc} onBook={() => handleBook(svc)}/>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── MAIN HOME V5 COMPONENT ────────────────────────────────────
const HomeV5 = ({ setPage }) => {
  const getChileTime = () => {
    try {
      const options = { timeZone: 'America/Santiago', hour12: false, weekday: 'long', hour: '2-digit', minute: '2-digit' };
      const formatter = new Intl.DateTimeFormat('es-CL', options);
      const parts = formatter.formatToParts(new Date());
      const partMap = {};
      parts.forEach(p => partMap[p.type] = p.value);
      return {
        weekday: partMap.weekday ? partMap.weekday.toLowerCase() : '',
        hour: parseInt(partMap.hour, 10),
        minute: parseInt(partMap.minute, 10)
      };
    } catch (e) {
      return { weekday: '', hour: 0, minute: 0 };
    }
  };

  const checkIsOpenNow = () => {
    try {
      const { weekday, hour } = getChileTime();
      if (!weekday) return false;
      if (weekday.includes('lun') || weekday.includes('mié') || weekday.includes('vie') || weekday.includes('mie')) {
        return hour >= 16 && hour < 20;
      }
      if (weekday.includes('mar') || weekday.includes('jue')) {
        return hour >= 8 && hour < 20;
      }
      if (weekday.includes('sáb') || weekday.includes('sab')) {
        return hour >= 9 && hour < 15;
      }
      return false;
    } catch (e) {
      return false;
    }
  };

  const isOpenNow = checkIsOpenNow();

  const [siteConfig, setSiteConfig] = React.useState(null);
  const [mounted, setMounted] = React.useState(false);
  const [bioMouse, setBioMouse] = React.useState({ x: 0, y: 0 });
  const [bioHovered, setBioHovered] = React.useState(false);
  const [promoHover, setPromoHover] = React.useState(null);
  const [testiCat, setTestiCat] = React.useState('todos');
  const [serviceFilter, setServiceFilter] = React.useState('todos');

  const getServiceCat = (s) => {
    if (s.category) return s.category.toLowerCase();
    const name = s.name.toLowerCase();
    if (name.includes('facial') || name.includes('limpieza') || name.includes('peeling')) return 'faciales';
    if (name.includes('masaje') || name.includes('relajación') || name.includes('descontracturante') || name.includes('reflexología')) return 'masajes';
    if (name.includes('lash') || name.includes('lifting') || name.includes('pestaña')) return 'pestañas';
    if (name.includes('reductor') || name.includes('corporal') || name.includes('tratamiento')) return 'corporales';
    return 'otros';
  };

  // Dynamic services hook with fallback structure
  const [services, setServices] = React.useState(() => {
    try {
      const stored = localStorage.getItem('eadq_services');
      if (stored) {
        const parsed = JSON.parse(stored);
        const homeServices = parsed.filter(s => s.show_on_home);
        if (homeServices.length > 0) {
          return homeServices.sort((a, b) => (a.home_order || 0) - (b.home_order || 0)).slice(0, 6);
        }
        if (parsed.length > 0) {
          return parsed.slice(0, 6);
        }
      }
    } catch (e) {}
    return fallbackServices;
  });

  React.useEffect(() => {
    setTimeout(() => setMounted(true), 80);
    
    // Fetch site config
    fetch('/api/config')
      .then(res => res.json())
      .then(setSiteConfig)
      .catch(console.error);

    // Fetch catalog services
    fetch('/api/services')
      .then(res => res.json())
      .then(data => {
        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
          }));
          
          let homeServices = mapped.filter(s => s.show_on_home);
          if (homeServices.length === 0) {
            homeServices = mapped.slice(0, 6);
          }
          if (homeServices.length === 0) {
            homeServices = fallbackServices;
          }
          
          setServices(homeServices.sort((a, b) => (a.home_order || 0) - (b.home_order || 0)));
          localStorage.setItem('eadq_services', JSON.stringify(mapped));
        }
      })
      .catch(console.error);
  }, []);

  // Promos config mapping
  const promos = (siteConfig && siteConfig.home && siteConfig.home.promos) ? siteConfig.home.promos : [];

  // Testimonials fallbacks or config mapping
  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 filteredServices = services.filter(s => {
    if (serviceFilter === 'todos') return true;
    return getServiceCat(s) === serviceFilter;
  });

  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: '#FAFAF8' }}>
      <style>{`
        @keyframes fadeUpHomeV5 { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
        @keyframes floatOrb1 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(50px, -60px) scale(1.1); }
        }
        @keyframes floatOrb2 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(-60px, 40px) scale(1.05); }
        }
        @keyframes promoGlow {
          0%   { box-shadow: 0 2px 8px rgba(0,0,0,0.02), 0 0 0px 0px rgba(136, 201, 193, 0); }
          50%  { box-shadow: 0 4px 18px rgba(136, 201, 193, 0.18), 0 0 18px 4px rgba(136, 201, 193, 0.22); }
          100% { box-shadow: 0 2px 8px rgba(0,0,0,0.02), 0 0 0px 0px rgba(136, 201, 193, 0); }
        }
        .promo-card-v5 {
          background: #fff;
          border: 1px solid rgba(136, 201, 193, 0.12);
          border-radius: 24px;
          padding: 24px 26px 26px;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 200px;
        }
        .svc5-promo-card {
          background: #fff;
          border-radius: 14px;
          padding: 14px 18px;
          border: 1px solid rgba(136, 201, 193, 0.3);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          cursor: pointer;
          transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
          animation: promoGlow 2.8s ease-in-out infinite;
        }
        .svc5-promo-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 28px rgba(136,201,193,0.28), 0 0 0 2px rgba(136,201,193,0.5);
          animation: none;
        }
        .svc5-promo-card-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
        .svc5-promo-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
        @media (max-width: 768px) {
          .svc5-promo-card { padding: 10px 14px !important; border-radius: 12px !important; }
          .svc5-promo-card-left h3 { font-size: 14px !important; }
          .svc5-promo-card-price { font-size: 13px !important; }
          .service-card-v5-img { height: 120px !important; }
          .service-card-v5-body { padding: 12px 16px !important; }
          .service-card-v5-title { font-size: 18px !important; margin-bottom: 4px !important; }
          .service-card-v5-desc { font-size: 12px !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
          .reserva-minuto-section { display: none !important; }
          .svc5-promo-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
        }
        .svc-grid-v5 { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.02);
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
          animation: promoGlow 3s ease-in-out infinite;
        }
        .svc5-promo-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(136,201,193,0.22), 0 0 0 2px #88C9C1;
          border-color: #88C9C1;
          animation: none;
        }
        .svc5-promo-card-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
        .svc5-promo-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
        .testi-grid-v5 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
        .sobre-wrap-v5 { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:600px; }
        .schedule-table-v5 { display:grid; grid-template-columns:1fr 1fr; gap:0; }
        .schedule-grid-v5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 auto; }
        .final-cta-grid-v5 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; text-align: left; }
        .cta-step-card-v5 { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px 16px; display: flex; align-items: center; gap: 12px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
        .cta-step-card-v5:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(201, 169, 110, 0.3); transform: translateY(-4px); }
        .cta-image-card-v5 { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(201, 169, 110, 0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.3); animation: ctaFloatV5 6s ease-in-out infinite alternate; }
        @keyframes ctaFloatV5 { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-10px) rotate(1deg); } }
        @media (max-width: 900px) { .final-cta-grid-v5 { grid-template-columns: 1fr !important; gap: 40px; text-align: center; } .cta-image-card-v5 { max-width: 400px; margin: 0 auto; } }
        .schedule-card-v5 { position: relative; background: #fff; border: 1px solid rgba(136, 201, 193, 0.15); border-radius: 24px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.02); overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
        .schedule-card-v5::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: transparent; transition: background 0.3s; }
        .schedule-card-v5.card-mint::before { background: #88C9C1; }
        .schedule-card-v5.card-peach::before { background: #F4B8C1; }
        .schedule-card-v5.card-gold::before { background: #C9A96E; }
        .schedule-card-v5.card-closed::before { background: #dcdad4; }
        .schedule-card-v5:hover { transform: translateY(-6px); border-color: #C9A96E; box-shadow: 0 20px 40px rgba(201, 169, 110, 0.08); background: linear-gradient(to bottom, #fff, #FAF9F6); }
        .schedule-card-v5:hover .schedule-card-monogram { transform: translateY(-8px) scale(1.05); opacity: 0.06; }
        .schedule-card-v5:hover .schedule-card-icon { transform: scale(1.1) rotate(10deg); background: #C9A96E !important; color: #fff !important; }
        .schedule-card-monogram { position: absolute; bottom: -20px; right: -10px; font-family: 'Cormorant Garamond', serif; font-size: 110px; font-weight: 700; color: #1a1a1a; opacity: 0.035; pointer-events: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); line-height: 1; }
        .schedule-card-v5.today-active { border-color: #C9A96E; box-shadow: 0 12px 32px rgba(201, 169, 110, 0.12); background: rgba(201, 169, 110, 0.02); }
        @keyframes pulseGoldV5 { 0% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(201, 169, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); } }
        @media (max-width: 900px) { .schedule-grid-v5 { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 550px) { 
          .schedule-grid-v5 { grid-template-columns: 1fr !important; gap: 12px !important; } 
          .schedule-card-v5 { padding: 16px 20px !important; flex-direction: row !important; justify-content: space-between !important; text-align: left !important; min-height: 80px !important; }
          .schedule-card-v5 h4 { margin: 0 !important; font-size: 14px !important; }
          .schedule-card-v5 p { margin: 0 !important; font-size: 13px !important; }
          .schedule-card-monogram { font-size: 50px !important; bottom: -5px !important; right: 0 !important; }
        }
        @media (max-width:900px) {
          .testi-grid-v5 { grid-template-columns:1fr !important; }
          .sobre-wrap-v5 { grid-template-columns:1fr !important; }
          .sobre-wrap-v5>div:first-child { height:360px !important; min-height: 360px !important; }
          .sobre-text-v5 { padding: 32px 16px 0 !important; }
        }
        .sobre-text-v5 { display: flex; flex-direction: column; justify-content: center; padding: 80px 60px 80px 48px; }
        @media (max-width:640px) {
          .svc-grid-v5 { grid-template-columns:1fr !important; }
          .schedule-table-v5 { grid-template-columns:1fr !important; }
        }
      `}</style>

      {/* Floating Ambient Orbs */}
      <div style={{ position: 'absolute', top: '10%', left: '-15%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(136,201,193,0.12) 0%, transparent 70%)', filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0, animation: 'floatOrb1 18s ease-in-out infinite alternate' }}/>
      <div style={{ position: 'absolute', top: '40%', right: '-15%', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,184,193,0.1) 0%, transparent 70%)', filter: 'blur(60px)', pointerEvents: 'none', zIndex: 0, animation: 'floatOrb2 22s ease-in-out infinite alternate' }}/>
      <div style={{ position: 'absolute', top: '75%', left: '-10%', width: 550, height: 550, borderRadius: '50%', background: 'radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%)', filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0, animation: 'floatOrb1 20s ease-in-out infinite alternate-reverse' }}/>

      {/* ── HERO SECTION ── */}
      <HeroV5 setPage={setPage} config={siteConfig ? siteConfig.home : null}/>

      {/* ── PROMO BANNER ── */}
      {promos.length > 0 && (
        <ScrollRevealSection>
          <section style={{ background: '#FAFAF8', padding: 0, position: 'relative', zIndex: 1 }}>
            {/* Marquee ticker label */}
            <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '12px 0' }}>
              <div
                className="marquee-text-v5"
                style={{ display: 'inline-block', animation: 'marqueeScrollV5 32s linear infinite', cursor: 'pointer' }}
                onMouseEnter={(e) => { e.currentTarget.style.animationPlayState = 'paused'; }}
                onMouseLeave={(e) => { e.currentTarget.style.animationPlayState = 'running'; }}
              >
                {Array(4).fill('Limpieza Facial  ·  Masaje de Relajación  ·  Lash Lifting 20% OFF  ·  Tratamiento Reductor  ·  Gift Cards  ·  ').join('')}
              </div>
              <style>{`
                @keyframes marqueeScrollV5 { from { transform:translateX(0); } to { transform:translateX(-50%); } }
                .marquee-text-v5 { font-family:'Outfit',sans-serif; font-size:11px; letter-spacing:3px; color:rgba(26,26,26,0.3); text-transform:uppercase; transition: color 0.3s; }
                .marquee-text-v5:hover { color: #88C9C1; }
              `}</style>
            </div>

            {/* Promo Grid Container (Exact Match from Servicios) */}
            <div style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 24px 80px' }}>
              <div style={{
                background: 'linear-gradient(135deg, #FCE8EC 0%, #FAFAF8 50%, #E8F5F3 100%)',
                borderRadius: '24px',
                padding: '40px 32px',
                border: '1px solid rgba(136, 201, 193, 0.25)',
                boxShadow: '0 8px 32px rgba(136, 201, 193, 0.06)'
              }}>
                <div style={{ textAlign: 'center', marginBottom: '32px' }}>
                  <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: '10px', letterSpacing: '3px', color: '#88C9C1', fontWeight: 600, textTransform: 'uppercase', display: 'block', marginBottom: '8px' }}>
                    Propuestas Especiales
                  </span>
                  <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '32px', color: '#1a1a1a', fontWeight: 500, fontStyle: 'italic', margin: 0 }}>
                    Promociones Destacadas
                  </h2>
                </div>
                
                <div className="svc5-promo-grid" style={{ display: 'grid', gridTemplateColumns: promos.length === 1 ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))', gap: '10px' }}>
                  {promos.map((p, i) => (
                    <div key={i} 
                      className="svc5-promo-card"
                      onClick={() => setPage(p.page)}
                    >
                      <div className="svc5-promo-card-left">
                        {p.badge && (
                          <span style={{ 
                            fontFamily: "'Outfit', sans-serif", 
                            fontSize: '8px', 
                            fontWeight: 700, 
                            letterSpacing: '1px', 
                            color: '#2d6a61', 
                            background: '#E8F5F3', 
                            padding: '2px 8px', 
                            borderRadius: '20px', 
                            display: 'inline-block',
                            textTransform: 'uppercase',
                            alignSelf: 'flex-start'
                          }}>
                            {p.badge}
                          </span>
                        )}
                        <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '16px', fontWeight: 600, color: '#1a1a1a', margin: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                          {p.title}
                        </h3>
                      </div>

                      <div className="svc5-promo-card-right">
                        <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
                          {p.og && (
                            <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: '10px', color: '#bbb', textDecoration: 'line-through' }}>
                              {p.og}
                            </span>
                          )}
                          <span className="svc5-promo-card-price" style={{ fontFamily: "'Outfit', sans-serif", fontSize: '15px', fontWeight: 700, color: '#C9A96E' }}>
                            {p.price}
                          </span>
                        </div>
                        <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: '10px', color: '#88C9C1', fontWeight: 600, letterSpacing: '1px', textTransform: 'uppercase' }}>
                          Ver →
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </section>
        </ScrollRevealSection>
      )}

      {/* ── HIGHLIGHTED SERVICES V5 ── */}
      <ScrollRevealSection direction="left">
        <section style={{ padding: '100px 24px', position: 'relative', zIndex: 1 }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: 44 }}>
              <Label5 text="Tratamientos"/>
              <Heading5 center italic>Diseñados para ti</Heading5>
              <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 15, color: '#7a7a7a', lineHeight: 1.75, maxWidth: '50ch', margin: '0 auto' }}>
                Cada servicio pensado para nutrir tu piel, relajar tu cuerpo y reconectar con tu bienestar.
              </p>
            </div>

            {/* Interactive category filter tabs */}
            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 48 }}>
              {['todos', 'faciales', 'masajes', 'pestañas', 'corporales'].map(cat => {
                const isSelected = serviceFilter === cat;
                return (
                  <button
                    key={cat}
                    onClick={() => setServiceFilter(cat)}
                    style={{
                      background: isSelected ? '#1a1a1a' : '#fff',
                      color: isSelected ? '#fff' : '#7a7a7a',
                      border: '1.5px solid ' + (isSelected ? '#1a1a1a' : 'rgba(136, 201, 193, 0.25)'),
                      cursor: 'pointer',
                      fontFamily: "'Outfit', sans-serif",
                      fontSize: 12,
                      letterSpacing: 1.5,
                      fontWeight: 600,
                      padding: '10px 24px',
                      borderRadius: 40,
                      textTransform: 'capitalize',
                      transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)',
                      boxShadow: isSelected ? '0 8px 20px rgba(0,0,0,0.1)' : '0 2px 10px rgba(0,0,0,0.02)'
                    }}
                  >
                    {cat}
                  </button>
                );
              })}
            </div>
            
            <EditorialServices services={filteredServices} setPage={setPage} />
            
            <div style={{ textAlign: 'center', marginTop: 56 }}>
              <button
                onClick={() => setPage('servicios')}
                style={{
                  background: 'transparent',
                  color: '#1a1a1a',
                  border: '1.5px solid rgba(26,26,26,0.2)',
                  cursor: 'pointer',
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 11,
                  letterSpacing: 2.5,
                  textTransform: 'uppercase',
                  fontWeight: 600,
                  padding: '14px 44px',
                  borderRadius: 50,
                  transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = '#1a1a1a';
                  e.currentTarget.style.color = '#fff';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.color = '#1a1a1a';
                }}
              >
                Ver todos los servicios
              </button>
            </div>
          </div>
        </section>
      </ScrollRevealSection>

      {/* ── FRAN MINI BIO SECTION ── */}
      <ScrollRevealSection direction="right">
        <section style={{ background: 'transparent', overflow: 'hidden', borderTop: '1px solid rgba(136,201,193,0.12)', position: 'relative', zIndex: 1 }}>
          <div className="sobre-wrap-v5">
            {/* Photo frame */}
            <div
              onMouseMove={(e) => {
                const rect = e.currentTarget.getBoundingClientRect();
                const x = (e.clientX - rect.left) / rect.width - 0.5;
                const y = (e.clientY - rect.top) / rect.height - 0.5;
                setBioMouse({ x, y });
              }}
              onMouseEnter={() => setBioHovered(true)}
              onMouseLeave={() => {
                setBioHovered(false);
                setBioMouse({ x: 0, y: 0 });
              }}
              style={{
                position: 'relative',
                overflow: 'hidden',
                padding: '40px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: 'transparent',
                perspective: 1000
              }}
            >
              {/* Gold offset background frame */}
              <div style={{
                position: 'absolute',
                width: 'calc(100% - 80px)',
                height: 'calc(100% - 80px)',
                border: '2px solid #C9A96E',
                borderRadius: 24,
                transform: 'translate(' + (bioMouse.x * -18 - 20) + 'px, ' + (bioMouse.y * -18 + 20) + 'px)',
                transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                pointerEvents: 'none',
                zIndex: 0
              }}/>

              {/* Image wrapper */}
              <div style={{
                position: 'relative',
                width: '100%',
                height: '100%',
                minHeight: 450,
                borderRadius: 24,
                overflow: 'hidden',
                boxShadow: bioHovered ? '0 24px 64px rgba(136,201,193,0.15)' : '0 12px 40px rgba(0,0,0,0.06)',
                transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                zIndex: 1
              }}>
                <img
                  src="uploads/Fran Perfil.jpg"
                  alt="Francesca Arenas"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover',
                    objectPosition: 'center 15%',
                    display: 'block',
                    transform: 'scale(1.05) translate(' + (bioMouse.x * 12) + 'px, ' + (bioMouse.y * 12) + 'px)',
                    transition: 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)'
                  }}
                  onError={(e) => { e.target.src = 'https://picsum.photos/seed/fran-home/600/800'; }}
                />
                <div style={{ position: 'absolute', inset: 0, border: '1px solid rgba(136, 201, 193, 0.2)', borderRadius: 24, pointerEvents: 'none', boxShadow: 'inset 0 0 20px rgba(250,250,248,0.3)' }}/>
              </div>

              {/* Overlay Glass Card with Tilt */}
              {/* Removed overlay panel to not block the photo on mobile/desktop */}
            </div>

            {/* Intro text */}
            <div className="sobre-text-v5">
              <Label5 text="Sobre Mí" color="#F4B8C1"/>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(36px, 4.5vw, 62px)', fontWeight: 300, fontStyle: 'italic', color: '#1a1a1a', margin: '0 0 4px', lineHeight: 1.05 }}>
                Hola, soy
              </h2>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(48px, 5vw, 76px)', fontWeight: 700, color: '#88C9C1', margin: '0 0 32px', lineHeight: 1.0 }}>
                Fran.
              </h2>
              <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14, color: '#555', lineHeight: 1.7, maxWidth: '42ch', marginBottom: 24 }}>
                Cosmetóloga y masoterapeuta apasionada por el bienestar femenino. Creé este espacio con un propósito: que cada clienta que entre salga sintiéndose más ella misma, regalándose ese respiro tan necesario.
              </p>
              <button
                onClick={() => setPage('sobre')}
                style={{
                  alignSelf: 'flex-start',
                  background: 'transparent',
                  color: '#1a1a1a',
                  border: '1.5px solid rgba(26,26,26,0.2)',
                  cursor: 'pointer',
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 10,
                  letterSpacing: 2.5,
                  textTransform: 'uppercase',
                  fontWeight: 700,
                  padding: '13px 32px',
                  borderRadius: 50,
                  transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = '#1a1a1a';
                  e.currentTarget.style.color = '#fff';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.color = '#1a1a1a';
                }}
              >
                Conocer a Fran
              </button>
            </div>
          </div>
        </section>
      </ScrollRevealSection>

      {/* ── RECOMENDADOR BLOCK (NUEVO & INTERACTIVO) ── */}
      <ScrollRevealSection direction="scale">
        <RecomendadorSection setPage={setPage}/>
      </ScrollRevealSection>

      {/* ── INSTAGRAM BLOCK (NUEVO & INTERACTIVO) ── */}
      <ScrollRevealSection direction="left">
        <InstagramSection setPage={setPage}/>
      </ScrollRevealSection>

      {/* ── TESTIMONIALS SECTION ── */}
      <ScrollRevealSection direction="up">
        <section style={{ padding: '100px 24px', background: '#F7F5F2', position: 'relative', zIndex: 1 }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
              <div>
                <Label5 text="Reseñas"/>
                <Heading5 italic>Lo que dicen<br/>nuestras clientas</Heading5>
              </div>
              {/* Categories */}
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {testiCats.map(cat => (
                  <button
                    key={cat}
                    onClick={() => setTestiCat(cat)}
                    style={{
                      background: testiCat === cat ? '#1a1a1a' : '#fff',
                      color: testiCat === cat ? '#fff' : '#7a7a7a',
                      border: '1.5px solid rgba(58,58,58,0.15)',
                      cursor: 'pointer',
                      fontFamily: "'Outfit', sans-serif",
                      fontSize: 11,
                      letterSpacing: 1.5,
                      fontWeight: 600,
                      padding: '9px 22px',
                      borderRadius: 40,
                      textTransform: 'capitalize',
                      transition: 'all 0.25s cubic-bezier(0.16,1,0.3,1)'
                    }}
                  >
                    {cat.charAt(0).toUpperCase() + cat.slice(1)}
                  </button>
                ))}
              </div>
            </div>

            {visibleTestis.length > 0 ? (
              <TestimonialsSlider testimonials={visibleTestis} />
            ) : (
              <div style={{ textAlign: 'center', padding: '60px 0', color: '#7a7a7a', fontFamily: "'Outfit', sans-serif", fontSize: 14 }}>
                No hay reseñas en esta categoría aún.
              </div>
            )}
          </div>
        </section>
      </ScrollRevealSection>

      {/* ── SCHEDULE AND AVAILABILITY ── */}
      <ScrollRevealSection direction="right">
        <section style={{ padding: '100px 24px', background: '#fff', position: 'relative', zIndex: 1 }}>
          <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
            <Label5 text="Disponibilidad"/>
            <Heading5 center italic>Horarios de atención</Heading5>
            
            {/* Live Availability Badge */}
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
                background: isOpenNow ? 'rgba(37, 211, 102, 0.08)' : 'rgba(26, 26, 26, 0.04)',
                border: '1px solid ' + (isOpenNow ? 'rgba(37, 211, 102, 0.22)' : 'rgba(26, 26, 26, 0.08)'),
                borderRadius: 50,
                padding: '8px 20px',
                fontFamily: "'Outfit', sans-serif",
                fontSize: 12,
                fontWeight: 600,
                color: isOpenNow ? '#25D366' : '#666'
              }}>
                <span style={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  background: isOpenNow ? '#25D366' : '#999',
                  display: 'inline-block',
                  animation: isOpenNow ? 'pulseGreenV5 1.8s infinite' : 'none'
                }}/>
                <style>{`
                  @keyframes pulseGreenV5 {
                    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
                    70% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
                    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
                  }
                `}</style>
                {isOpenNow ? '¡Abierto Ahora! Agenda tu hora online' : 'Cerrado Ahora · Reserva tu cita para el próximo horario'}
              </div>
            </div>

            <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 15, color: '#7a7a7a', lineHeight: 1.75, maxWidth: '46ch', margin: '0 auto 56px' }}>
              Reserva tu cita online en cualquier momento. Disponible 24/7 para tu comodidad.
            </p>

            <div className="schedule-grid-v5">
              {(() => {
                const chileTime = getChileTime();
                const currentWeekday = chileTime && chileTime.weekday ? chileTime.weekday.toLowerCase() : '';
                
                const blockDeco = [
                  { cardClass: 'card-mint', icon: '🌿', monogram: 'LMV' },
                  { cardClass: 'card-peach', icon: '💆‍♀️', monogram: 'MJ' },
                  { cardClass: 'card-gold', icon: '✨', monogram: 'Sáb' },
                  { cardClass: 'card-closed', icon: '🕊️', monogram: 'Dom' }
                ];

                return (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 daysStr = block.days.filter(d => d).join(' · ');
                  const timeStr = block.isClosed ? 'Cerrado' : block.time;
                  const deco = blockDeco[i % 4];

                  const isToday = block.days.some(day => {
                    if (!day) return false;
                    const cleanDay = day.toLowerCase();
                    return currentWeekday.includes(cleanDay) || cleanDay.includes(currentWeekday) || 
                           (cleanDay.startsWith('mi') && currentWeekday.startsWith('mi')) ||
                           (cleanDay.startsWith('s') && currentWeekday.startsWith('sá')) ||
                           (cleanDay.startsWith('d') && currentWeekday.startsWith('do'));
                  });

                  const timeColor = block.isClosed ? '#999' : (i % 2 === 0 ? '#88C9C1' : '#F4B8C1');

                  return (
                    <div
                      key={i}
                      className={`schedule-card-v5 ${deco.cardClass} ${isToday ? 'today-active' : ''}`}
                    >
                      {/* Background letters */}
                      <div className="schedule-card-monogram">
                        {deco.monogram}
                      </div>

                      {/* Icon circle */}
                      <div style={{
                        width: 48,
                        height: 48,
                        borderRadius: '50%',
                        background: block.isClosed ? 'rgba(26,26,26,0.05)' : 'rgba(136, 201, 193, 0.08)',
                        color: block.isClosed ? '#999' : '#88C9C1',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: 20,
                        transition: 'all 0.3s',
                        position: 'relative',
                        zIndex: 2
                      }} className="schedule-card-icon">
                        {deco.icon}
                      </div>

                      {/* Days label */}
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: '#7a7a7a', letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 700, textAlign: 'center', position: 'relative', zIndex: 2 }}>
                        {daysStr}
                      </div>

                      {/* Time label */}
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, fontWeight: 700, color: timeColor, position: 'relative', zIndex: 2 }}>
                        {timeStr}
                      </div>

                      {/* Today Badge */}
                      {isToday && (
                        <div style={{
                          background: block.isClosed ? 'rgba(26,26,26,0.06)' : 'rgba(201, 169, 110, 0.1)',
                          border: '1px solid ' + (block.isClosed ? 'rgba(26,26,26,0.1)' : 'rgba(201, 169, 110, 0.3)'),
                          color: block.isClosed ? '#666' : '#C9A96E',
                          fontSize: 10,
                          fontWeight: 700,
                          fontFamily: "'Outfit', sans-serif",
                          letterSpacing: 1.5,
                          padding: '4px 10px',
                          borderRadius: 12,
                          textTransform: 'uppercase',
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: 4,
                          position: 'relative',
                          zIndex: 2,
                          marginTop: 4
                        }}>
                          <span style={{
                            width: 6,
                            height: 6,
                            borderRadius: '50%',
                            background: block.isClosed ? '#999' : '#C9A96E',
                            display: 'inline-block',
                            animation: block.isClosed ? 'none' : 'pulseGoldV5 1.5s infinite'
                          }}/>
                          {block.isClosed ? 'Hoy Descanso' : 'Hoy Abierto'}
                        </div>
                      )}
                    </div>
                  );
                });
              })()}
            </div>

            <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center' }}>
              <a 
                href={`https://maps.google.com/?q=${encodeURIComponent(siteConfig && siteConfig.schedule ? siteConfig.schedule.address : 'Mariano Sánchez Fontecilla 11950, Peñalolén, Santiago')}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 10,
                  background: 'rgba(201, 169, 110, 0.07)',
                  border: '1px solid rgba(201, 169, 110, 0.28)',
                  borderRadius: 50,
                  padding: '12px 28px',
                  textDecoration: 'none',
                  fontFamily: "'Cormorant Garamond', serif",
                  fontSize: 18,
                  fontStyle: 'italic',
                  fontWeight: 600,
                  color: '#C9A96E',
                  letterSpacing: 0.3,
                  transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)'
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = 'rgba(201, 169, 110, 0.14)';
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = '0 8px 24px rgba(201,169,110,0.12)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = 'rgba(201, 169, 110, 0.07)';
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'none';
                }}
              >
                <span style={{ fontSize: 16 }}>📍</span>
                {siteConfig && siteConfig.schedule ? siteConfig.schedule.address : 'Mariano Sánchez Fontecilla 11950, Peñalolén'}
              </a>
            </div>
          </div>
        </section>
      </ScrollRevealSection>

      {/* ── FINAL BOOKING CTA ── */}
      <ScrollRevealSection direction="scale">
        <section className="reserva-minuto-section" style={{ padding: '100px 24px', background: 'linear-gradient(135deg, #111111 0%, #1c1c1c 50%, #252525 100%)', position: 'relative', zIndex: 1, overflow: 'hidden' }}>
          {/* Faint gold glowing aura behind */}
          <div style={{ position: 'absolute', top: '-40%', right: '-20%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(201, 169, 110, 0.08) 0%, transparent 70%)', filter: 'blur(50px)', pointerEvents: 'none' }}/>
          <div style={{ position: 'absolute', bottom: '-30%', left: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(136, 201, 193, 0.06) 0%, transparent 70%)', filter: 'blur(50px)', pointerEvents: 'none' }}/>

          <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 1 }}>
            <div className="final-cta-grid-v5">
              
              {/* Left Column: Copy + Process */}
              <div>
                <span style={{
                  background: 'rgba(201, 169, 110, 0.08)',
                  border: '1.5px solid rgba(201, 169, 110, 0.25)',
                  color: '#C9A96E',
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: 2,
                  textTransform: 'uppercase',
                  padding: '6px 14px',
                  borderRadius: 40,
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 6,
                  marginBottom: 20
                }}>
                  ✦ Reserva en 1 Minuto
                </span>
                
                <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(38px, 4.5vw, 56px)', fontWeight: 400, color: '#fff', lineHeight: 1.15, margin: '0 0 24px' }}>
                  ¿Lista para reconectar<br/>con tu bienestar?
                </h2>
                
                <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.8, maxWidth: '52ch', marginBottom: 40 }}>
                  Tu momento de desconexión te está esperando. Elige el ritual ideal para ti, selecciona tu fecha y confirma de forma segura en segundos.
                </p>

                {/* 3 Steps horizontal cards */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 40 }} className="schedule-table-v5">
                  <div className="cta-step-card-v5">
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(136, 201, 193, 0.15)', color: '#88C9C1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, fontFamily: "'Outfit', sans-serif", flexShrink: 0 }}>
                      1
                    </div>
                    <div>
                      <h4 style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, fontWeight: 700, color: '#fff', margin: '0 0 2px' }}>Elige</h4>
                      <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.5)', margin: 0 }}>Tu ritual ideal</p>
                    </div>
                  </div>
                  
                  <div className="cta-step-card-v5">
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(244, 184, 193, 0.15)', color: '#F4B8C1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, fontFamily: "'Outfit', sans-serif", flexShrink: 0 }}>
                      2
                    </div>
                    <div>
                      <h4 style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, fontWeight: 700, color: '#fff', margin: '0 0 2px' }}>Reserva</h4>
                      <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.5)', margin: 0 }}>Fecha y hora</p>
                    </div>
                  </div>

                  <div className="cta-step-card-v5">
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(201, 169, 110, 0.15)', color: '#C9A96E', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, fontFamily: "'Outfit', sans-serif", flexShrink: 0 }}>
                      3
                    </div>
                    <div>
                      <h4 style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, fontWeight: 700, color: '#fff', margin: '0 0 2px' }}>Disfruta</h4>
                      <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.5)', margin: 0 }}>Momento de paz</p>
                    </div>
                  </div>
                </div>

                {/* Primary Action Button + Trust subtext */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div>
                    <button
                      onClick={() => setPage('agenda')}
                      style={{
                        background: 'linear-gradient(135deg, #88C9C1 0%, #6bb5ac 50%, #C9A96E 100%)',
                        backgroundSize: '200% auto',
                        color: '#fff',
                        border: 'none',
                        borderRadius: 50,
                        padding: '18px 48px',
                        fontFamily: "'Outfit', sans-serif",
                        fontSize: 12,
                        fontWeight: 700,
                        letterSpacing: 2.5,
                        textTransform: 'uppercase',
                        cursor: 'pointer',
                        transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                        boxShadow: '0 8px 32px rgba(136, 201, 193, 0.25)',
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 10,
                        animation: 'goldenGlowV5 2.5s infinite, shimmerBtn 4s linear infinite'
                      }}
                      onMouseEnter={e => {
                        e.currentTarget.style.transform = 'translateY(-3px)';
                        e.currentTarget.style.boxShadow = '0 16px 48px rgba(136, 201, 193, 0.45)';
                      }}
                      onMouseLeave={e => {
                        e.currentTarget.style.transform = 'none';
                        e.currentTarget.style.boxShadow = '0 8px 32px rgba(136, 201, 193, 0.25)';
                      }}
                    >
                      Reservar mi Cita Online →
                    </button>
                  </div>
                  
                  {/* Trust guarantees list */}
                  <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', opacity: 0.6, fontSize: 12.5, fontFamily: "'Outfit', sans-serif", color: '#fff' }}>
                    <span>✓ Confirmación inmediata por email</span>
                    <span>✓ Cancela o reagenda libremente</span>
                    <span>✓ Protocolo de higiene premium</span>
                  </div>
                </div>
              </div>

              {/* Right Column: Immersive Atmosphere Card */}
              <div>
                <div className="cta-image-card-v5" style={{ height: 380, position: 'relative' }}>
                  <img
                    src="uploads/body_treatment.png"
                    alt="Spa Ritual Atmosphere"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                    onError={e => { e.target.src = 'https://picsum.photos/seed/spa/400/500'; }}
                  />
                  {/* Luxury soft gold filter overlay */}
                  <div style={{
                    position: 'absolute',
                    inset: 0,
                    background: 'linear-gradient(to top, rgba(19,19,19,0.7) 0%, rgba(19,19,19,0.2) 50%, transparent 100%)',
                    zIndex: 2
                  }}/>
                  
                  {/* Trust overlay badge */}
                  <div style={{
                    position: 'absolute',
                    bottom: 24,
                    left: 24,
                    right: 24,
                    background: 'rgba(255, 255, 255, 0.08)',
                    backdropFilter: 'blur(16px)',
                    WebkitBackdropFilter: 'blur(16px)',
                    border: '1px solid rgba(255, 255, 255, 0.15)',
                    borderRadius: 16,
                    padding: '16px 20px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    zIndex: 3
                  }}>
                    <div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14, fontWeight: 700, color: '#fff', marginBottom: 2 }}>
                        El Arte de Quererte
                      </div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
                        Mariano Sánchez Fontecilla, Peñalolén
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ color: '#C9A96E', fontSize: 13, fontWeight: 'bold' }}>
                        ⭐ 4.9
                      </div>
                      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 10, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                        150+ opiniones
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </section>
      </ScrollRevealSection>
    </div>
  );
};

Object.assign(window, { HomeV5 });