"use client"; import React, { useState, useEffect } 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 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 the storytelling sequence from slide 1 (01/03) on mount — never // preserve a previous slide index across remounts / route changes back to MileTruth. useEffect(() => { setActiveSlide(0); }, []); // Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any // manual selection resets the timer; pauses while the user hovers the card. useEffect(() => { if (paused) return; const id = setTimeout(() => { setActiveSlide((prev) => (prev + 1) % slides.length); }, 4000); return () => clearTimeout(id); }, [activeSlide, 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}