update how it works card update

src/components/sections/Workflow2.tsx

@@ -1,63 +1,82 @@
 "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";
 
-/* Red / crimson / orange — matches the Routing Engine (logistics brain) scene. */
+/* Red / Crimson — matches the Routing Engine (logistics brain) scene. */
 const THEME: EVCardsTheme = {
   accent: "#E2354A",
-  accent2: "#F59E0B",
-  glow: "rgba(226,53,74,0.24)",
+  accent2: "#C01227",
+  glow: "rgba(226,53,74,0.2)",
 };
 
 /**
  * Workflow 2 — Innovation (hybrid split-screen).
  *
- * Keeps the premium EVSection chrome but converts the body into a split layout:
- *   • Left  — the PRODUCTION Routing Engine Three.js scene (the same
- *             LogisticsBrainCanvas used by LogisticsBrainSection: city nodes,
- *             buildings, multi-route generation, constraint evaluation,
- *             network/brain animation). One instance, mounted compactly.
- *   • Right — lightweight auto-rotating cards (4s / 600ms fade+slide).
- *
- * Preserves the 3D storytelling while dramatically cutting page height.
+ *   • Left  — the PRODUCTION Routing Engine Three.js scene (city nodes,
+ *             buildings, multi-route generation, constraint evaluation).
+ *   • Right — a COMPACT DASHBOARD: a quick KPI row over short feature cards,
+ *             sitting on the animated network backdrop (red/crimson). Surfaces
+ *             the key metrics fast and keeps the section tight on mobile.
  */
-const SLIDES: EVSlide[] = [
+const METRICS: EVStat[] = [
+  { value: 45, suffix: "ms", label: "Inference" },
+  { value: 12, suffix: "+", label: "Strategies" },
+  { value: 99.9, decimals: 1, suffix: "%", label: "SLA Met" },
+  { value: 24, suffix: "/7", label: "Adaptive" },
+];
+
+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: "Generating Routes",
+    icon: ico(
+      <>
+        <polygon points="12 2 2 7 12 12 22 7 12 2" />
+        <polyline points="2 17 12 22 22 17" />
+        <polyline points="2 12 12 17 22 12" />
+      </>,
+    ),
     title: "Generate Routes",
-    value: 6,
-    suffix: " plans",
-    metricLabel: "Route Plans Generated",
-    kpis: ["Parallel strategies explored", "59 orders in scope", "Real-time combinations"],
-    desc: "The Parallel Universe Engine evaluates many routing strategies at once for every dispatch window, exploring route combinations in real time.",
+    desc: "Many strategies explored per dispatch window.",
   },
   {
-    status: "Constraints Passed",
+    icon: ico(
+      <>
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </>,
+    ),
     title: "Check Constraints",
-    value: 5,
-    metricLabel: "Constraints Evaluated",
-    kpis: ["Battery aware", "Capacity & distance checked", "Powered by Google OR-Tools"],
-    desc: "Battery, distance, capacity and time are first-class inputs — battery-aware simulation solves the EV routing challenge.",
+    desc: "Battery, capacity, distance and time validated.",
   },
   {
-    status: "Scoring Routes",
+    icon: ico(
+      <>
+        <line x1="6" y1="20" x2="6" y2="14" />
+        <line x1="12" y1="20" x2="12" y2="4" />
+        <line x1="18" y1="20" x2="18" y2="10" />
+      </>,
+    ),
     title: "Score & Compare",
-    value: 12,
-    suffix: "+",
-    metricLabel: "Strategies Compared",
-    kpis: ["Ranked by total cost", "SLA protected", "Real-time ETA validation"],
-    desc: "Every plan is benchmarked in parallel and ranked by total cost, with sub-45ms inference at production scale.",
+    desc: "Plans ranked by total cost in parallel.",
   },
   {
-    status: "Delivery Ready",
+    icon: ico(<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />),
     title: "Select Best Plan",
-    value: 45,
-    suffix: "ms",
-    metricLabel: "Decision Latency",
-    kpis: ["Late plans rejected", "Best plan locked in", "Dispatched to the fleet"],
-    desc: "Late plans are rejected automatically and the highest-performing, SLA-first plan is locked in and dispatched.",
+    desc: "SLA-first plan locked in and dispatched.",
   },
 ];
 
@@ -66,13 +85,6 @@ const BADGES: EVBadge[] = [
   { value: "100%", label: "SLA-FIRST" },
 ];
 
-const STATS: EVStat[] = [
-  { value: 45, suffix: "ms", label: "Inference" },
-  { value: 12, suffix: "+", label: "Strategies" },
-  { value: 99.9, decimals: 1, suffix: "%", label: "SLA Met" },
-  { value: 24, suffix: "/7", label: "Adaptive" },
-];
-
 export default function Workflow2() {
   return (
     <EVSection
@@ -84,12 +96,17 @@ export default function Workflow2() {
       eyebrow="/ Innovation /"
       titleLead="MANY STRATEGIES. "
       titleAccent="ONE BEST PLAN."
-      mediaSlot={<WorkflowScene variant="logistics" ariaLabel="Live multi-route logistics brain" />}
-      slides={SLIDES}
+      mediaSlot={
+        <WorkflowScene
+          variant="logistics"
+          ariaLabel="Live multi-route logistics brain"
+        />
+      }
+      metrics={METRICS}
+      features={FEATURES}
       cardsHeading="AI Decision Engine"
       cardsTheme={THEME}
       badges={BADGES}
-      stats={STATS}
     />
   );
 }