/* ===== Secciones A: Nav, Hero, Rooms ===== */ const { useState, useEffect, useRef } = React; const Icon = window.Icon; // Enlace directo a WhatsApp del hotel con mensaje pre-escrito function waLink(room) { const msg = room ? `Hola, quisiera reservar una habitación ${room} en Fábrica Hotel. ¿Me confirmás disponibilidad y tarifa? ¡Gracias!` : 'Hola, quisiera consultar disponibilidad en Fábrica Hotel. ¡Gracias!'; return `https://wa.me/${HOTEL.whatsapp}?text=${encodeURIComponent(msg)}`; } const NAV_LINKS = [ { href: '#habitaciones', label: 'Habitaciones' }, { href: '#servicios', label: 'Amenities' }, { href: '#historia', label: 'Nosotros' }, { href: '#ubicacion', label: 'Ubicación' }, ]; function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const logoCls = 'text-[var(--accent)]'; const linkCls = scrolled ? 'text-black/65' : 'text-white/75'; const burgerCls = scrolled ? 'text-[#1A1613]' : 'text-white'; return ( ); } /* ===================== HERO ===================== */ function Hero({ t }) { const layout = t.heroLayout || 'Centrado'; const dark = t.heroDark ?? 0.45; const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; v.muted = true; v.defaultMuted = true; let tries = 0; const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }; tryPlay(); ['loadeddata', 'canplay', 'canplaythrough'].forEach((ev) => v.addEventListener(ev, tryPlay) ); // retry a few times in case autoplay is initially blocked const iv = setInterval(() => { if (v.paused && tries < 12) { tryPlay(); tries++; } else clearInterval(iv); }, 400); const onVis = () => { if (!document.hidden) tryPlay(); }; document.addEventListener('visibilitychange', onVis); return () => { clearInterval(iv); document.removeEventListener('visibilitychange', onVis); ['loadeddata', 'canplay', 'canplaythrough'].forEach((ev) => v.removeEventListener(ev, tryPlay) ); }; }, []); const isLeft = layout === 'Editorial'; const isMinimal = layout === 'Minimal'; const overlay = `linear-gradient(to bottom, rgba(20,17,13,${dark}) 0%, rgba(20,17,13,${dark * 0.5}) 35%, ` + `rgba(20,17,13,${dark}) 80%, rgba(20,17,13,0.95) 100%), ` + `radial-gradient(ellipse at 50% 55%, rgba(var(--accent-rgb),0.10) 0%, transparent 60%)`; const titleSize = isMinimal ? 'text-[clamp(2.6rem,6.5vw,4.6rem)]' : 'text-[clamp(3.5rem,9vw,6.5rem)]'; const align = isLeft ? 'items-start text-left' : 'items-center text-center'; const eyebrowJustify = isLeft ? 'justify-start' : 'justify-center'; const ctaJustify = isLeft ? 'justify-start' : 'justify-center'; const contentMax = isLeft ? 'max-w-3xl mr-auto' : ''; return (
Armstrong · Santa Fe · RN 9 {!isLeft && } {isLeft ? ( <>fábrica
hotel ) : ( <>fábrica
hotel )} ★ ★ ★ ★ 10 años fabricando descanso Reservar Reseñas
EST. 2016
Scroll
); } /* ===================== ROOMS ===================== */ // Encuadres para simular varias fotos por habitación (reemplazar por r.gallery real luego) const SLIDE_FRAMES = ['50% 22%', '50% 52%', '50% 82%']; function RoomCardContent({ r, i, total, cardActive = false, ready = false }) { // galería real si existe; si no, 3 encuadres de la misma foto const slides = (r.gallery && r.gallery.length) ? r.gallery.map((src) => ({ src, pos: r.pos || '50% 50%' })) : SLIDE_FRAMES.map((pos) => ({ src: r.img, pos })); const [active, setActive] = useState(0); const [hover, setHover] = useState(false); const [isMobile, setIsMobile] = useState(false); // Detectar móvil/tablet (<1024px) y mantenerlo actualizado al rotar/redimensionar useEffect(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mq = window.matchMedia('(max-width: 1023px)'); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update); return () => { mq.removeEventListener ? mq.removeEventListener('change', update) : mq.removeListener(update); }; }, []); // Solo escritorio ≥1024px usa hover const enableHover = () => { if (typeof window === 'undefined' || !window.matchMedia) return false; return window.matchMedia('(min-width: 1024px)').matches; }; // Autoplay: en móvil solo la tarjeta centrada Y con la sección detenida en vista (ready); // en escritorio al pasar el cursor const playing = isMobile ? (cardActive && ready) : hover; useEffect(() => { if (!playing || slides.length < 2) return; const id = setInterval(() => setActive((a) => (a + 1) % slides.length), 1600); return () => clearInterval(id); }, [playing, slides.length]); // Reinicia a la primera al detenerse (salir el cursor en escritorio / scrollear en móvil) useEffect(() => { if (!playing) setActive(0); }, [playing]); return (
{ if (enableHover()) setHover(true); }} onMouseLeave={() => setHover(false)} > {/* Imagen: carrusel automático al hover */}
{slides.map((s, si) => (
))}
{String(i + 1).padStart(2, '0')} / 0{total} {r.meta}
{/* indicadores de slide */}
{slides.map((_, si) => (
{r.spec}

{r.name}

{/* Recuadro: descripción */}

{r.desc}

{r.tags.map((tag) => ( {tag} ))}
Consultar disponibilidad
); } const CARD_WIDTH = 520; const GAP = 20; function RoomsHeader({ children }) { return (
Alojamiento · 23 habitaciones

Cada viaje
pide su espacio.

{children} ); } function Rooms({ t }) { const grid = (t.roomsLayout || 'Scroll horizontal') === 'Grilla'; const scrollRef = useRef(null); const [progress, setProgress] = useState(0); const [current, setCurrent] = useState(1); const [activeIndex, setActiveIndex] = useState(0); const [ready, setReady] = useState(false); // autoplay listo: sección en vista + scroll detenido useEffect(() => { if (grid) return; const el = scrollRef.current; if (!el) return; let idleTimer = null; const sectionInView = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; return r.top < vh * 0.8 && r.bottom > vh * 0.2; }; const computeActive = () => { const max = el.scrollWidth - el.clientWidth; const pct = max > 0 ? el.scrollLeft / max : 0; setProgress(pct); setCurrent(Math.min(ROOMS.length, Math.round(pct * (ROOMS.length - 1)) + 1)); const track = el.firstElementChild; if (track) { const center = el.scrollLeft + el.clientWidth / 2; let best = 0, bestDist = Infinity; Array.from(track.children).forEach((child, idx) => { const c = child.offsetLeft + child.offsetWidth / 2; const dist = Math.abs(c - center); if (dist < bestDist) { bestDist = dist; best = idx; } }); setActiveIndex(best); } }; const onScroll = () => { computeActive(); setReady(false); // cualquier scroll (vertical u horizontal) frena el autoplay if (idleTimer) clearTimeout(idleTimer); idleTimer = setTimeout(() => { setReady(sectionInView()); }, 1100); }; el.addEventListener('scroll', onScroll); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { el.removeEventListener('scroll', onScroll); window.removeEventListener('scroll', onScroll); if (idleTimer) clearTimeout(idleTimer); }; }, [grid]); useEffect(() => { if (grid) return; const el = scrollRef.current; if (!el) return; let down = false, sx = 0, sl = 0; const onDown = (e) => { down = true; sx = e.pageX; sl = el.scrollLeft; el.classList.add('fh-cursor-grabbing'); }; const onUp = () => { down = false; el.classList.remove('fh-cursor-grabbing'); }; const onMove = (e) => { if (!down) return; e.preventDefault(); el.scrollLeft = sl - (e.pageX - sx) * 1.4; }; el.addEventListener('mousedown', onDown); el.addEventListener('mouseup', onUp); el.addEventListener('mouseleave', onUp); el.addEventListener('mousemove', onMove); return () => { el.removeEventListener('mousedown', onDown); el.removeEventListener('mouseup', onUp); el.removeEventListener('mouseleave', onUp); el.removeEventListener('mousemove', onMove); }; }, [grid]); const scrollBy = (dir) => scrollRef.current?.scrollBy({ left: dir * (CARD_WIDTH + GAP), behavior: 'smooth' }); if (grid) { return (
{ROOMS.map((r, i) => ( ))}
); } return (
{ROOMS.map((r, i) => (
))}
{String(current).padStart(2, '0')} / 0{ROOMS.length}
Deslizá →
); } Object.assign(window, { Nav, Hero, Rooms });