/* GALLOS MEDIA — section components */ const gmIcons = { arrow: (props) => ( ), arrowDown: (props) => ( ), mail: (props) => ( ), phone: (props) => ( ), }; /* ---------- CARRUSEL DE FRAMES (auto-deslizante) ---------- */ function ProjectCarousel({ frames, alt, interval = 3600, dots = false }) { const safe = frames && frames.length ? frames : []; const [idx, setIdx] = React.useState(0); // fase aleatoria para que no cambien todos a la vez const phase = React.useRef(Math.floor(Math.random() * 1800)); React.useEffect(() => { if (safe.length <= 1) return; let id; const start = setTimeout(() => { id = setInterval(() => setIdx(i => (i + 1) % safe.length), interval); }, phase.current); return () => { clearTimeout(start); clearInterval(id); }; }, [safe.length, interval]); if (!safe.length) return
SIN FRAMES
; return (
{safe.map((src, i) => ( {i ))} {dots && safe.length > 1 && ( )}
); } /* ---------- LIGHTBOX DESPLEGABLE ---------- */ function ProjectLightbox({ project, onClose }) { React.useEffect(() => { if (!project) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [project]); if (!project) return null; return (
e.stopPropagation()}>
{project.genre}

{project.title}

{project.synopsis &&

{project.synopsis}

}
{project.year} · {project.genre}
{project.video && (
¿Deseas ver el video? Ver video
)}
); } /* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */ function WhatsAppFab() { const msg = encodeURIComponent('Hola GALLOS MEDIA, me interesa platicar sobre un proyecto.'); return ( ); } /* ---------- HEADER ---------- */ function Header({ activeSection, onOpenMobile }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const items = [ { id: 'proyectos', label: 'PROYECTOS', href: '/proyectos' }, { id: 'servicios', label: 'SERVICIOS', href: '/servicios' }, { id: 'sobre-nosotros', label: 'SOBRE NOSOTROS', href: '/nosotros' }, ]; return (
GALLOS MEDIA Contáctanos para iniciar tu proyecto
); } /* ---------- NAV COMPLETO REUTILIZABLE (header + menú móvil) ---------- Se usa en todas las páginas para tener siempre el menú principal. */ function SiteNav({ active }) { const [mobileOpen, setMobileOpen] = React.useState(false); React.useEffect(() => { const h = document.querySelector('.hamburger'); if (h) h.classList.toggle('open', mobileOpen); }, [mobileOpen]); return ( <>
setMobileOpen(o => !o)} /> setMobileOpen(false)} /> ); } function MobileOverlay({ open, active, onClose }) { React.useEffect(() => { if (open) document.body.style.overflow = 'hidden'; else document.body.style.overflow = ''; return () => { document.body.style.overflow = ''; }; }, [open]); // Cierra con Escape React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); const items = [ { id: 'inicio', label: 'Inicio', href: '/inicio' }, { id: 'proyectos', label: 'Proyectos', href: '/proyectos' }, { id: 'servicios', label: 'Servicios', href: '/servicios' }, { id: 'sobre-nosotros', label: 'Sobre Nosotros', href: '/nosotros' }, ]; return (
Contáctanos para iniciar tu proyecto
); } /* ---------- MOSAICO DE FONDO DEL HERO (frames que cambian como TV) ---------- */ function MosaicTile({ src }) { // mantiene la imagen vieja debajo y funde la nueva encima (cambio tipo "canal") const [stack, setStack] = React.useState([{ key: 0, src }]); const keyRef = React.useRef(0); React.useEffect(() => { if (!src || stack[stack.length - 1].src === src) return; keyRef.current += 1; const next = { key: keyRef.current, src }; setStack(s => [...s, next].slice(-2)); const t = setTimeout(() => setStack([next]), 800); // limpia la capa vieja tras el fundido return () => clearTimeout(t); }, [src]); return stack.map((layer, i) => ( )); } function HeroMosaic({ tiles = 24, swapEvery = 420 }) { // todos los frames de todos los proyectos, en una sola lista const all = React.useMemo( () => (window.GM_PROJECTS || []).flatMap(p => p.frames), [] ); // rejilla inicial SIN imágenes repetidas (baraja y toma las primeras `tiles`) const initGrid = React.useCallback(() => { const pool = all.slice(); for (let i = pool.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [pool[i], pool[j]] = [pool[j], pool[i]]; } return pool.slice(0, Math.min(tiles, pool.length)); }, [all, tiles]); const [grid, setGrid] = React.useState(() => (all.length ? initGrid() : [])); React.useEffect(() => { // necesitamos más imágenes que celdas para mantener todo distinto if (all.length <= tiles) return; const id = setInterval(() => { setGrid(g => { const used = new Set(g); // candidatas = imágenes que NO están ya en la rejilla (evita repetidos) const candidates = all.filter(s => !used.has(s)); if (!candidates.length) return g; const n = g.slice(); const i = Math.floor(Math.random() * n.length); n[i] = candidates[Math.floor(Math.random() * candidates.length)]; return n; // siempre quedan 24 imágenes únicas -> nunca dos iguales, ni juntas }); }, swapEvery); return () => clearInterval(id); }, [all, tiles, swapEvery]); if (!grid.length) return ; return ( ); } /* ---------- HERO ---------- */ function Hero() { return (

Productora creativa impulsada por IA, piloteada por humanos.

Productora de nueva generación, totalmente impulsada por inteligencia artificial y ejecutada por manos humanas. Unimos visión cinematográfica e IA para crear piezas que cuentan historias.

); } function TickerContent() { const items = [ 'PRODUCCIÓN CINEMATOGRÁFICA', 'CONTENIDO VERTICAL', 'EXPERIENCIAS INTERACTIVAS', 'BRANDING', 'DIRECCIÓN CREATIVA', ]; return ( <> {items.map((s, i) => ( {s} ✦ ))} ); } /* ---------- PROYECTOS ---------- */ function Proyectos() { const [open, setOpen] = React.useState(null); // Destacados desde data.jsx; se empacan por ancho (span) en filas de 12 columnas, // así un span-12 (p. ej. La Perrona) ocupa su propia fila y el resto se empareja. const featured = (window.GM_FEATURED || []); const spanOf = (p) => parseInt((p.span || 'span-6').replace('span-', ''), 10) || 6; const rows = []; let row = [], used = 0; featured.forEach((p) => { const w = spanOf(p); if (used + w > 12) { rows.push(row); row = []; used = 0; } row.push(p); used += w; }); if (row.length) rows.push(row); return (

Nuestro
trabajo.

Una muestra de proyectos donde dirección, ejecución y narrativa se encuentran. Cada pieza es desarrollada como un objeto en sí mismo, algo que aguante el paso del tiempo y conecte hoy.
{rows.map((row, ri) => (
{row.map((p, i) => (
setOpen(p)} >
{p.detail === 'rec' && } {p.detail === 'tc' &&
{p.tc}
}
{p.year}

{p.title}

{p.synopsis}

{p.year} · {p.genre}
))}
))}
setOpen(null)} />
); } /* ---------- ENLACE DE CORREO (cross-platform) ---------- Abre el proveedor de correo predeterminado (mailto) en cualquier sistema. Además copia la dirección al portapapeles como respaldo para equipos (p. ej. Windows) que no tengan un cliente de correo configurado. */ const GM_EMAIL = 'david@gallosmedia.com'; function MailLink() { const [copied, setCopied] = React.useState(false); const onClick = () => { try { if (navigator.clipboard) { navigator.clipboard.writeText(GM_EMAIL).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2400); }).catch(() => {}); } } catch (e) { /* sin portapapeles: el mailto sigue funcionando */ } // No prevenimos el default: el navegador abre el correo predeterminado. }; return ( {copied ? '✓ Correo copiado' : 'Escríbenos'} {GM_EMAIL} ); } function ContactDirect({ center = false }) { return (
Llámanos +52 664 696 1560
); } /* ---------- CONTACTO ---------- */ function Contacto() { return (
— EMPECEMOS

¿Tienes un proyecto?

Escríbenos. Respondemos en menos de 24 horas.

); } /* ---------- FONDO DE HUMO / VAPOR / POLVO INTERACTIVO ---------- Bocanadas suaves (sprites pre-renderizados) que suben como vapor, se mueven en remolino y son revueltas por el cursor. Composición 'lighter' para que el humo se acumule y sea visible. Respeta prefers-reduced-motion. */ function makePuff(tint) { // sprite radial suave, pre-teñido (más rápido que crear gradientes por frame) const s = document.createElement('canvas'); s.width = s.height = 128; const c = s.getContext('2d'); const g = c.createRadialGradient(64, 64, 0, 64, 64, 64); g.addColorStop(0, `rgba(${tint},0.95)`); g.addColorStop(0.35, `rgba(${tint},0.45)`); g.addColorStop(1, `rgba(${tint},0)`); c.fillStyle = g; c.beginPath(); c.arc(64, 64, 64, 0, Math.PI * 2); c.fill(); return s; } function DustField() { const ref = React.useRef(null); React.useEffect(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let w = 0, h = 0, dpr = 1, parts = [], raf = 0, t = 0; const mouse = { x: -9999, y: -9999, on: false }; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // dos texturas: humo cálido (polvo de tierra) y brasa roja (marca) const sprSmoke = makePuff('190,178,165'); const sprRed = makePuff('224,46,32'); const make = () => ({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random() - 0.5) * 0.25, vy: (Math.random() - 0.5) * 0.25, r: Math.random() * 70 + 36, // radio de la bocanada a: Math.random() * 0.16 + 0.05, // opacidad base red: Math.random() < 0.16, // algunas brasas rojas seed: Math.random() * 1000, }); const resize = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); w = canvas.clientWidth; h = canvas.clientHeight; canvas.width = Math.max(1, w * dpr); canvas.height = Math.max(1, h * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const count = Math.min(90, Math.max(28, Math.floor(w * h * 0.00006))); parts = Array.from({ length: count }, make); }; const draw = () => { t += 0.0045; ctx.clearRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter'; for (const p of parts) { // flujo orgánico (remolino tipo humo) p.vx += Math.sin(p.y * 0.006 + t + p.seed) * 0.02; p.vy += Math.cos(p.x * 0.006 + t + p.seed) * 0.02; p.vy -= 0.006; // ligera subida (vapor) // interacción con el cursor: empuje + giro perpendicular if (mouse.on) { const dx = p.x - mouse.x, dy = p.y - mouse.y; const d2 = dx * dx + dy * dy; const R = 230; if (d2 < R * R) { const d = Math.sqrt(d2) || 1; const f = (1 - d / R) * 1.6; p.vx += (dx / d) * f - (dy / d) * f * 0.5; p.vy += (dy / d) * f + (dx / d) * f * 0.5; } } p.x += p.vx; p.y += p.vy; p.vx *= 0.93; p.vy *= 0.93; // reaparece por el lado opuesto const m = p.r; if (p.x < -m) p.x = w + m; else if (p.x > w + m) p.x = -m; if (p.y < -m) p.y = h + m; else if (p.y > h + m) p.y = -m; ctx.globalAlpha = p.a; const spr = p.red ? sprRed : sprSmoke; ctx.drawImage(spr, p.x - p.r, p.y - p.r, p.r * 2, p.r * 2); } ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; raf = requestAnimationFrame(draw); }; const onMove = (e) => { const r = canvas.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top; mouse.on = e.clientY >= r.top && e.clientY <= r.bottom; }; const onLeave = () => { mouse.on = false; }; resize(); window.addEventListener('resize', resize); window.addEventListener('mousemove', onMove); window.addEventListener('blur', onLeave); if (reduce) { draw(); cancelAnimationFrame(raf); } else { draw(); } return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMove); window.removeEventListener('blur', onLeave); }; }, []); return