"use client";

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

/* Violet / Electric Purple — distinct from WF1 (cyan/teal) and WF2 (red/crimson). */
const THEME: EVCardsTheme = {
  accent: "#7C5CFF",
  accent2: "#4C3AE3",
  glow: "rgba(124,92,255,0.20)",
};

/**
 * Workflow 4 — Quantum Intelligence (hybrid split-screen).
 *
 *   • Left  — video: the hybrid optimization / energy-landscape visual.
 *   • Right — a COMPACT DASHBOARD: a quick KPI row (QUBO / Global / Hybrid /
 *             Multi) over feature cards describing the encode → energy
 *             landscape → global minimum → hybrid intelligence pipeline,
 *             sitting on the animated network backdrop (violet).
 *
 * Messaging is deliberately framed as work-in-progress ("building",
 * "exploring") rather than a shipped quantum-computing claim.
 */
const METRICS: EVStat[] = [
  { text: "QUBO", value: 0, suffix: "", label: "Problem Model" },
  { text: "GLOBAL", value: 0, suffix: "", label: "Minimum Search" },
  { text: "HYBRID", value: 0, suffix: "", label: "Intelligence" },
  { text: "MULTI", value: 0, suffix: "", label: "Objective" },
];

/* Distinct copy for the bottom capability bar (not a repeat of the KPI row —
 * Workflow 4's brief specifies separate content for each). */
const BAR_STATS: EVStat[] = [
  { text: "Multi-Rider", value: 0, suffix: "", label: "Dynamic Routing" },
  { text: "Optimized", value: 0, suffix: "", label: "Time Windows" },
  { text: "Real-Time", value: 0, suffix: "", label: "Fleet Balancing" },
  { text: "Cost + Distance + SLA", value: 0, suffix: "", label: "Objectives" },
];

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(
      <>
        <rect x="3" y="3" width="7" height="7" />
        <rect x="14" y="3" width="7" height="7" />
        <rect x="14" y="14" width="7" height="7" />
        <rect x="3" y="14" width="7" height="7" />
      </>,
    ),
    title: "Encode the Problem",
    desc: "Rider assignments, delivery sequences, capacity, traffic, service time, and SLA constraints become part of one mathematical optimization model.",
  },
  {
    icon: ico(<path d="m8 3 4 8 5-5 5 15H2L8 3z" />),
    title: "Build the Energy Landscape",
    desc: "Each feasible routing solution is represented as a state with its own energy through a QUBO formulation.",
  },
  {
    icon: ico(
      <>
        <circle cx="12" cy="12" r="9" />
        <circle cx="12" cy="12" r="5" />
        <circle cx="12" cy="12" r="1" />
      </>,
    ),
    title: "Search the Global Minimum",
    desc: "Optimization becomes the search for the lowest-energy state instead of evaluating route combinations one by one.",
  },
  {
    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: "Hybrid Intelligence",
    desc: "Classical algorithms, AI models, and quantum optimization work together using the right computational model for each problem.",
  },
];

const BADGES: EVBadge[] = [
  { value: "QUBO", label: "PROBLEM MODEL" },
  { value: "HYBRID", label: "INTELLIGENCE" },
];

export default function Workflow4() {
  return (
    <EVSection
      ariaLabel="Workflow 4 — Quantum Intelligence"
      gapBottom
      image="/videos/Doormile-quantum-video3.mp4"
      cardTitle="BUILDING QUANTUM INTELLIGENCE"
      cardSubtitle="Exploring a hybrid optimization layer that treats routing as an energy landscape, not a search problem."
      eyebrow="/ Quantum Intelligence /"
      titleLead="FROM ROUTE SEARCH. "
      titleAccent="TO ENERGY MINIMIZATION."
      imageAlt="Hybrid quantum-classical optimization engine visualizing an energy landscape"
      metrics={METRICS}
      barStats={BAR_STATS}
      features={FEATURES}
      cardsHeading="Quantum Intelligence"
      sysLabel="HYBRID ENGINE"
      cardsTheme={THEME}
      badges={BADGES}
      mediaClassName="evnd__imgwrap--wf4"
    />
  );
}