// GaleriaV5 — Grid masonry con imágenes reales generadas, filtros premium y lightbox operacional
 
const GaleriaV5 = ({ setPage }) => {
  const [filter, setFilter] = React.useState('todos');
  const [lightbox, setLightbox] = React.useState(null);
  const [visibleItems, setVisibleItems] = React.useState({});
  const observerRef = React.useRef({});
 
  const cats = ['todos', 'faciales', 'masajes', 'pestañas'];
 
  const items = [
    { cat: 'faciales', img: 'uploads/gallery_facial_result.png', label: 'Limpieza Facial — Resultado', size: 'tall', serviceName: 'Limpieza Facial Profunda' },
    { cat: 'pestañas', img: 'uploads/lash_service.png', label: 'Lash Lifting — Resultado Natural', size: 'normal', serviceName: 'Lash Lifting' },
    { cat: 'masajes', img: 'uploads/massage_service.png', label: 'Masaje de Relajación', size: 'normal', serviceName: 'Masaje de Relajación' },
    { cat: 'faciales', img: 'uploads/facial_service.png', label: 'Limpieza Profunda — Proceso', size: 'wide', serviceName: 'Limpieza Facial Profunda' },
    { cat: 'masajes', img: 'uploads/body_treatment.png', label: 'Tratamiento Reductor', size: 'tall', serviceName: 'Tratamiento Reductor' },
    { cat: 'faciales', img: 'uploads/spa_ambiance.png', label: 'Espacio de Bienestar', size: 'normal', serviceName: null },
    { cat: 'pestañas', img: 'https://picsum.photos/seed/lash-detail/700/850', label: 'Lash Lifting — Detalle', size: 'tall', serviceName: 'Lash Lifting' },
    { cat: 'faciales', img: 'https://picsum.photos/seed/glow-skin/700/560', label: 'Piel Radiante — Post Tratamiento', size: 'wide', serviceName: 'Limpieza Facial Profunda' },
    { cat: 'masajes', img: 'https://picsum.photos/seed/relax-spa-warm/700/700', label: 'Masaje — Ambiente', size: 'normal', serviceName: 'Masaje de Relajación' },
  ];
 
  const filtered = filter === 'todos' ? items : items.filter(i => i.cat === filter);

  React.useEffect(() => {
    setVisibleItems({}); // reset on filter change
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setVisibleItems(prev => ({ ...prev, [entry.target.dataset.idx]: true }));
        }
      });
    }, { threshold: 0.1 });
    
    Object.values(observerRef.current).forEach(el => {
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, [filter]);

  return (
    <div style={{ minHeight: '100vh', background: '#FAFAF8', paddingTop: 88, paddingBottom: 120 }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');
        @keyframes svcFadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
        @keyframes gal5FadeIn { from { opacity:0; } to { opacity:1; } }
        @keyframes gal5ScaleIn { from { opacity:0; transform:scale(0.96) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
        
        .gal5-item {
          break-inside: avoid;
          margin-bottom: 24px;
          overflow: hidden;
          cursor: pointer;
          position: relative;
          border-radius: 16px;
          border: 1px solid rgba(136, 201, 193, 0.15);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
          transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
          opacity: 0;
          transform: translateY(30px);
        }
        .gal5-item.is-visible {
          opacity: 1;
          transform: translateY(0);
        }
        .gal5-item.is-visible:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 30px rgba(136, 201, 193, 0.12);
          border-color: rgba(136, 201, 193, 0.4);
        }
        
        .gal5-overlay {
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          opacity: 0;
          transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 24px;
          border-radius: 16px;
        }
        .gal5-item:hover .gal5-overlay {
          opacity: 1;
        }
        
        .gal5-item img {
          width: 100%;
          display: block;
          transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
          border-radius: 16px;
        }
        .gal5-item:hover img {
          transform: scale(1.04);
        }
        
        .gal5-lightbox-card {
          display: flex;
          background: #fff;
          border-radius: 24px;
          overflow: hidden;
          max-width: 960px;
          width: 100%;
          box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
          animation: gal5ScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        
        .btn-primary-mint {
          background: linear-gradient(135deg, #88C9C1, #6bb5ac) !important;
          color: #fff !important;
          border: none !important;
          padding: 16px 32px !important;
          border-radius: 50px !important;
          font-family: 'Outfit', sans-serif !important;
          font-size: 13px !important;
          font-weight: 600 !important;
          letter-spacing: 2px !important;
          text-transform: uppercase !important;
          cursor: pointer !important;
          transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
          box-shadow: 0 4px 15px rgba(136, 201, 193, 0.25) !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          text-decoration: none !important;
        }
        .btn-primary-mint:hover {
          transform: translateY(-2px) !important;
          box-shadow: 0 8px 24px rgba(136, 201, 193, 0.45) !important;
          filter: brightness(1.05) !important;
        }
        .btn-primary-mint:active {
          transform: translateY(0) !important;
        }
        
        @media(max-width: 860px) {
          .gal5-lightbox-card {
            flex-direction: column;
            max-height: 90vh;
            overflow-y: auto;
          }
          .gal5-lightbox-card::-webkit-scrollbar { width: 4px; }
          .gal5-lightbox-card::-webkit-scrollbar-track { background: transparent; }
          .gal5-lightbox-card::-webkit-scrollbar-thumb { background: rgba(136, 201, 193, 0.4); border-radius: 4px; }
          .gal5-lb-img-container {
            width: 100% !important;
            height: 300px !important;
          }
        }
      `}</style>
 
      {/* ─── Hero Header ─────────────────────────────────────── */}
      <div style={{
        background: 'linear-gradient(135deg, #E8F5F3 0%, #FAFAF8 60%, #FCE8EC 100%)',
        padding: '80px 24px 48px',
        textAlign: 'center',
        borderBottom: '1px solid rgba(136,201,193,0.15)',
        position: 'relative',
        overflow: 'hidden',
        animation: 'svcFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both'
      }}>
        {/* Background decorative elements */}
        <div style={{
          position: 'absolute',
          top: '-10%',
          right: '-5%',
          width: '200px',
          height: '200px',
          borderRadius: '50%',
          background: 'rgba(244,184,193,0.12)',
          filter: 'blur(40px)',
          pointerEvents: 'none'
        }} />
        <div style={{
          position: 'absolute',
          bottom: '-10%',
          left: '-5%',
          width: '250px',
          height: '250px',
          borderRadius: '50%',
          background: 'rgba(136,201,193,0.12)',
          filter: 'blur(50px)',
          pointerEvents: 'none'
        }} />
        
        <span style={{
          display: 'inline-block',
          background: 'rgba(136, 201, 193, 0.12)',
          color: '#2d6a61',
          padding: '6px 16px',
          borderRadius: '20px',
          fontFamily: "'Outfit', sans-serif",
          fontSize: '12px',
          fontWeight: 700,
          letterSpacing: '2px',
          textTransform: 'uppercase',
          marginBottom: '16px'
        }}>Resultados Reales</span>
        
        <h1 style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: '48px',
          fontWeight: 400,
          fontStyle: 'italic',
          color: '#1a1a1a',
          margin: '0 0 12px',
          lineHeight: 1.2
        }}>Nuestra Galería</h1>
        
        <p style={{
          fontFamily: "'Outfit', sans-serif",
          fontSize: '16px',
          color: '#666',
          margin: '0 auto',
          maxWidth: '480px',
          fontWeight: 300,
          lineHeight: 1.6
        }}>
          Explora los cambios y resultados de bienestar logrados por nuestras especialistas. Compromiso con tu belleza natural.
        </p>
      </div>
 
      {/* ─── Filters & Masonry Container ─────────────────────── */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 32px 80px' }}>
        
        {/* Filter buttons */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: '12px', flexWrap: 'wrap', marginBottom: '48px' }}>
          {cats.map(c => {
            const isSelected = filter === c;
            return (
              <button
                key={c}
                onClick={() => setFilter(c)}
                style={{
                  background: isSelected ? '#1a1a1a' : 'transparent',
                  color: isSelected ? '#fff' : '#666',
                  border: isSelected ? '1px solid #1a1a1a' : '1px solid rgba(136, 201, 193, 0.25)',
                  borderRadius: '30px',
                  padding: '10px 24px',
                  fontFamily: "'Outfit', sans-serif",
                  fontSize: '13px',
                  fontWeight: 500,
                  letterSpacing: '1.5px',
                  cursor: 'pointer',
                  transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
                  textTransform: 'capitalize'
                }}
              >
                {c === 'todos' ? 'Todos' : c}
              </button>
            );
          })}
        </div>
 
        {/* Masonry grid */}
        <div style={{ columns: '3 280px', columnGap: '24px' }}>
          {filtered.map((item, i) => (
            <div 
              key={i} 
              data-idx={i}
              ref={el => observerRef.current[i] = el}
              className={`gal5-item ${visibleItems[i] ? 'is-visible' : ''}`} 
              onClick={() => setLightbox(item)}
            >
              <img
                src={item.img}
                alt={item.label}
                onError={e => { e.target.src = `https://picsum.photos/seed/${item.cat}-${i}/600/${item.size === 'tall' ? 850 : item.size === 'wide' ? 500 : 650}`; }}
              />
              <div className="gal5-overlay">
                <div>
                  <div style={{ 
                    fontFamily: "'Outfit', sans-serif", 
                    fontSize: '9px', 
                    letterSpacing: '2.5px', 
                    color: '#C9A96E', 
                    textTransform: 'uppercase', 
                    marginBottom: '8px',
                    fontWeight: 600
                  }}>
                    {item.cat}
                  </div>
                  <div style={{ 
                    fontFamily: "'Cormorant Garamond', serif", 
                    fontSize: '22px', 
                    color: '#1a1a1a', 
                    fontStyle: 'italic',
                    fontWeight: 500,
                    lineHeight: 1.2
                  }}>
                    {item.label}
                  </div>
                  <div style={{ 
                    fontFamily: "'Outfit', sans-serif", 
                    fontSize: '10px', 
                    color: '#88C9C1', 
                    letterSpacing: '1px',
                    textTransform: 'uppercase',
                    marginTop: '12px',
                    fontWeight: 600
                  }}>
                    Ver detalle →
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
 
      {/* ─── Lightbox Enriquecido ───────────────────────────── */}
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, zIndex: 1000,
          background: 'rgba(10, 10, 10, 0.95)', backdropFilter: 'blur(20px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 24, animation: 'gal5FadeIn 0.3s ease',
        }}>
          <div onClick={e => e.stopPropagation()} className="gal5-lightbox-card">
            {/* Image section */}
            <div className="gal5-lb-img-container" style={{ width: '55%', background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <img 
                src={lightbox.img} 
                alt={lightbox.label} 
                style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
                onError={e => { e.target.src = `https://picsum.photos/seed/spa-detail/800/600`; }}
              />
            </div>
 
            {/* Details panel */}
            <div style={{ padding: '40px', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: '#fff' }}>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
                  <span style={{ 
                    fontFamily: "'Outfit', sans-serif", 
                    fontSize: '9px', 
                    fontWeight: 600, 
                    letterSpacing: '1.5px', 
                    color: '#2d6a61', 
                    background: '#E8F5F3', 
                    padding: '6px 12px', 
                    borderRadius: '20px', 
                    textTransform: 'uppercase' 
                  }}>
                    {lightbox.cat}
                  </span>
                  <button 
                    onClick={() => setLightbox(null)} 
                    style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '28px', color: '#bbb', transition: 'color 0.2s', lineHeight: 1 }}
                    onMouseEnter={e => e.target.style.color = '#1a1a1a'}
                    onMouseLeave={e => e.target.style.color = '#bbb'}
                  >
                    ×
                  </button>
                </div>
                
                <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '32px', fontWeight: 500, fontStyle: 'italic', color: '#1a1a1a', marginBottom: '16px', lineHeight: 1.2 }}>
                  {lightbox.label}
                </h2>
                
                <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: '14px', color: '#666', lineHeight: '1.6', marginBottom: '28px' }}>
                  Resultados reales y procesos de nuestros tratamientos. En El Arte de Quererte, personalizamos cada sesión para adaptarnos a las necesidades únicas de tu cuerpo y de tu piel, garantizando una experiencia de cuidado única.
                </p>
                
                {lightbox.serviceName && (
                  <div style={{ 
                    background: '#FAFAF8', 
                    border: '1px solid rgba(136, 201, 193, 0.25)', 
                    borderRadius: '16px', 
                    padding: '16px 20px', 
                    marginBottom: '28px' 
                  }}>
                    <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: '11px', color: '#88C9C1', textTransform: 'uppercase', letterSpacing: '1.5px', fontWeight: 600, marginBottom: '4px' }}>
                      Tratamiento Recomendado
                    </div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '20px', color: '#1a1a1a', fontWeight: 600 }}>
                      {lightbox.serviceName}
                    </div>
                  </div>
                )}
              </div>
              
              <div>
                {lightbox.serviceName ? (
                  <button 
                    onClick={() => {
                      localStorage.setItem('eadq_selected_service_name', lightbox.serviceName);
                      setPage('agenda');
                    }}
                    className="btn-primary-mint"
                    style={{ width: '100%' }}
                  >
                    Reservar este servicio
                  </button>
                ) : (
                  <button 
                    onClick={() => setPage('agenda')}
                    className="btn-primary-mint"
                    style={{ width: '100%' }}
                  >
                    Ir a Reservar Cita
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
 
Object.assign(window, { GaleriaV5 });