/* global React, ReactDOM,
Header, MenuOverlay, NAV_ITEMS,
Hero, Servicios, Boutique, Galeria, Testimonios,
Gerente, Reservas, Contacto,
TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
"goldShade": "#b8924a"
}/*EDITMODE-END*/;
const GOLD_PRESETS = [
{ label: 'Champagne', value: '#c9a868' },
{ label: 'Bread Way', value: '#b8924a' },
{ label: 'Antique', value: '#9c7a36' },
{ label: 'Bronze', value: '#7a5a28' },
];
function App() {
const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
const [menuOpen, setMenuOpen] = React.useState(false);
const [scrolled, setScrolled] = React.useState(false);
const [current, setCurrent] = React.useState('home');
const pageRef = React.useRef(null);
// Apply gold tweak as CSS var
React.useEffect(() => {
document.documentElement.style.setProperty('--gold', tweaks.goldShade);
}, [tweaks.goldShade]);
// Scroll-reveal: cada sección aparece suavemente al entrar en pantalla
// (incluye 'testimonios', que ya no está en el menú pero sigue en la página)
React.useEffect(() => {
const revealIds = [...NAV_ITEMS.map((n) => n.id), 'testimonios'];
const els = revealIds
.map((id) => pageRef.current?.querySelector('#' + id))
.filter(Boolean);
els.forEach((el, i) => {
el.style.opacity = '0';
el.style.transform = 'translateY(18px)';
el.style.transition = `opacity 0.7s ease ${i === 0 ? 0 : 0.05}s, transform 0.7s ease ${i === 0 ? 0 : 0.05}s`;
});
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
io.unobserve(entry.target);
}
});
},
{ root: pageRef.current, threshold: 0.12 }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
const onNavigate = (id) => {
const el = pageRef.current?.querySelector('#' + id);
if (el && pageRef.current) {
pageRef.current.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
setCurrent(id);
}
};
const onScroll = () => {
const top = pageRef.current?.scrollTop || 0;
setScrolled(top > 8);
// Detect current section
const sections = NAV_ITEMS.map(n => pageRef.current?.querySelector('#' + n.id)).filter(Boolean);
let active = current;
for (const s of sections) {
if (s.offsetTop - 100 <= top) active = s.id;
}
if (active !== current) setCurrent(active);
};
return (
setMenuOpen(true)} scrolled={scrolled} />
onNavigate('reservas')}
onProducts={() => onNavigate('boutique')}
/>
onNavigate('reservas')} />
onNavigate('reservas')} />
setMenuOpen(false)}
onNavigate={onNavigate}
current={current}
/>
{!menuOpen && (
)}
({ label: p.label, value: p.value }))}
onChange={v => setTweak('goldShade', v)}
/>
setTweak('goldShade', v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();