const { useState, useEffect, useRef } = React;
// ─── Style tokens (tipografía movida a CSS: clases .t-h2, .t-h3, .t-body, etc.) ──
const S = {
body: {},
bodyDark: {},
bodyInv: {},
caps: {},
capsGold: {},
h2: {},
h2inv: {},
h3: {},
serif: {},
};
// ─── Utilities ───────────────────────────────────────────────
function useScrollIn(delay = 0) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
el.style.opacity = '0';
el.style.transform = 'translateY(28px)';
el.style.transition = `opacity 0.75s ease ${delay}ms, transform 0.75s ease ${delay}ms`;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
obs.disconnect();
}
}, { threshold: 0.1 });
obs.observe(el);
return () => obs.disconnect();
}, []);
return ref;
}
function ImgPlaceholder({ height = 300, label = 'imagen', style = {}, dark = false }) {
return (
[ {label} ]
);
}
function Label({ children, style = {}, light = false }) {
return (
{children}
);
}
function GoldLine({ style = {} }) {
return ;
}
function BtnPrimary({ children, onClick, href, style = {} }) {
const base = {
display: 'inline-flex', alignItems: 'center', gap: 8,
background: 'var(--gold)', color: '#FAF7F2',
fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
letterSpacing: '0.15em', textTransform: 'uppercase', padding: '15px 32px',
border: 'none', cursor: 'pointer', textDecoration: 'none',
transition: 'opacity 0.2s, transform 0.2s', ...style
};
const handlers = {
onMouseEnter: e => { e.currentTarget.style.opacity = '0.88'; },
onMouseLeave: e => { e.currentTarget.style.opacity = '1'; },
};
if (href) return {children};
return ;
}
function BtnOutline({ children, onClick, style = {}, light = false }) {
return (
);
}
// ─── NavBar ──────────────────────────────────────────────────
function NavBar({ currentPage, setCurrentPage }) {
const [menuOpen, setMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const h = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', h);
return () => window.removeEventListener('scroll', h);
}, []);
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const items = [
{ id: 'treatments', label: 'Tratamientos' },
{ id: 'results', label: 'Resultados' },
{ id: 'about', label: 'Nosotros' },
{ id: 'experience', label: 'Experiencia LANA' },
{ id: 'contact', label: 'Contacto' },
];
const go = (id) => { setCurrentPage(id); setMenuOpen(false); };
const waLink = `https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar una consulta en LANA')}`;
return (
<>
{/* Mobile menu */}
{[{ id: 'home', label: 'Inicio' }, ...items].map(it => (
))}
Reservar consulta
);
}
// ─── Footer ──────────────────────────────────────────────────
function Footer({ setCurrentPage }) {
return (
);
}
// ─── Sticky WhatsApp ──────────────────────────────────────────
function WhatsAppButton() {
return (
{ e.currentTarget.style.transform = 'scale(1.1)'; e.currentTarget.style.boxShadow = '0 6px 28px rgba(37,211,102,0.5)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(37,211,102,0.35)'; }}
>
);
}
// ─── Section wrapper ──────────────────────────────────────────
function Section({ children, style = {} }) {
return (
);
}
Object.assign(window, {
useScrollIn, ImgPlaceholder, Label, GoldLine,
S, BtnPrimary, BtnOutline, NavBar, Footer, WhatsAppButton, Section
});