"use client"; import dynamic from "next/dynamic"; import { ArrowRight, Check, ChevronDown, MessageCircle, } from "lucide-react"; import { CSSProperties, useEffect, useMemo, useRef, useState, } from "react"; const LarkShine3DScene = dynamic( () => import("./LarkShine3DScene"), { ssr: false, loading: () => null, }, ); type Chapter = { id: string; eyebrow: string; title: string; body: string; position: "left" | "right" | "center"; }; const chapters: Chapter[] = [ { id: "overview", eyebrow: "Lark Shine", title: "A cleaner space changes everything.", body: "Professional cleaning for homes, offices and properties, delivered with precision and care.", position: "center", }, { id: "equipment", eyebrow: "Professional equipment", title: "Designed for a deeper clean.", body: "Specialist tools help our team work thoroughly across floors, surfaces and difficult-to-reach areas.", position: "left", }, { id: "water-system", eyebrow: "Controlled care", title: "The right method for every surface.", body: "Careful product selection and controlled cleaning methods help protect the materials throughout your property.", position: "right", }, { id: "floor-care", eyebrow: "Floor care", title: "Powerful where it matters. Gentle where it counts.", body: "Focused floor treatment helps lift dirt while preserving the finish and character of each surface.", position: "left", }, { id: "service", eyebrow: "Complete service", title: "One team. Every important detail.", body: "Residential, commercial, deep cleaning, glass care, carpet care and property cleaning through one reliable team.", position: "right", }, { id: "contact", eyebrow: "Book with Lark Shine", title: "Ready to make your space shine?", body: "Tell us what needs attention and we will help arrange the appropriate cleaning service.", position: "center", }, ]; function clamp(value: number) { return Math.min(1, Math.max(0, value)); } function chapterVisibility( progress: number, index: number, total: number, ) { const chapterStart = index / total; const chapterEnd = (index + 1) / total; const fade = 0.035; if ( progress < chapterStart - fade || progress > chapterEnd + fade ) { return 0; } if (progress < chapterStart + fade) { return clamp( (progress - (chapterStart - fade)) / (fade * 2), ); } if (progress > chapterEnd - fade) { return clamp( ((chapterEnd + fade) - progress) / (fade * 2), ); } return 1; } function chapterTransform( progress: number, index: number, total: number, ) { const center = (index + 0.5) / total; const distance = progress - center; return { transform: `translate3d(0, ${distance * -75}px, 0)`, } as CSSProperties; } export default function HeroStory() { const rootRef = useRef(null); const progressRef = useRef(0); const pointerRef = useRef({ x: 0, y: 0 }); const [progress, setProgress] = useState(0); const [ready, setReady] = useState(false); const activeIndex = Math.min( chapters.length - 1, Math.floor(progress * chapters.length), ); const chapterProgress = useMemo( () => Math.min(1, progress * chapters.length - activeIndex), [activeIndex, progress], ); useEffect(() => { let frame = 0; const update = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { const root = rootRef.current; if (!root) return; const rect = root.getBoundingClientRect(); const scrollable = Math.max( root.offsetHeight - window.innerHeight, 1, ); const next = clamp(-rect.top / scrollable); progressRef.current = next; setProgress(next); }); }; const pointerMove = (event: PointerEvent) => { pointerRef.current = { x: (event.clientX / window.innerWidth - 0.5) * 2, y: (event.clientY / window.innerHeight - 0.5) * 2, }; }; update(); window.addEventListener("scroll", update, { passive: true, }); window.addEventListener("resize", update); window.addEventListener("pointermove", pointerMove, { passive: true, }); return () => { cancelAnimationFrame(frame); window.removeEventListener("scroll", update); window.removeEventListener("resize", update); window.removeEventListener("pointermove", pointerMove); }; }, []); return (
); }