/* ===================================================================== VILLAVERDE · Componentes compartidos (iconos, rail, guión dock) ===================================================================== */ const { useState, useEffect, useRef, useMemo } = React; /* ---------------- ICONOS (stroke, line) ---------------- */ function Icon({ name, size = 20, stroke = 2, style, className }) { const P = { fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { chevron: , left: , right: , check: , plus: , diamond: , soup: , plate: , cake: , robot: , camera: , co2: , flower: , arch: , bubble: , jump: , mic: , dance: , mask: , film: , star: , users: , car: , shield: , badge: , play: , clock: , pin: , gift: , church: , calendar: , sparkle: , target: , chat: , drink: , leaf: , heart: , money: , }; return ( ); } function Stars({ n = 5, size = 16 }) { return ( {Array.from({ length: n }).map((_, i) => ( ))} ); } /* ---------------- RAIL (navegación cronológica) ---------------- */ function Rail({ steps, current, visited, onGo }) { return ( ); } /* ---------------- GUIÓN DEL ASESOR (dock) ---------------- */ function GuionDock({ stepId, stepTitle, open, onToggle }) { const g = VV.GUION[stepId]; if (!g) return null; return (
Solo asesor {!open && } Guión · {stepTitle}
{open ? 'Ocultar' : 'Ver argumentos de venta'}

Objetivo de este paso

{g.obj}

Qué decir

{g.say}

Tips clave

    {g.tips.map((t, i) =>
  • {t}
    • )}

Maneja objeciones

{g.obj_handling.map((o, i) => (
{o.q}
{o.a}
))}
); } /* ---------------- LIGHTBOX (ampliar + zoom de fotos) ---------------- */ function Lightbox() { const [src, setSrc] = useState(null); const [scale, setScale] = useState(1); const [pos, setPos] = useState({ x: 0, y: 0 }); const drag = useRef(null); const moved = useRef(false); const [nat, setNat] = useState(null); useEffect(() => { function onClick(e) { const path = e.composedPath ? e.composedPath() : []; const slot = path.find(n => n && n.tagName && n.tagName.toLowerCase() === 'image-slot'); if (slot && slot.shadowRoot) { const t = e.target; if (t && t.getAttribute && t.getAttribute('data-act')) return; const img = slot.shadowRoot.querySelector('.frame img'); if (img && img.getAttribute('src') && getComputedStyle(img).display !== 'none') { e.preventDefault(); e.stopPropagation(); setSrc(img.src); } return; } const z = e.target.closest && e.target.closest('.vv-zoomable'); if (z) { const img = z.tagName === 'IMG' ? z : z.querySelector('img'); if (img && img.src) { e.preventDefault(); setSrc(img.src); } } } document.addEventListener('click', onClick, true); return () => document.removeEventListener('click', onClick, true); }, []); useEffect(() => { function onKey(e) { if (e.key === 'Escape') setSrc(null); if (e.key === '+' || e.key === '=') setScale(s => Math.min(6, s + 0.4)); if (e.key === '-') setScale(s => Math.max(1, s - 0.4)); } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); useEffect(() => { setScale(1); setPos({ x: 0, y: 0 }); setNat(null); }, [src]); useEffect(() => { if (scale === 1) setPos({ x: 0, y: 0 }); }, [scale]); if (!src) return null; const onWheel = (e) => { e.preventDefault(); setScale(s => Math.min(6, Math.max(1, +(s + (e.deltaY > 0 ? -0.3 : 0.3)).toFixed(2)))); }; const onPointerDown = (e) => { if (scale <= 1) return; moved.current = false; drag.current = { x: e.clientX, y: e.clientY, ox: pos.x, oy: pos.y }; }; const onPointerMove = (e) => { if (!drag.current) return; const dx = e.clientX - drag.current.x, dy = e.clientY - drag.current.y; if (Math.abs(dx) + Math.abs(dy) > 4) moved.current = true; setPos({ x: drag.current.ox + dx, y: drag.current.oy + dy }); }; const onPointerUp = () => { drag.current = null; }; const onBackdrop = () => { if (!moved.current) setSrc(null); }; const toggleZoom = (e) => { e.stopPropagation(); setScale(s => (s > 1 ? 1 : 2.4)); }; return (
1 ? (drag.current ? 'grabbing' : 'grab') : 'zoom-in', maxWidth: nat ? `min(95vw, ${nat.w}px)` : '95vw', maxHeight: nat ? `min(88vh, ${nat.h}px)` : '88vh', }} onLoad={(e) => setNat({ w: e.target.naturalWidth, h: e.target.naturalHeight })} onClick={(e) => e.stopPropagation()} onDoubleClick={toggleZoom} onPointerDown={onPointerDown} draggable="false" />
e.stopPropagation()}> {Math.round(scale * 100)}%
); } /* ---------------- PHOTO SLOT (foto reemplazable con botones) ---------------- */ function PhotoSlot({ id, src, shape = 'rect', radius, placeholder = 'Arrastra una foto', overlay, className, style }) { const ref = useRef(null); const act = (sel) => (e) => { e.stopPropagation(); const s = ref.current; const el = s && s.shadowRoot && s.shadowRoot.querySelector(sel); if (el) el.click(); }; const props = { ref, id, shape, placeholder, style: { width: '100%', height: '100%', display: 'block' } }; if (src) props.src = src; if (radius != null) props.radius = radius; return (
{React.createElement('image-slot', props)} {overlay}
e.stopPropagation()}>
); } Object.assign(window, { Icon, Stars, Rail, GuionDock, Lightbox, PhotoSlot });