// app.jsx — Home page composition. // Loads after copy.js, tweaks-panel.jsx, sections.jsx. // Uses TWEAK_DEFAULTS marker block (host rewrites this on disk). const { useState, useEffect, useRef, useMemo, useCallback } = React; // EDITMODE block — host parses this JSON, rewrites on tweak. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "lang": "es", "palette": "fog", "typePair": "neue-montreal", "heroVariant": 0, "workLayout": 1, "bioPhoto": "stagger" } /*EDITMODE-END*/; // ── Palette presets — off-white organic backgrounds ───────────────────── const PALETTES = { paper: { label: "Papel", "--c-bg": "#F8F6F1", "--c-bg-soft": "#F2EFE8", "--c-paper": "#EAE6DC", "--c-rule": "#D6D0C2", "--c-mute": "#A39C90", "--c-text-soft": "#807870", "--c-text": "#12110D", "--c-text-deep": "#1F1D1A" }, porcelain: { label: "Porcelana", "--c-bg": "#FAF8F4", "--c-bg-soft": "#F4F1EB", "--c-paper": "#ECE7DC", "--c-rule": "#D9D2C2", "--c-mute": "#A19A8E", "--c-text-soft": "#6E665C", "--c-text": "#12110D", "--c-text-deep": "#1A1815" }, chalk: { label: "Tiza", "--c-bg": "#F6F4EE", "--c-bg-soft": "#EFEBE2", "--c-paper": "#E4DFD2", "--c-rule": "#CFC8B8", "--c-mute": "#9D958A", "--c-text-soft": "#5E574F", "--c-text": "#12110D", "--c-text-deep": "#17150F" }, fog: { label: "Niebla", "--c-bg": "#FDFDFC", "--c-bg-soft": "#F4F4F2", "--c-paper": "#EAEAE7", "--c-rule": "#D6D5D0", "--c-mute": "#9C9A93", "--c-text-soft": "#6A6862", "--c-text": "#12110D", "--c-text-deep": "#12110D" }, pure: { label: "Blanco puro", "--c-bg": "#FFFFFF", "--c-bg-soft": "#F7F7F5", "--c-paper": "#EDEDEA", "--c-rule": "#D8D8D4", "--c-mute": "#A0A09C", "--c-text-soft": "#5C5C56", "--c-text": "#12110D", "--c-text-deep": "#0E0E0C" }, ash: { label: "Ceniza · F0", "--c-bg": "#F0F0F0", "--c-bg-soft": "#E8E8E8", "--c-paper": "#DEDEDE", "--c-rule": "#CACACA", "--c-mute": "#999999", "--c-text-soft": "#5A5A5A", "--c-text": "#12110D", "--c-text-deep": "#0F0F0F" } }; // Sans-serif protagonist: pure-sans pairings. The "display" var is also a sans; // italic accent comes from the sans family's own italic, not from a serif. const TYPE_PAIRS = { "inter": { label: "Inter", "--f-display": '"Inter", -apple-system, system-ui, sans-serif', "--f-sans": '"Inter", -apple-system, system-ui, sans-serif' }, "manrope": { label: "Manrope", "--f-display": '"Manrope", -apple-system, system-ui, sans-serif', "--f-sans": '"Manrope", -apple-system, system-ui, sans-serif' }, "neue-montreal": { label: "Neue Montreal", // PP Neue Montreal is licensed (Pangram Pangram). Geist is the closest open // substitute in the same humanist-grotesk lineage; we keep the label for // brief intent and stack PP Neue Montreal first if a user has it installed. "--f-display": '"PP Neue Montreal", "Geist", "Inter", -apple-system, system-ui, sans-serif', "--f-sans": '"PP Neue Montreal", "Geist", "Inter", -apple-system, system-ui, sans-serif' } }; // ── Dot cursor (hover-capable devices only) ───────────────────────────── function DotCursor() { const dotRef = useRef(null); useEffect(() => { const supportsHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches; if (!supportsHover) return; const dot = dotRef.current; if (!dot) return; let raf = 0; let tx = -100,ty = -100,x = -100,y = -100; const onMove = (e) => { tx = e.clientX;ty = e.clientY; if (!raf) raf = requestAnimationFrame(loop); }; const loop = () => { x += (tx - x) * 0.45; y += (ty - y) * 0.45; dot.style.transform = `translate(${x}px, ${y}px) translate(-50%,-50%)`; if (Math.abs(tx - x) > 0.1 || Math.abs(ty - y) > 0.1) { raf = requestAnimationFrame(loop); } else {raf = 0;} }; const onOver = (e) => { const t = e.target; if (t.closest("a, button, [role='button'], input, textarea, .interactive")) { dot.classList.add("hover"); } else { dot.classList.remove("hover"); } // Invert the cursor over dark surfaces if (t.closest(".on-dark, .omenu-panel.is-open, .footer, .fab-contact")) { dot.classList.add("on-dark"); } else { dot.classList.remove("on-dark"); } }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseover", onOver); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseover", onOver); if (raf) cancelAnimationFrame(raf); }; }, []); return
; } // ── Reveal-on-scroll hook ────────────────────────────────────────────── // Note: we tried IntersectionObserver but it doesn't fire in some preview // environments. Falls back to a scroll listener with getBoundingClientRect. function useReveal() { useEffect(() => { let pending = new Set(document.querySelectorAll(".reveal, .reveal-stagger")); const reveal = () => { const vh = window.innerHeight; const entering = []; pending.forEach((el) => { const r = el.getBoundingClientRect(); if (r.top < vh * 0.9 && r.bottom > 0) { entering.push({ el, top: r.top }); pending.delete(el); } }); // Sort top-to-bottom so elements higher on screen always reveal first entering.sort((a, b) => a.top - b.top); entering.forEach(({ el }, i) => { if (i === 0) { el.classList.add("in"); } else { setTimeout(() => el.classList.add("in"), i * 60); } }); if (pending.size === 0) { window.removeEventListener("scroll", reveal); window.removeEventListener("resize", reveal); } }; // Run on next frame so layout is settled const raf = requestAnimationFrame(reveal); window.addEventListener("scroll", reveal, { passive: true }); window.addEventListener("resize", reveal); return () => { cancelAnimationFrame(raf); window.removeEventListener("scroll", reveal); window.removeEventListener("resize", reveal); }; }, []); } // Always start at top on load/refresh history.scrollRestoration = "manual"; window.scrollTo(0, 0); // ── Top bar / nav ────────────────────────────────────────────────────── function TopBar({ lang, onLang, copy, pageKind }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); const wrapRef = React.useRef(null); const wasOpenedRef = React.useRef(false); if (open) wasOpenedRef.current = true; React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 80); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Close on outside click / Esc React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [open]); const Grid = (