"use client";

import React from "react";
import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection";
import WorkflowScene from "./WorkflowScene";

/* Red / Crimson — matches the Routing Engine (logistics brain) scene. */
const THEME: EVCardsTheme = {
  accent: "#E2354A",
  accent2: "#C01227",
  glow: "rgba(226,53,74,0.2)",
};

/**
 * Workflow 2 — Innovation (hybrid split-screen).
 *
 *   • 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 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[] = [
  {
    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",
    desc: "Many strategies explored per dispatch window.",
  },
  {
    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",
    desc: "Battery, capacity, distance and time validated.",
  },
  {
    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",
    desc: "Plans ranked by total cost in parallel.",
  },
  {
    icon: ico(<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />),
    title: "Select Best Plan",
    desc: "SLA-first plan locked in and dispatched.",
  },
];

const BADGES: EVBadge[] = [
  { value: "45ms", label: "INFERENCE" },
  { value: "100%", label: "SLA-FIRST" },
];

export default function Workflow2() {
  return (
    <EVSection
      ariaLabel="Workflow 2 — Innovation"
      gapBottom
      bannerImage="/images/mid-mile-approach.jpg"
      cardTitle="CHOOSE THE BEST PLAN"
      cardSubtitle="Analyze thousands of route possibilities and automatically select the most efficient delivery strategy."
      eyebrow="/ Innovation /"
      titleLead="MANY STRATEGIES. "
      titleAccent="ONE BEST PLAN."
      mediaSlot={
        <WorkflowScene
          variant="logistics"
          ariaLabel="Live multi-route logistics brain"
        />
      }
      metrics={METRICS}
      features={FEATURES}
      cardsHeading="AI Decision Engine"
      cardsTheme={THEME}
      badges={BADGES}
    />
  );
}