{item.title}

{item.outcome}

); }; const MiniCard = ({ item }) => { const [hover, setHover] = React.useState(false); const inner = (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, padding: '28px 20px', background: 'var(--wi-surface)', borderRadius: 'var(--wi-r-lg)', border: '1px solid var(--wi-border)', boxShadow: hover ? '0 8px 0 0 var(--wi-fg)' : '0 4px 0 0 var(--wi-fg)', transform: hover ? 'translateY(-6px)' : 'translateY(0)', transition: 'transform 360ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease', cursor: item.href ? 'pointer' : 'default', textDecoration: 'none', color: 'inherit', }} > {item.name}

); return item.href ? {inner} : inner; }; const MiniWork = ({ items }) => (

{items.map(it => ( ))}

); const Work = ({ items, miniItems, t }) => (

{t?.workEyebrow || 'Selected work'}

{t ? (<>{t.workHeadline[0]} {t.workHeadline[1]} {t.workHeadline[2]}) : (<>Three favourites. Forty-odd more in the drawer.)}

{items.map((it, i) => ( ))}

{miniItems?.length > 0 && }

); // ------------- CONTACT ------------- // Fisheye dot grid — base contrast pattern that bulges outward and // reddens around the cursor. DOM-mutates dots directly (no React re-render). const FisheyeGrid = () => { const containerRef = React.useRef(null); const dotsRef = React.useRef([]); const [size, setSize] = React.useState({ w: 0, h: 0 }); const SPACING = 30; const RADIUS = 200; React.useEffect(() => { const el = containerRef.current; if (!el) return; const ro = new ResizeObserver(([entry]) => { const r = entry.contentRect; setSize({ w: r.width, h: r.height }); }); ro.observe(el); return () => ro.disconnect(); }, []); const dots = React.useMemo(() => { if (!size.w || !size.h) return []; const cols = Math.ceil(size.w / SPACING) + 1; const rows = Math.ceil(size.h / SPACING) + 1; const offsetX = (size.w - (cols - 1) * SPACING) / 2; const offsetY = (size.h - (rows - 1) * SPACING) / 2; const arr = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { arr.push({ x: offsetX + c * SPACING, y: offsetY + r * SPACING }); } } return arr; }, [size]); React.useEffect(() => { const container = containerRef.current; if (!container || !dots.length) return; const parent = container.parentElement; if (!parent) return; let raf = 0; let pending = null; const reset = () => { const els = dotsRef.current; for (let i = 0; i < dots.length; i++) { const d = dots[i]; const el = els[i]; if (!el) continue; el.setAttribute('cx', d.x); el.setAttribute('cy', d.y); el.setAttribute('r', 1.6); el.style.fill = 'var(--wi-bg)'; el.style.opacity = 0.24; } }; const apply = (mx, my) => { const els = dotsRef.current; for (let i = 0; i < dots.length; i++) { const d = dots[i]; const el = els[i]; if (!el) continue; const dx = d.x - mx; const dy = d.y - my; const dist = Math.hypot(dx, dy); if (dist < RADIUS) { const t = 1 - dist / RADIUS; const ease = t * t; const push = ease * 22; const angle = Math.atan2(dy, dx); el.setAttribute('cx', d.x + Math.cos(angle) * push); el.setAttribute('cy', d.y + Math.sin(angle) * push); el.setAttribute('r', 1.6 + ease * 4.5); el.style.fill = `color-mix(in srgb, var(--wi-red) ${Math.round(ease * 100)}%, var(--wi-bg))`; el.style.opacity = 0.24 + ease * 0.76; } else { el.setAttribute('cx', d.x); el.setAttribute('cy', d.y); el.setAttribute('r', 1.6); el.style.fill = 'var(--wi-bg)'; el.style.opacity = 0.24; } } }; const onMove = (e) => { const rect = container.getBoundingClientRect(); pending = { mx: e.clientX - rect.left, my: e.clientY - rect.top }; if (!raf) { raf = requestAnimationFrame(() => { if (pending) apply(pending.mx, pending.my); raf = 0; }); } }; parent.addEventListener('mousemove', onMove); parent.addEventListener('mouseleave', reset); return () => { parent.removeEventListener('mousemove', onMove); parent.removeEventListener('mouseleave', reset); if (raf) cancelAnimationFrame(raf); }; }, [dots]); return ( ); }; const Contact = ({ t, onContactClick }) => (

{t?.contactEyebrow || "Let's talk"}

{t ? (<>{t.contactHeadline[0]}
{t.contactHeadline[1]} {t.contactHeadline[2]}) : (<>Tell me what you're
building. Seriously.)}

{t?.contactCopy || "Two sentences is plenty. I'll reply within a day with honest thoughts on fit, timeline, and what it'd cost."}

{t?.startProject || 'Start a project'} flashiando@gmail.com

); // ------------- FOOTER ------------- const Footer = ({ t }) => { const year = new Date().getFullYear(); return ( ); }; // ------------- CONTACT PANEL ------------- // TODO: Reemplazar con la URL de tu deploy de Google Apps Script const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzOyeLM3DAgocqCezGaFATk8tnzZf9hM23IKY4mPiaCYij7V1aGiBjjaOWA76_X9A_wJw/exec'; const ContactPanel = ({ open, onClose, t }) => { const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error React.useEffect(() => { if (!open) setStatus('idle'); }, [open]); React.useEffect(() => { const handleEscape = (e) => { if (e.key === 'Escape' && open) onClose(); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [open, onClose]); const handleSubmit = async (e) => { e.preventDefault(); const form = e.target; const data = { name: form.elements['wi-name'].value, email: form.elements['wi-email'].value, message: form.elements['wi-message'].value, }; setStatus('sending'); try { const res = await fetch(APPS_SCRIPT_URL, { method: 'POST', body: JSON.stringify(data), }); const json = await res.json(); if (json.result === 'ok') { setStatus('sent'); } else { setStatus('error'); } } catch { setStatus('error'); } }; return (