"use client";

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

/* Cyan / Teal — matches the Optimization Engine scene palette. */
const THEME: EVCardsTheme = {
  accent: "#00E5FF",
  accent2: "#14B8A6",
  glow: "rgba(0,229,255,0.18)",
};

/**
 * Workflow 1 — Performance (hybrid split-screen).
 *
 *   • 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 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[] = [
  {
    icon: ico(<polygon points="3 11 22 2 13 21 11 13 3 11" />),
    title: "Route Optimization",
    desc: "AI selects the most efficient path across every zone.",
  },
  {
    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",
    desc: "Same volume delivered with a leaner, better-used fleet.",
  },
  {
    icon: ico(
      <>
        <path d="M12 14l4-4" />
        <path d="M3.34 19a10 10 0 1 1 17.32 0" />
      </>,
    ),
    title: "Fleet Efficiency",
    desc: "Higher utilisation and lower operating cost.",
  },
  {
    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",
    desc: "Real-time correction keeps deliveries on time.",
  },
];

const BADGES: EVBadge[] = [
  { value: "-42%", label: "DISTANCE SAVED" },
  { value: "-37%", label: "FEWER VEHICLES" },
];

export default function Workflow1() {
  return (
    <EVSection
      ariaLabel="Workflow 1 — Performance"
      gapTop
      gapBottom
      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" />}
      metrics={METRICS}
      features={FEATURES}
      cardsHeading="Performance Insight"
      cardsTheme={THEME}
      badges={BADGES}
    />
  );
}