update how it works card update

src/components/sections/Workflow1.tsx

@@ -1,66 +1,80 @@
 "use client";
 
 import React from "react";
-import EVSection, { EVStat, EVBadge, EVSlide, EVCardsTheme } from "./EVSection";
+import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection";
 import WorkflowScene from "./WorkflowScene";
 
-/* Cyan / electric-blue — matches the Optimization Engine scene palette. */
+/* Cyan / Teal — matches the Optimization Engine scene palette. */
 const THEME: EVCardsTheme = {
   accent: "#00E5FF",
-  accent2: "#3B82F6",
-  glow: "rgba(0,229,255,0.22)",
+  accent2: "#14B8A6",
+  glow: "rgba(0,229,255,0.18)",
 };
 
 /**
  * Workflow 1 — Performance (hybrid split-screen).
  *
- * Keeps the premium EVSection chrome (banner → floating card → dark section →
- * stat bar) but converts the body into a split layout:
- *   • Left  — the PRODUCTION Optimization Engine Three.js scene (the same
- *             OptimizationCanvas used by OptimizationSection: depot, trucks,
- *             route optimization, shaders, particles). One instance, mounted
- *             compactly instead of as a multi-viewport pinned scroll.
- *   • Right — lightweight auto-rotating cards (4s / 600ms fade+slide).
- *
- * This preserves the 3D storytelling while dramatically cutting page height.
+ *   • Left  — the PRODUCTION Optimization Engine Three.js scene (depot, trucks,
+ *             route optimization, shaders, particles).
+ *   • Right — a COMPACT DASHBOARD: a quick KPI row over short feature cards,
+ *             sitting on the animated network backdrop (cyan/teal). Surfaces the
+ *             key metrics fast, keeps copy short and reads well on mobile.
  */
-const SLIDES: EVSlide[] = [
+const METRICS: EVStat[] = [
+  { value: 42, suffix: "%", label: "Distance Saved" },
+  { value: 28, suffix: "%", label: "Faster Routes" },
+  { value: 31, suffix: "%", label: "Lower Cost" },
+  { value: 99.9, decimals: 1, suffix: "%", label: "On-Time" },
+];
+
+const ico = (path: React.ReactNode) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    {path}
+  </svg>
+);
+
+const FEATURES: EVFeature[] = [
   {
-    status: "Optimization Running",
+    icon: ico(<polygon points="3 11 22 2 13 21 11 13 3 11" />),
     title: "Route Optimization",
-    value: 42,
-    suffix: "%",
-    metricLabel: "Distance Saved",
-    kpis: ["Route optimization active", "37% fewer vehicles required", "SLA compliance 99.9%"],
-    desc: "AI selects the most efficient delivery paths across every zone, cutting unnecessary travel and fuel and battery consumption.",
+    desc: "AI selects the most efficient path across every zone.",
   },
   {
-    status: "Fleet Balancing",
+    icon: ico(
+      <>
+        <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
+        <polyline points="16 17 22 17 22 11" />
+      </>,
+    ),
     title: "Distance Reduction",
-    value: 37,
-    suffix: "%",
-    metricLabel: "Fewer Vehicles",
-    kpis: ["Load balancing engaged", "Same volume, leaner fleet", "Lower maintenance & staffing"],
-    desc: "Intelligent load balancing fulfils the same order volume with a leaner, better-utilised fleet — fewer miles, fewer vehicles.",
+    desc: "Same volume delivered with a leaner, better-used fleet.",
   },
   {
-    status: "Dispatch Active",
+    icon: ico(
+      <>
+        <path d="M12 14l4-4" />
+        <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+      </>,
+    ),
     title: "Fleet Efficiency",
-    value: 31,
-    suffix: "%",
-    metricLabel: "Lower Operating Cost",
-    kpis: ["Higher fleet utilisation", "Predictable operations", "Reduced fuel & overhead"],
-    desc: "Smart grouping and dispatch keep operations smooth and predictable while reducing maintenance and staffing cost.",
+    desc: "Higher utilisation and lower operating cost.",
   },
   {
-    status: "SLA Safe",
+    icon: ico(
+      <>
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        <polyline points="9 12 11 14 15 10" />
+      </>,
+    ),
     title: "SLA Performance",
-    value: 99.9,
-    decimals: 1,
-    suffix: "%",
-    metricLabel: "On-Time Delivery",
-    kpis: ["Real-time route correction", "Consistent delivery windows", "100% order fulfilment"],
-    desc: "Real-time routing keeps deliveries on time across all zones, sustaining high customer satisfaction and SLA performance.",
+    desc: "Real-time correction keeps deliveries on time.",
   },
 ];
 
@@ -69,31 +83,24 @@ const BADGES: EVBadge[] = [
   { value: "-37%", label: "FEWER VEHICLES" },
 ];
 
-const STATS: EVStat[] = [
-  { value: 42, suffix: "%", label: "Distance Saved" },
-  { value: 28, suffix: "%", label: "Faster Routes" },
-  { value: 31, suffix: "%", label: "Lower Cost" },
-  { value: 99.9, decimals: 1, suffix: "%", label: "On-Time" },
-];
-
 export default function Workflow1() {
   return (
     <EVSection
       ariaLabel="Workflow 1 — Performance"
       gapTop
       gapBottom
-      bannerImage="/images/home3-slide-1.jpg"
+      bannerImage="/images/mile-1.png"
       cardTitle="OPTIMIZE EVERY MILE"
       cardSubtitle="Cut travel distance, reduce operating cost, and improve fleet productivity across every route."
       eyebrow="/ Performance /"
       titleLead="SMARTER ROUTES. "
       titleAccent="LOWER COSTS."
       mediaSlot={<WorkflowScene variant="optimization" ariaLabel="Live route optimization engine" />}
-      slides={SLIDES}
+      metrics={METRICS}
+      features={FEATURES}
       cardsHeading="Performance Insight"
       cardsTheme={THEME}
       badges={BADGES}
-      stats={STATS}
     />
   );
 }