/* global React */
/*
Shared site sections — Navbar, animated Hero (V2 baseline), DualPain, ProductShowcase, FinalCTA, Footer.
Reuses primitives from hero-styles.css + animations from site-styles.css.
*/
const { useState, useEffect, useRef } = React;
/* ---------- Hooks ---------- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.15 }
);
el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
return () => io.disconnect();
}, []);
return ref;
}
function useCountUp(target, { duration = 1400, startWhenVisible = true } = {}) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
if (!startWhenVisible) return runAnim();
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
runAnim();
io.unobserve(e.target);
}
});
},
{ threshold: 0.4 }
);
io.observe(el);
return () => io.disconnect();
function runAnim() {
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(Math.round(target * eased));
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, [target, duration, startWhenVisible]);
return [val, ref];
}
/* ---------- Navbar ---------- */
function useIsMobile(bp = 860) {
// Trata como "mobile" telas estreitas E celular deitado (paisagem baixa):
// assim um celular na horizontal (largura > 860 mas altura <= 500) usa a
// coluna única compacta em vez do layout desktop com mockup gigante.
const calc = () =>
window.innerWidth <= bp ||
(window.innerWidth > window.innerHeight && window.innerHeight <= 500);
const [m, setM] = useState(typeof window !== "undefined" ? calc() : false);
useEffect(() => {
const onResize = () => setM(calc());
onResize();
window.addEventListener("resize", onResize);
window.addEventListener("orientationchange", onResize);
return () => {
window.removeEventListener("resize", onResize);
window.removeEventListener("orientationchange", onResize);
};
}, [bp]);
return m;
}
/* Links do menu — alinhados às seções REAIS do site */
const NAV_LINKS = [
{ label: "Home", href: "#topo" },
{ label: "Solução", href: "#fluxo" },
{ label: "Produto", href: "#produto" },
{ label: "Metodologia", href: "#metodologia" },
{ label: "Equipe", href: "#equipe" },
{ label: "Planos", href: "#planos" },
];
function SiteNavbar({ variant = "v1" }) {
const isMobile = useIsMobile();
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
{!isMobile && (
)}
{!isMobile ? (
Falar com a Lomiens
) : (
)}
{isMobile && open && (
{NAV_LINKS.map((l) => (
setOpen(false)}
style={{
padding: "13px 8px",
color: "rgba(255,255,255,0.85)",
textDecoration: "none",
fontSize: 12,
fontWeight: 800,
letterSpacing: "0.18em",
textTransform: "uppercase",
borderRadius: 8,
}}
>
{l.label}
))}
setOpen(false)}
className="lh-btn-primary"
style={{ marginTop: 10, width: "100%", textDecoration: "none" }}
>
Falar com a Lomiens
{/* LEFT */}
Inteligência operacional para hotelaria
Pedidos se perdem. A recepção lota. Falta mão de obra.
A LOMIENS organiza tudo num só fluxo.
Concierge digital via QR Code, painel único para a equipe e dashboard com IA.{" "}
Sem instalar nada.
{/* RIGHT — composição animada */}
{!isMobile && (
{/* Glow */}
{/* Browser mockup back */}
app.lomiens.com/quarto-412
{/* QR Code */}
{/* Phone front */}
)}
{/* Stats strip */}
);
}
function HeroStatsStrip({ variant }) {
const isMobile = useIsMobile();
const stats = [
{ value: 88, suffix: "%", label: "tiveram problemas com pedidos em hotéis" },
{ value: 69, suffix: "%", label: "evitam ligar pra pedir room service" },
{ value: 96, suffix: "%", label: "querem agendar spa e jantar pelo app" },
{ value: 76, suffix: "%", label: "preferem WebApp via QR Code" },
];
return (
O que os hóspedes já mostram
{stats.map((s, i) => )}
);
}
function StatCard({ value, suffix, label }) {
const [v, ref] = useCountUp(value);
return (
);
}
/* QR svg */
function QrSvg() {
return (
);
}
Object.assign(window, {
SiteNavbar, SiteHero, useReveal, useCountUp, StatCard, useIsMobile,
});
