// ============================================================
// CORE — Brand, hooks, primitives, shared components
// ============================================================
const { useState, useEffect, useRef, useMemo } = React;
const BRAND = {
terracota: '#C35731',
marfil: '#F4F1E6',
oliva: '#8D997A',
crema: '#F7FFEB',
gris: '#696F72',
tinta: '#1A1A18',
blanco: '#FFFFFF'
};
const FONT = {
sans: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
mono: "'Chivo Mono', ui-monospace, SFMono-Regular, monospace"
};
// ============================================================
// CONFIG — ⚠️ ÚNICO LUGAR PARA CAMBIAR DATOS REALES
// ============================================================
// 1) web3formsKey: crear gratis en https://web3forms.com (usar el
// correo contacto@hndarquitectura.com al generarla) y pegar aquí.
// 2) whatsappNumber: formato internacional SIN "+", SIN espacios.
// Brief indica 8145931116 -> con lada MX = 528145931116
// (CONFIRMAR con cliente si la lada es 33 u otra).
const CONFIG = {
web3formsKey: '17457e6e-3788-4266-8fa2-4737d392b638',
whatsappNumber: '528145931116',
whatsappMessage: 'Hola, quiero información sobre un proyecto con HND.'
};
// Wordmark SVG (kept from original — Lnd letterform)
const SVG_WORDMARK = ``;
const Logo = ({ height = 48, color = BRAND.marfil }) => {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
ref.current.innerHTML = SVG_WORDMARK;
const svg = ref.current.querySelector('svg');
if (svg) {
svg.style.height = `${height}px`;
svg.style.width = 'auto';
svg.style.color = color;
svg.style.display = 'block';
}
}, [height, color]);
return ;
};
// ============================================================
// IMAGES — file paths to project images
// ============================================================
const IMG = {
portada: 'images/portada.jpg',
// Casa Lomas Altas
lomas1: 'images/lomas-1.jpg', // exterior verde
lomas2: 'images/lomas-2.jpg', // patio blanco
lomas3: 'images/lomas-3.jpg', // cocina interior
// Royal Contry departamento
royal1: 'images/royal-1.jpg', // sala madera con poltrona
royal2: 'images/royal-2.jpeg', // sala panelada
royal3: 'images/royal-3.jpg', // cocina blanca
// Proyecto Polanco CDMX
polanco1: 'images/polanco-1.jpg',
polanco2: 'images/polanco-2.jpg',
polanco3: 'images/polanco-3.jpg',
// Casa Zibata Querétaro
zibata1: 'images/zibata-1.jpg', // exterior noche
zibata2: 'images/zibata-2.jpg', // interior con escalera/comedor
zibata3: 'images/zibata-3.jpg', // exterior vol arbol
zibata4: 'images/zibata-4.jpg' // fachada cielo
};
// Imágenes que el Proceso muestra como pequeñas viñetas (siluetas)
const PROCESO_IMG = {
entender: IMG.zibata4,
disenar: IMG.royal1,
planear: IMG.lomas3,
ejecutar: IMG.zibata2
};
// ============================================================
// HOOKS
// ============================================================
const useScrollY = () => {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handler = () => setScrollY(window.scrollY);
window.addEventListener('scroll', handler, { passive: true });
handler();
return () => window.removeEventListener('scroll', handler);
}, []);
return scrollY;
};
const useInView = (threshold = 0.15) => {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(
([entry]) => entry.isIntersecting && setInView(true),
{ threshold }
);
obs.observe(ref.current);
return () => obs.disconnect();
}, [threshold]);
return [ref, inView];
};
const useIsDesktop = () => {
const [isDesktop, setIsDesktop] = useState(
typeof window !== 'undefined' ? window.innerWidth >= 768 : true
);
useEffect(() => {
const update = () => setIsDesktop(window.innerWidth >= 768);
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
return isDesktop;
};
const useViewportSize = () => {
const [size, setSize] = useState({
w: typeof window !== 'undefined' ? window.innerWidth : 1200,
h: typeof window !== 'undefined' ? window.innerHeight : 800
});
useEffect(() => {
const update = () => setSize({ w: window.innerWidth, h: window.innerHeight });
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
return size;
};
// ============================================================
// SILHOUETTES + TEXTURE
// ============================================================
const SILHOUETTE_POINTS = {
1: '10,80 10,40 50,10 90,40 90,80',
2: '10,80 10,15 35,15 35,50 60,50 60,30 80,30 80,80',
3: '10,80 10,50 35,50 35,30 78,12 78,80',
4: '10,80 10,40 35,20 55,40 55,60 75,60 75,80'
};
const Silhouette = ({ shape = 1, color = BRAND.oliva, width = 80 }) =>
;
const SilhouettePhoto = ({ shape = 1, imgSrc, width = 320 }) => {
const id = useMemo(() => `clip-${shape}-${Math.random().toString(36).slice(2, 8)}`, [shape]);
return (
);
};
const SilhouetteSet = ({ color = BRAND.oliva, scale = 1 }) =>
{[1, 2, 3, 4].map((n) =>
)}
;
const TexturaTecnica = ({ strokeColor = 'rgba(244,241,230,0.1)' }) =>
;
const BrandHeadline = ({ bold, light, size = 'clamp(38px, 5.5vw, 76px)', color = 'inherit', boldColor }) =>
{bold}
{light}
;
const Container = ({ children, style = {}, ...props }) =>
{children}
;
// Expose
Object.assign(window, {
BRAND, FONT, CONFIG, IMG, PROCESO_IMG,
Logo, Silhouette, SilhouettePhoto, SilhouetteSet, TexturaTecnica,
BrandHeadline, Container,
useScrollY, useInView, useIsDesktop, useViewportSize
});