|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { useEffect, useRef, useState } from "react" |
| 4 | + |
| 5 | +const images = [ |
| 6 | + { |
| 7 | + src: "./gallery/conectaton-ips-2025.jpg", |
| 8 | + alt: "Conectatón IPS Perú 2025", |
| 9 | + description: "At IPS Perú 2025 with teammates, representing Hospital Santa Clotilde & university.", |
| 10 | + }, |
| 11 | + { |
| 12 | + src: "./gallery/hl7-peru-reunion.png", |
| 13 | + alt: "Meeting with HL7 Peru members", |
| 14 | + description: "SIH SALUS team meeting with HL7 Perú members.", |
| 15 | + }, |
| 16 | + { |
| 17 | + src: "./gallery/health-minister.jpg", |
| 18 | + alt: "With Dr. César Vásquez (Minister of Health) and José Pérez Lu (General Director of IT, MINSA)", |
| 19 | + description: "With Dr. César Vásquez, Minister of Health, and José Pérez Lu, General Director of IT at MINSA.", |
| 20 | + }, |
| 21 | + { |
| 22 | + src: "./gallery/diresa-huanuco-sanmartin.jpg", |
| 23 | + alt: "With DIRESA Huánuco and San Martín members", |
| 24 | + description: "With members of DIRESA Huánuco and San Martín during a regional health digitalization meeting.", |
| 25 | + }, |
| 26 | +] |
| 27 | + |
| 28 | +const VISIBLE_COUNT_DESKTOP = 3 |
| 29 | +const VISIBLE_COUNT_MOBILE = 1 |
| 30 | +const IMAGE_RATIO = "aspect-[16/9]" // Para fotos horizontales |
| 31 | + |
| 32 | +const getMobile = () => typeof window !== 'undefined' && window.innerWidth < 768; |
| 33 | + |
| 34 | +export function GallerySection() { |
| 35 | + const sectionRef = useRef<HTMLElement>(null) |
| 36 | + const [start, setStart] = useState(0) |
| 37 | + const [isHovered, setIsHovered] = useState(false) |
| 38 | + const [visibleCount, setVisibleCount] = useState(VISIBLE_COUNT_DESKTOP) |
| 39 | + const [isMobile, setIsMobile] = useState(getMobile()); |
| 40 | + |
| 41 | + useEffect(() => { |
| 42 | + const observer = new IntersectionObserver( |
| 43 | + (entries) => { |
| 44 | + entries.forEach((entry) => { |
| 45 | + if (entry.isIntersecting) { |
| 46 | + entry.target.classList.add("is-visible") |
| 47 | + } |
| 48 | + }) |
| 49 | + }, |
| 50 | + { threshold: 0.1 }, |
| 51 | + ) |
| 52 | + const section = sectionRef.current |
| 53 | + if (section) { |
| 54 | + observer.observe(section) |
| 55 | + } |
| 56 | + return () => { |
| 57 | + if (section) { |
| 58 | + observer.unobserve(section) |
| 59 | + } |
| 60 | + } |
| 61 | + }, []) |
| 62 | + |
| 63 | + useEffect(() => { |
| 64 | + if (isHovered) return |
| 65 | + const interval = setInterval(() => { |
| 66 | + setStart((prev) => (prev + 1) % images.length) |
| 67 | + }, 3500) |
| 68 | + return () => clearInterval(interval) |
| 69 | + }, [isHovered]) |
| 70 | + |
| 71 | + useEffect(() => { |
| 72 | + function handleResize() { |
| 73 | + setIsMobile(getMobile()); |
| 74 | + setVisibleCount(getMobile() ? VISIBLE_COUNT_MOBILE : VISIBLE_COUNT_DESKTOP); |
| 75 | + } |
| 76 | + handleResize(); |
| 77 | + window.addEventListener("resize", handleResize); |
| 78 | + return () => window.removeEventListener("resize", handleResize); |
| 79 | + }, []) |
| 80 | + |
| 81 | + // Calcula las imágenes visibles en el carrusel |
| 82 | + const visibleImages = Array.from({ length: visibleCount }, (_, i) => { |
| 83 | + return images[(start + i) % images.length] |
| 84 | + }) |
| 85 | + |
| 86 | + // Efecto de desplazamiento natural |
| 87 | + const trackRef = useRef<HTMLDivElement>(null) |
| 88 | + useEffect(() => { |
| 89 | + if (!trackRef.current) return |
| 90 | + trackRef.current.style.transition = |
| 91 | + "transform 0.8s cubic-bezier(0.4,0,0.2,1)" |
| 92 | + trackRef.current.style.transform = `translateX(-${(100 / visibleCount) * start |
| 93 | + }%)` |
| 94 | + }, [start, visibleCount]) |
| 95 | + |
| 96 | + return ( |
| 97 | + <section |
| 98 | + id="gallery" |
| 99 | + ref={sectionRef} |
| 100 | + className="py-12 md:py-20 fade-in-section" |
| 101 | + > |
| 102 | + <div className="container px-2 md:px-6"> |
| 103 | + <div className="mx-auto max-w-[58rem]"> |
| 104 | + <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-4xl mb-8"> |
| 105 | + <span className="text-dark-accent">#</span> Gallery |
| 106 | + </h2> |
| 107 | + <div |
| 108 | + className={`mb-8 relative flex-1 flex items-center justify-center overflow-hidden ${isMobile ? 'w-full' : 'w-screen left-1/2 right-1/2 -mx-[50vw]'} px-0`} |
| 109 | + style={{ maxWidth: "100vw" }} |
| 110 | + onMouseEnter={() => setIsHovered(true)} |
| 111 | + onMouseLeave={() => setIsHovered(false)} |
| 112 | + > |
| 113 | + {isMobile ? ( |
| 114 | + <div |
| 115 | + ref={trackRef} |
| 116 | + className="flex" |
| 117 | + style={{ |
| 118 | + width: "100%", |
| 119 | + minHeight: "56vw", |
| 120 | + maxHeight: "70vh", |
| 121 | + transition: "transform 0.8s cubic-bezier(0.4,0,0.2,1)", |
| 122 | + }} |
| 123 | + > |
| 124 | + <div |
| 125 | + className="flex flex-col items-center justify-start w-full" |
| 126 | + style={{ minWidth: "100%", maxWidth: "100%", height: "auto", maxHeight: "none" }} |
| 127 | + > |
| 128 | + <div className="w-full h-0 pb-[56.25%] relative flex items-center justify-center bg-dark-surface rounded-2xl overflow-hidden shadow-lg"> |
| 129 | + <img |
| 130 | + src={images[start].src} |
| 131 | + alt={images[start].alt} |
| 132 | + className="border border-dark-border absolute top-0 left-0 w-full h-full object-cover select-none" |
| 133 | + draggable={false} |
| 134 | + style={{ objectFit: "cover", width: "100%", height: "100%", display: "block" }} |
| 135 | + /> |
| 136 | + </div> |
| 137 | + <div className="mt-2 w-full break-words text-center text-dark-secondary text-sm md:text-base transition-colors min-h-[2.5rem] flex items-center justify-center whitespace-normal overflow-visible px-2"> |
| 138 | + <span style={{ wordBreak: 'break-word', overflowWrap: 'break-word', whiteSpace: 'normal', width: '100%' }}> |
| 139 | + {images[start].description} |
| 140 | + </span> |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + </div> |
| 144 | + ) : ( |
| 145 | + <div |
| 146 | + ref={trackRef} |
| 147 | + className="flex gap-2 md:gap-8" |
| 148 | + style={{ |
| 149 | + width: `${(images.length / visibleCount) * 100}%`, |
| 150 | + minHeight: "21vw", |
| 151 | + maxHeight: "70vh", |
| 152 | + transition: "transform 0.8s cubic-bezier(0.4,0,0.2,1)", |
| 153 | + }} |
| 154 | + > |
| 155 | + {images.concat(images.slice(0, visibleCount)).map((img, idx) => ( |
| 156 | + <div |
| 157 | + key={img.src + idx} |
| 158 | + className="flex flex-col items-center justify-start w-full" |
| 159 | + style={{ |
| 160 | + minWidth: `calc(100vw / ${visibleCount})`, |
| 161 | + maxWidth: `calc(100vw / ${visibleCount})`, |
| 162 | + height: "auto", |
| 163 | + maxHeight: "none", |
| 164 | + }} |
| 165 | + > |
| 166 | + <div className="w-full h-0 pb-[56.25%] relative flex items-center justify-center bg-dark-surface rounded-2xl overflow-hidden shadow-lg"> |
| 167 | + <img |
| 168 | + src={img.src} |
| 169 | + alt={img.alt} |
| 170 | + className="border border-dark-border absolute top-0 left-0 w-full h-full object-cover select-none" |
| 171 | + draggable={false} |
| 172 | + style={{ objectFit: "cover", width: "100%", height: "100%", display: "block" }} |
| 173 | + /> |
| 174 | + </div> |
| 175 | + <div className="mt-2 w-full break-words text-center text-dark-secondary text-sm md:text-base transition-colors min-h-[2.5rem] flex items-center justify-center whitespace-normal overflow-visible px-2"> |
| 176 | + <span style={{ wordBreak: 'break-word', overflowWrap: 'break-word', whiteSpace: 'normal', width: '100%' }}> |
| 177 | + {img.description} |
| 178 | + </span> |
| 179 | + </div> |
| 180 | + </div> |
| 181 | + ))} |
| 182 | + </div> |
| 183 | + )} |
| 184 | + </div> |
| 185 | + <div className="flex gap-2 mt-2 justify-center"> |
| 186 | + {images.map((_, idx) => ( |
| 187 | + <button |
| 188 | + key={idx} |
| 189 | + className={`w-3 h-3 rounded-full border border-dark-accent transition-all ${idx === start ? "bg-dark-accent" : "bg-transparent"}`} |
| 190 | + onClick={() => setStart(idx)} |
| 191 | + aria-label={`Ver imagen ${idx + 1}`} |
| 192 | + tabIndex={0} |
| 193 | + style={isMobile ? { minWidth: 12, minHeight: 12 } : {}} |
| 194 | + /> |
| 195 | + ))} |
| 196 | + </div> |
| 197 | + </div> |
| 198 | + </div> |
| 199 | + </section> |
| 200 | + ) |
| 201 | +} |
0 commit comments