/* Wastafy AI app — slim composition: Hero · Problem · WhatWeDo · Proof · Pricing · FAQ · Footer. Sticky TopNav across all sections. */ const { useState, useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "language": "en", "timeOverride": "live", "weatherOverride": "live" }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [dubaiTime, setDubaiTime] = useState(() => getDubaiTime()); const [weather, setWeather] = useState({ condition: "clear", tempC: 32 }); useEffect(() => { const id = setInterval(() => setDubaiTime(getDubaiTime()), 30 * 1000); return () => clearInterval(id); }, []); useEffect(() => { const month = getDubaiMonth(dubaiTime); const hour = getDubaiHour(dubaiTime); const baseTemps = [19, 21, 25, 28, 33, 38, 41, 41, 38, 33, 27, 22]; const tempC = baseTemps[month] + (hour > 13 && hour < 17 ? 4 : hour > 4 && hour < 7 ? -3 : 0); let condition = "clear"; if ((month === 11 || month === 0 || month === 1) && hour < 9) condition = "fog"; else if ((month === 0 || month === 1 || month === 2) && Math.random() > 0.85) condition = "rain"; else if ((month === 2 || month === 3 || month === 4) && Math.random() > 0.9) condition = "sandstorm"; else if (Math.random() > 0.85) condition = "cloudy"; setWeather({ condition, tempC }); }, [getDubaiDate(dubaiTime)]); useEffect(() => { document.documentElement.dataset.theme = tweaks.theme; }, [tweaks.theme]); useEffect(() => { document.documentElement.dataset.lang = tweaks.language; document.documentElement.dir = tweaks.language === "ar" ? "rtl" : "ltr"; }, [tweaks.language]); useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); }); }, { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, [tweaks.language]); /* ====================================================================== SCROLL CHOREOGRAPHY - Lenis: inertia smooth scroll with a long, soft easing curve. lerp = how quickly we catch up to native scroll position. Lower = more inertia. 0.08 feels luxurious, not laggy. - Parallax wordmarks: track scroll position and translate the persistent background type at fractional speeds (-0.18, -0.32) so the foreground slides over a slower-moving graphic plane. - Reduced-motion: bail completely. No Lenis, no parallax — native scroll. ====================================================================== */ useEffect(() => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { document.documentElement.classList.add("no-motion"); return; } if (!window.Lenis) return; const lenis = new window.Lenis({ duration: 0.75, easing: (t) => 1 - Math.pow(1 - t, 3), // easeOutCubic — quicker settle smoothWheel: true, smoothTouch: false, // native touch on mobile wheelMultiplier: 1.25, touchMultiplier: 2, }); // Expose for skipnav + CTA scroll handlers; native scrollIntoView is // intercepted by Lenis, so anchor jumps must go through lenis.scrollTo. window.__lenis = lenis; const wm1 = document.querySelector(".parallax-word"); const wm2 = document.querySelector(".parallax-word-2"); let raf; function loop(t) { lenis.raf(t); const y = lenis.scroll || 0; // Slow the giant wordmark to ~18% of scroll (deep background) if (wm1) wm1.style.setProperty("--py", `${-y * 0.18}px`); // Faster but still sub-1.0 for the secondary italic wordmark (~32%) if (wm2) wm2.style.setProperty("--py2", `${-y * 0.32}px`); raf = requestAnimationFrame(loop); } raf = requestAnimationFrame(loop); return () => { cancelAnimationFrame(raf); lenis.destroy(); if (window.__lenis === lenis) window.__lenis = null; }; }, []); const overrideHour = tweaks.timeOverride === "live" ? null : Number(tweaks.timeOverride); const overrideWeather = tweaks.weatherOverride === "live" ? null : tweaks.weatherOverride; const scrollToCTA = () => { const el = document.getElementById("book"); if (!el) return; if (window.__lenis) { window.__lenis.scrollTo(el, { offset: 0 }); } else { const top = el.getBoundingClientRect().top + window.scrollY; window.scrollTo({ top, behavior: "smooth" }); } }; return ( <> {/* Persistent oversized wordmarks — slow parallax, fixed behind everything */} setTweak("language", v)} onTheme={(v) => setTweak("theme", v)} onCTA={scrollToCTA} /> {/* Card-stacked sections — each section floats on the warm page bg */}