"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import StrategySection from "../strategy/StrategySection"; export default function Workflow3() { const [activeSlide, setActiveSlide] = useState(0); const [paused, setPaused] = useState(false); const [inView, setInView] = useState(false); const cardRef = useRef(null); const slides = [ { title: "STRATEGY", text: "Our grading engine continuously evaluates fulfillment performance, SLA compliance, and route efficiency before every dispatch. By comparing legacy routing methods with unified optimization, the system ensures smarter and more reliable delivery planning. This helps businesses maintain operational consistency while improving overall delivery performance." }, { title: "STRATEGY", text: "Every EV route is pre-validated against real battery capacity and charging feasibility before a rider leaves the hub. This reduces the risk of delivery interruptions, charging failures, or delayed orders during operations. The platform ensures reliable route execution while maximizing EV fleet efficiency and rider confidence." }, { title: "STRATEGY", text: "The system provides actionable fleet insights and optimized workload distribution to improve both rider experience and operational productivity. Balanced route allocation helps reduce rider fatigue, improve retention, and maintain consistent delivery quality across zones. Managers gain better visibility into fleet performance, enabling faster and more informed decision-making." } ]; // Always begin on slide 1 (01/03) on mount. Scrolling away and back does NOT reset // (the component stays mounted) — only a fresh page load / route change back to // MileTruth re-mounts and restarts at slide 1. useEffect(() => { setActiveSlide(0); }, []); // Autoplay is gated on visibility: it starts only once the slider card scrolls into // view (not on page load) and stops when it leaves — without touching activeSlide, // so returning to the section resumes from wherever it was, never snapping to slide 1. useEffect(() => { const el = cardRef.current; if (!el) return; const io = new IntersectionObserver( ([entry]) => setInView(entry.isIntersecting), { threshold: 0.35 } ); io.observe(el); return () => io.disconnect(); }, []); // Auto-advance every 10s, looping — but only while the card is in view and the user // isn't hovering it. Keyed on activeSlide so a manual jump restarts the 10s dwell. useEffect(() => { if (!inView || paused) return; const id = setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); }, 10000); return () => clearTimeout(id); }, [activeSlide, inView, paused, slides.length]); return (

{/* ── Top sub-section: the full "Happier Riders. Higher Fulfillment." 3D scroll-storytelling experience ── */} {/* ── Bottom sub-section: Strategy content, flush + pulled up to butt against the 3D card's flat bottom so the whole workflow reads as one container — the same connected structure used in Workflow 1 & 2 ── */}

setPaused(true)} onMouseLeave={() => setPaused(false)}> {/* Left Column: Overlapping Chevron Graphic */}

{slides[activeSlide].title}