update screen fix

src/components/sections/Workflow1.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import OptimizationSection from "../optimization/OptimizationSection";
 
 export default function Workflow1() {
   const [activeSlide, setActiveSlide] = useState(0);
   const [paused, setPaused] = useState(false);
+  const [inView, setInView] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
 
   const slides = [
     {
@@ -23,21 +25,36 @@ export default function Workflow1() {
     }
   ];
 
-  // 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.
+  // 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);
   }, []);
 
-  // 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.
+  // 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(() => {
-    if (paused) return;
+    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);
-    }, 4000);
+    }, 10000);
     return () => clearTimeout(id);
-  }, [activeSlide, paused, slides.length]);
+  }, [activeSlide, inView, paused, slides.length]);
 
   return (
     <section className="dm-wf1" aria-label="Workflow 1 — Impact of Optimisation & Performance">
@@ -47,7 +64,7 @@ export default function Workflow1() {
 
       {/* ── Bottom sub-section: Performance content, flush + colour-matched to the
              optimisation section above so the whole workflow reads as one container ── */}
-      <div className="dm-wf1-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
+      <div className="dm-wf1-card" ref={cardRef} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
         {/* Left Column: Overlapping Chevron Graphic */}
         <div className="dm-workflow-left">
           <svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">