import { useEffect, useRef, useState } from 'react'; import { LogoSVG } from './AboutSection'; import { cn } from '@/lib/utils'; const features = [ { id: 'ease', title: "Built for ease, not urgency", description: "Drift strips away the noise that makes organizing feel draining. Every surface is made to be soft, quiet, and intuitive so you can move forward, not get stuck decoding.", video: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_102608_5fa1187d-9ac6-44fb-82ab-54376200abc0.mp4" }, { id: 'start', title: "The gentlest way to start", description: "Beginning your day should feel natural, not daunting. Drift eases you into motion with subtle cues and a quiet view of what deserves your energy right now.", video: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260625_174131_395bc785-bb21-4e65-abf6-27c56f0764b6.mp4" }, { id: 'focus', title: "Deep, undivided focus", description: "No interruptions, no clutter. Drift holds you in the present task with a stripped-back layout that softens all else until you are truly ready to shift.", video: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260525_052706_d2e390fd-1846-4fe7-a4d8-8d2f1c875358.mp4" } ]; export default function FeaturesSection() { const [activeId, setActiveId] = useState(features[0].id); const cardRefs = useRef>(new Map()); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActiveId(entry.target.id); entry.target.classList.add('opacity-100', 'translate-x-0'); entry.target.classList.remove('opacity-0', 'translate-x-16'); } }); }, { threshold: 0.6 } ); const revealObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('opacity-100', 'translate-x-0'); entry.target.classList.remove('opacity-0', 'translate-x-16'); } }); }, { threshold: 0.15 } ); features.forEach((f) => { const el = cardRefs.current.get(f.id); if (el) { observer.observe(el); revealObserver.observe(el); } }); return () => { observer.disconnect(); revealObserver.disconnect(); }; }, []); const scrollTo = (id: string) => { const el = cardRefs.current.get(id); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }; return (

{/* Fixed Background */}

{/* Left Column (Sticky) */}

Software that flows with your mind, not over it

{features.map((f) => ( ))}

No noise. No complicated systems. Just your day, gently sorted.

{/* Right Column (Scrolling) */}

{features.map((f) => (

el && cardRefs.current.set(f.id, el)} className="bg-black/20 backdrop-blur-sm rounded-3xl p-6 md:p-10 space-y-8 opacity-0 translate-x-16 transition-all duration-700 ease-out" >

{f.title}

{f.description}

))}

); }