/* global React, useState, useEffect, useRef, cn, Icons, Button, Logo, Badge, useLandingT, Reveal, Eyebrow, SectionHead, BrowserChrome, DemoShell, FeatureRow, FeatureTrail, useCountUp, useInViewOnce, LiveCalendarDemo, MatrixDnD, TaskCompleteDemo, HabitTrackerDemo, PomodoroDemo, EnergyDemo, AISuggestionDemo, StatsDemo, ColorCustomizerDemo, ResourcesDemo, LP_ACCENTS, KanbanDemo, FocusProDemo, MusicWidget, CalendarProDemo, SpacesDemo, RulesDemo, HealthSleepDemo, GoalsProDemo, DailyPlanningDemo, ReviewsGrid, window */ /* Derive a darker "solid fill" lightness from an HSL triple (keeps AA on white text). */ function lpDeriveSolid(triple, dl) { const m = String(triple).match(/([\d.]+)\s+([\d.]+)%\s+([\d.]+)%/); if (!m) return triple; return `${m[1]} ${m[2]}% ${Math.max(0, +m[3] - dl)}%`; } /* ---------- Stat band (count-up) ---------- */ function StatItem({ v, suffix, t, d, seen, i }) { const n = useCountUp(v, seen, 1300 + i * 150); return (

{Math.round(n)}{suffix}

{t}

{d}

); } function StatBand({ t }) { const s = t.stats; const [ref, seen] = useInViewOnce(0.4); return (

{s.items.map((it, i) => )}

); } /* Group divider inside the module tour. */ function LpGroup({ label }) { return ( {label} ); } /* ============================================================ LANDING PAGE ============================================================ */ function LandingPage({ setRoute, theme = "dark", setTheme, lang = "en", setLang }) { const t = useLandingT(lang); const [accent, setAccent] = useState("263 70% 60%"); const [scrolled, setScrolled] = useState(false); const [videoOpen, setVideoOpen] = useState(false); const [legal, setLegal] = useState(null); // null | "terms" | "privacy" | "cookies" | "gdpr" const sentinel = useRef(null); const tryRef = useRef(null); const goSignup = () => setRoute("signup"); const goLogin = () => setRoute("login"); // nav glass on scroll (sentinel at very top of the page) useEffect(() => { const el = sentinel.current; if (!el || !("IntersectionObserver" in window)) return; const obs = new IntersectionObserver(([e]) => setScrolled(!e.isIntersecting), { threshold: 0 }); obs.observe(el); return () => obs.disconnect(); }, []); // FAILSAFE — reveals start at opacity:0 and rely on IntersectionObserver. // If IO never fires in this context (some embedded/preview surfaces), the // page would stay blank. After mount, if NOTHING has revealed yet, force // everything visible. When IO works normally, the hero reveals immediately // so this no-ops and on-scroll reveals are preserved. useEffect(() => { const reveal = () => document.querySelectorAll(".lp-reveal:not(.is-visible)").forEach((el) => el.classList.add("is-visible")); const id = setTimeout(() => { if (!document.querySelector(".lp-reveal.is-visible")) reveal(); }, 1000); return () => clearTimeout(id); }, []); const rootStyle = { "--primary": accent, "--ring": accent, "--primary-solid": lpDeriveSolid(accent, 8), "--primary-solid-hover": lpDeriveSolid(accent, 14), }; const toggleTheme = () => setTheme && setTheme(theme === "dark" ? "light" : "dark"); const toggleLang = () => setLang && setLang(lang === "fr" ? "en" : "fr"); return (

{/* ambient mesh */}

{/* ---------------- NAV ---------------- */} {/* ---------------- HERO ---------------- */}

{t.hero.badge}

{t.hero.titleA}
{t.hero.titleB}

{t.hero.sub}

{t.hero.trust}

{/* live product stage */}

{t.hero.liveBadge}

{/* floating module chips */}

12 {t.habits.streak}

{[1,1,1,1,1,0,0].map((v,i)=>())}

DPM AI

{t.ai.suggestion}

3/5

{t.tasks.done}

{/* integrations marquee */}

{t.hero.integrates}

{/* ---------------- STAT BAND ---------------- */}

{t.stats.label}

{/* ---------------- HOW IT WORKS ---------------- */}

{t.how.steps.map((step, i) => (

{step.n}

{[Icons.Sunrise, Icons.Zap, Icons.BarChart][i] && React.createElement([Icons.Sunrise, Icons.Zap, Icons.BarChart][i], { size: 20, className: "text-[hsl(var(--primary))]" })}

{step.t}

{step.d}

))}

{/* ---------------- MODULES (playable) ---------------- */}

{/* Calendar & sharing */} {/* Daily rituals */} {/* Productivity */} {/* Well-being */} {/* Insights & automation */} {/* Make it yours */} setAccent(c || "263 70% 60%")} />

{/* ---------------- AI (feature spotlight band) ---------------- */}

{t.ai.tag}

{t.ai.title}

{t.ai.desc}

{/* ---------------- RESOURCES ---------------- */}

{t.resources.bullets.map((b, i) => ( {b} ))}

{/* ---------------- REVIEWS ---------------- */}

{/* ---------------- SECURITY ---------------- */}

{t.security.tag}

{t.security.title}

{t.security.desc}

{t.security.badges.map((b, i) => {b})}

{t.security.cards.map((c, i) => (

{c.t}

{c.d}

))}

{/* ---------------- PRICING ---------------- */} {/* ---------------- FAQ ---------------- */} {/* ---------------- FINAL CTA ---------------- */}

{t.finalCta.title}

{t.finalCta.sub}

{t.finalCta.reassure}

{/* ---------------- FOOTER ---------------- */} {/* ---------------- OVERLAYS ---------------- */} setVideoOpen(false)} t={t} /> setLegal(null)} onTab={setLegal} t={t} />

); } Object.assign(window, { LandingPage });