/* global React, ReactDOM, Hero, Header, Controls, Services, Types, Why, How, FAQ, Contact, Footer, Ticker, I, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const CONTACT = {
tel: "+34 674 596 301",
telRaw: "+34674596301",
email: "info@comprostock20.es",
waLink: "https://wa.me/34674596301",
};
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "cine",
"accent": ["#2f6bff", "#5b8cff"]
}/*EDITMODE-END*/;
function usePersist(key, init) {
const [val, setVal] = React.useState(() => {
try { const s = localStorage.getItem(key); return s !== null ? s : init; } catch(e){ return init; }
});
React.useEffect(() => { try { localStorage.setItem(key, val); } catch(e){} }, [key, val]);
return [val, setVal];
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLang] = usePersist("cs20_lang", "es");
const [theme, setTheme] = usePersist("cs20_theme", "dark");
const [scrolled, setScrolled] = React.useState(false);
const [menuOpen, setMenuOpen] = React.useState(false);
const tr = (window.I18N[lang] || window.I18N.es);
// theme + lang on
React.useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
}, [theme]);
React.useEffect(() => {
document.documentElement.setAttribute("lang", lang);
document.documentElement.setAttribute("dir", tr.dir || "ltr");
}, [lang, tr.dir]);
// accent
React.useEffect(() => {
const a = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
document.documentElement.style.setProperty("--accent", a[0]);
document.documentElement.style.setProperty("--accent-2", a[1] || a[0]);
const hex = (a[0]||"#2f6bff").replace("#","");
const r=parseInt(hex.slice(0,2),16),g=parseInt(hex.slice(2,4),16),b=parseInt(hex.slice(4,6),16);
document.documentElement.style.setProperty("--accent-soft", `rgba(${r},${g},${b},.14)`);
}, [t.accent]);
// scrolled header
React.useEffect(() => {
const h = () => setScrolled(window.scrollY > 24);
h(); window.addEventListener("scroll", h, { passive:true });
return () => window.removeEventListener("scroll", h);
}, []);
// lock body scroll when menu open
React.useEffect(() => {
document.body.style.overflow = menuOpen ? "hidden" : "";
}, [menuOpen]);
// scroll reveal (re-run on lang/variant change)
React.useEffect(() => {
const els = document.querySelectorAll(".reveal:not(.in)");
const io = new IntersectionObserver((ents) => {
ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, [lang, t.heroVariant]);
const go = (e, href) => {
e.preventDefault();
setMenuOpen(false);
const el = document.querySelector(href);
if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
};
return (
<>
setTweak("heroVariant", v)} />
setTweak("accent", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();