"use client";

import React, { useState, useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

const ROADMAP_DATA = [
  {
    year: 2026,
    pct: 25,
    trackLeft: "12.5%",
    phase: "Pilot Phase",
    phaseClass: "yellow",
    title: "Hyderabad Pilot",
    desc: "Launch operations in Hyderabad with dedicated EV hubs and MileTruth AI v1.0.",
    icon: (
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4.5 16.5c-1.5 1.5-2.5 3.5-2.5 5.5C4 22 6 21 7.5 19.5" />
        <path d="M12 12l9-9-9 9z" />
        <path d="M12 12c-2.3 2.3-3.4 5.3-3.5 8.5l12-12c-3.2-.1-6.2-1.2-8.5-3.5z" />
      </svg>
    ),
    stats: [
      { text: "50-80 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
      { text: "1 city", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
      { text: "10+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg> }
    ]
  },
  {
    year: 2027,
    pct: 50,
    trackLeft: "37.5%",
    phase: "Multi-City",
    phaseClass: "green",
    title: "Multi-City Scale",
    desc: "Expand to Bengaluru and Chennai, securing key B2B enterprise traction.",
    icon: (
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="8" x2="12" y2="16"></line>
        <line x1="8" y1="12" x2="16" y2="12"></line>
      </svg>
    ),
    stats: [
      { text: "300-500 orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
      { text: "3 cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
      { text: "50+ EVs", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> }
    ]
  },
  {
    year: 2028,
    pct: 75,
    trackLeft: "62.5%",
    phase: "Platform",
    phaseClass: "blue",
    title: "Platform Expansion",
    desc: "Scale to 5+ cities. Launch developer API marketplace and Series A readiness.",
    icon: (
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
      </svg>
    ),
    stats: [
      { text: "1,200+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
      { text: "5+ cities", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 21h18M19 21v-2a4 4 0 0 0-3-3.87M5 21v-2a4 4 0 0 1 3-3.87M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5"></path></svg> },
      { text: "API marketplace", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> }
    ]
  },
  {
    year: 2030,
    pct: 100,
    trackLeft: "87.5%",
    phase: "Vision State",
    phaseClass: "white-pill",
    title: "AI Pulse Layer",
    desc: "Nationwide AI logistics grid reaching 15+ cities, empowering female micro-entrepreneurs.",
    icon: (
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z" />
        <path d="M3 20h18" strokeWidth="3" />
      </svg>
    ),
    stats: [
      { text: "5,000+ orders/day", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> },
      { text: "Rs 65 Cr+ revenue", icon: <span className="currency-symbol" style={{ marginRight: "4px", fontSize: "11px", fontWeight: 800 }}>Rs</span> },
      { text: "2,000+ women partners", icon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> }
    ]
  }
];

export default function IntelligenceGrid() {
  const [activeYear, setActiveYear] = useState<number>(2030);
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // Map year to target percent
  const getActivePercent = () => {
    if (activeYear === 2026) return 25;
    if (activeYear === 2027) return 50;
    if (activeYear === 2028) return 75;
    return 100;
  };

  // Map year to timeline horizontal track width
  const getTrackWidth = () => {
    if (activeYear === 2026) return "12.5%";
    if (activeYear === 2027) return "37.5%";
    if (activeYear === 2028) return "62.5%";
    return "87.5%";
  };

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 1. Dotted City Connections Canvas loops
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let animationFrameId: number;
    let width = (canvas.width = canvas.offsetWidth);
    let height = (canvas.height = canvas.offsetHeight);

    const handleResize = () => {
      if (!canvas) return;
      width = canvas.width = canvas.offsetWidth;
      height = canvas.height = canvas.offsetHeight;
    };
    window.addEventListener("resize", handleResize);

    const nodes = [
      { name: "Hyderabad", x: 0.18, y: 0.55 },
      { name: "Chennai", x: 0.42, y: 0.72 },
      { name: "Bengaluru", x: 0.64, y: 0.42 },
      { name: "Mumbai", x: 0.82, y: 0.62 }
    ];

    const particles = [
      { from: 0, to: 1, t: 0, speed: 0.005 },
      { from: 1, to: 2, t: 0.3, speed: 0.004 },
      { from: 2, to: 3, t: 0.6, speed: 0.006 }
    ];

    const draw = () => {
      ctx.clearRect(0, 0, width, height);

      // Draw faint connection lines
      ctx.lineWidth = 1.5;
      ctx.setLineDash([6, 6]);
      ctx.strokeStyle = "rgba(220, 38, 38, 0.12)"; 

      ctx.beginPath();
      for (let i = 0; i < nodes.length - 1; i++) {
        const startX = nodes[i].x * width;
        const startY = nodes[i].y * height;
        const endX = nodes[i + 1].x * width;
        const endY = nodes[i + 1].y * height;
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, endY);
      }
      ctx.stroke();
      ctx.setLineDash([]); 

      // Draw flowing sparks along connections
      particles.forEach((p) => {
        p.t += p.speed;
        if (p.t >= 1) p.t = 0;

        const startNode = nodes[p.from];
        const endNode = nodes[p.to];

        const startX = startNode.x * width;
        const startY = startNode.y * height;
        const endX = endNode.x * width;
        const endY = endNode.y * height;

        const curX = startX + (endX - startX) * p.t;
        const curY = startY + (endY - startY) * p.t;

        ctx.beginPath();
        ctx.arc(curX, curY, 4, 0, Math.PI * 2);
        ctx.fillStyle = "#c01227"; 
        ctx.shadowColor = "#c01227";
        ctx.shadowBlur = 10;
        ctx.fill();
        ctx.shadowBlur = 0; 
      });

      // City labels & glow halos
      nodes.forEach((n) => {
        const xCoord = n.x * width;
        const yCoord = n.y * height;

        ctx.beginPath();
        ctx.arc(xCoord, yCoord, 8, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(220, 38, 38, 0.08)";
        ctx.fill();

        ctx.beginPath();
        ctx.arc(xCoord, yCoord, 3, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
        ctx.fill();

        ctx.fillStyle = "rgba(255, 255, 255, 0.12)";
        ctx.font = "bold 11px 'Manrope', sans-serif";
        ctx.textAlign = "center";
        ctx.fillText(n.name, xCoord, yCoord - 14);
      });

      animationFrameId = requestAnimationFrame(draw);
    };

    draw();

    return () => {
      window.removeEventListener("resize", handleResize);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  // Circular progress calculations
  const activePercent = getActivePercent();
  const radius = 30;
  const circumference = 2 * Math.PI * radius; // 188.49
  const strokeOffset = circumference * (1 - activePercent / 100);

  return (
    <div 
      ref={containerRef}
      className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" 
      data-id="bbc6760" 
      data-element_type="container" 
      data-e-type="container"
      style={{ position: "relative", zIndex: 1 }}
    >
      <section id="hero" className="roadmap-hero-section">
        {/* Subtle Canvas Dotted Logistics Network Background */}
        <canvas ref={canvasRef} className="ce-canvas-bg" aria-hidden="true"></canvas>

        {/* Floating background glowing spotlights */}
        <div className="roadmap-glow-spot top-left"></div>
        <div className="roadmap-glow-spot bottom-right"></div>

        <style dangerouslySetInnerHTML={{ __html: `
          /* Buttery-Smooth Hardware-Accelerated 3D AI Logistics Timeline Styles */
          .roadmap-hero-section {
            position: relative;
            background: #09090b !important; 
            width: 100%;
            padding: 100px 40px;
            box-sizing: border-box;
            font-family: 'Manrope', sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: stretch;
          }

          /* Connection Grid Canvas Overlay */
          .ce-canvas-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.08; 
          }

          /* Spotlights */
          .roadmap-glow-spot {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(140px);
            z-index: 0;
            opacity: 0.05;
          }

          .roadmap-glow-spot.top-left {
            left: -10%;
            top: -10%;
            background: radial-gradient(circle, #C8102E 0%, transparent 70%);
          }

          .roadmap-glow-spot.bottom-right {
            right: -10%;
            bottom: -10%;
            background: radial-gradient(circle, #ff0033 0%, transparent 70%);
          }

          .roadmap-hero-section .container {
            max-width: 1320px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            box-sizing: border-box;
          }

          /* Header Styles */
          .vision-tag-top {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 3px;
            color: #C8102E;
            text-transform: uppercase;
            margin-bottom: 16px;
            text-align: center;
          }

          .roadmap-hero-section .intelligence-grid-title {
            color: #ffffff !important;
            font-size: clamp(34px, 3.8vw, 54px) !important;
            font-weight: 900 !important;
            line-height: 1.1 !important;
            text-align: center;
            letter-spacing: -1.8px !important;
            margin: 0 0 20px 0 !important;
            text-transform: none !important;
          }

          .roadmap-hero-section .intelligence-grid-title-highlight {
            color: #C8102E !important; 
          }

          .vision-main-subtitle {
            font-size: clamp(16px, 1.4vw, 20px);
            font-weight: 500;
            line-height: 1.5;
            color: #a1a1aa !important;
            text-align: center;
            max-width: 720px;
            margin: 0 auto 60px auto !important;
          }

          /* Glowing 3D Timeline Track - Overflow Visible Guarantees No Halo Cutoffs */
          .roadmap-track-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            width: 100%;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 20px;
            padding: 24px 34px;
            box-sizing: border-box;
            backdrop-filter: blur(8px);
            margin-bottom: 60px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            overflow: visible !important; /* Extremely important to prevent cropping timeline child elements */
          }

          .roadmap-track-label {
            font-size: 13.5px;
            font-weight: 800;
            letter-spacing: 2px;
            color: #71717a;
            white-space: nowrap;
          }

          .timeline-horizontal-wrapper {
            flex: 1 1 auto;
            height: 6px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
            position: relative;
            display: flex;
            align-items: center;
            overflow: visible !important; /* Critical to let pulsing halo overlay expand outside the 6px wrapper */
          }

          .timeline-horizontal-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #C8102E;
            box-shadow: 0 0 12px #C8102E;
            border-radius: 3px;
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: width;
          }

          .node-dots-row {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: visible !important; /* Dynamic expansion */
          }

          .node-dot-item {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #18181b;
            border: 2px solid rgba(255, 255, 255, 0.15);
            transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: border-color, background-color, box-shadow;
            overflow: visible !important;
          }

          .node-dot-item.active {
            background: #C8102E;
            border-color: #ffffff;
            box-shadow: 0 0 10px #C8102E;
          }

          /* Pulsing crown node halo - Smoothly decays opacity to 0 to prevent visual pops/blinks */
          .node-pulse-crown {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1.5px solid #C8102E;
            animation: node-breather 2s infinite ease-out;
            pointer-events: none;
            box-sizing: border-box;
            overflow: visible !important;
          }

          @keyframes node-breather {
            0% { transform: scale(0.95); opacity: 0.9; }
            80% { opacity: 0.25; }
            100% { transform: scale(1.6); opacity: 0; }
          }

          /* Progress Ring */
          .roadmap-complete-pct-container {
            display: flex;
            align-items: center;
            gap: 12px;
            white-space: nowrap;
          }

          .roadmap-complete-pct {
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 1px;
            color: #C8102E;
            text-transform: uppercase;
          }

          .progress-ring-circle {
            transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            stroke: #C8102E;
            filter: drop-shadow(0 0 4px #C8102E);
          }

          /* 4-Column Grid container */
          .roadmap-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            width: 100%;
            box-sizing: border-box;
          }

          /* GPU Hardware-Accelerated Breathtakingly Smooth 3D Floating Cards */
          .roadmap-col-card {
            position: relative;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(16px);
            border-radius: 20px;
            padding: 30px 24px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                        border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                        background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            will-change: transform, box-shadow;
          }

          /* Ultra-Smooth CSS scale and translation lifts on hover */
          .roadmap-col-card:hover {
            transform: translateY(-8px) scale(1.03);
            border-color: rgba(255, 255, 255, 0.15);
            background-color: rgba(255, 255, 255, 0.055);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
          }

          /* Active card highlight state */
          .roadmap-col-card.active {
            border-color: rgba(200, 16, 46, 0.65);
            background: rgba(200, 16, 46, 0.04);
            box-shadow: 0 20px 40px rgba(200, 16, 46, 0.1);
          }

          .card-top-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
          }

          .year-num {
            font-size: 26px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -0.5px;
          }

          .card-icon-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.08);
          }

          .phase-badge-pill {
            align-self: flex-start;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 5px 10px;
            border-radius: 6px;
            margin-bottom: 18px;
            letter-spacing: 0.5px;
          }

          .phase-badge-pill.yellow {
            background: rgba(234, 179, 8, 0.12);
            color: #eab308;
            border: 1px solid rgba(234, 179, 8, 0.2);
          }

          .phase-badge-pill.green {
            background: rgba(34, 197, 94, 0.12);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.2);
          }

          .phase-badge-pill.blue {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.2);
          }

          .phase-badge-pill.white-pill {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.2);
          }

          .card-heading {
            font-size: 18px;
            font-weight: 800;
            margin: 0 0 10px 0 !important;
            letter-spacing: -0.3px;
          }

          .card-text {
            font-size: 13.5px;
            line-height: 1.5;
            color: #a1a1aa !important;
            margin: 0 0 20px 0 !important;
          }

          .card-pills-stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: auto;
          }

          .card-stat-pill-mini {
            display: flex;
            align-items: center;
            font-size: 12.5px;
            font-weight: 700;
            color: #e4e4e7;
            padding: 8px 12px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
            will-change: transform;
          }

          .roadmap-col-card:hover .card-stat-pill-mini {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px); 
          }

          /* Special destination: Glowing 2030 AI Pulse Layer card */
          .glowing-vision-card {
            background: linear-gradient(135deg, rgba(200, 16, 46, 0.95) 0%, rgba(120, 10, 30, 0.98) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            animation: red-breath 4s infinite ease-in-out;
          }

          /* Hover scale override for 2030 vision card */
          .glowing-vision-card:hover {
            transform: translateY(-8px) scale(1.03) !important;
            box-shadow: 0 20px 50px rgba(200, 16, 46, 0.7) !important;
          }

          /* Laser sweeping neon borders on 2030 vision card */
          .glowing-vision-card::after {
            content: "";
            position: absolute;
            inset: -1.5px;
            border-radius: 20px;
            background: linear-gradient(90deg, #C8102E, #ff3366, #ff0033, #C8102E);
            background-size: 300% 100%;
            animation: border-sweep 5s linear infinite;
            z-index: -1;
            opacity: 0.65;
          }

          @keyframes border-sweep {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
          }

          @keyframes red-breath {
            0%, 100% { box-shadow: 0 10px 40px rgba(200, 16, 46, 0.25), inset 0 0 15px rgba(255,255,255,0.05); }
            50% { box-shadow: 0 10px 60px rgba(200, 16, 46, 0.6), inset 0 0 25px rgba(255,255,255,0.1); }
          }

          .glowing-vision-card .card-stat-pill-mini {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
          }

          .glowing-vision-card:hover .card-stat-pill-mini {
            background: rgba(255, 255, 255, 0.14) !important;
          }

          .glowing-vision-card .card-text {
            color: rgba(255, 255, 255, 0.8) !important;
          }

          /* Floating sparks/particles inside the 2030 vision card */
          .ce-sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 50%;
            pointer-events: none;
            filter: blur(0.5px);
          }
          .sparkle-1 { left: 15%; bottom: 8%; animation: float-spark 3s infinite ease-in; }
          .sparkle-2 { left: 52%; bottom: 18%; animation: float-spark 4s infinite ease-in; animation-delay: 1.2s; }
          .sparkle-3 { left: 82%; bottom: 12%; animation: float-spark 3.5s infinite ease-in; animation-delay: 2s; }

          @keyframes float-spark {
            0% { transform: translateY(0); opacity: 0; }
            50% { opacity: 0.9; }
            100% { transform: translateY(-70px); opacity: 0; }
          }

          /* Responsive Constraints */
          @media (max-width: 1024px) {
            .roadmap-hero-section {
              padding: 80px 24px;
            }

            .roadmap-grid-container {
              grid-template-columns: repeat(2, 1fr); 
              gap: 20px;
            }

            .roadmap-track-container {
              padding: 20px 24px;
            }
          }

          @media (max-width: 768px) {
            .roadmap-hero-section {
              padding: 60px 16px;
            }

            .roadmap-grid-container {
              grid-template-columns: 1fr; 
              gap: 16px;
            }

            .roadmap-track-container {
              flex-direction: column;
              align-items: flex-start;
              gap: 20px;
            }

            .timeline-horizontal-wrapper {
              width: 100%;
            }
          }
        `}} />

        <div className="container">
          {/* Header tag and Titles */}
          <div className="vision-tag-top">VISION / 2030</div>

          <div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <h3 className="logico-title intelligence-grid-title">
                The <span className="intelligence-grid-title-highlight">Intelligence Grid</span> Behind Every Urban Mile
              </h3>
              <p className="vision-main-subtitle">
                From Hyderabad EV pilot to nationwide AI logistics intelligence by 2030
              </p>
            </div>
          </div>

          {/* Interactive glowing timeline progress track */}
          <div className="roadmap-track-container">
            <span className="roadmap-track-label">ROADMAP TO 2030</span>
            
            <div className="timeline-horizontal-wrapper">
              {/* Timeline Track fillers */}
              <div className="timeline-horizontal-line"></div>
              <div 
                className="timeline-horizontal-fill"
                style={{ width: getTrackWidth() }}
              ></div>

              {/* Glowing active year nodes */}
              <div className="node-dots-row">
                {ROADMAP_DATA.map((node) => (
                  <div 
                    key={node.year}
                    className={`node-dot-item ${activeYear >= node.year ? "active" : ""}`} 
                    style={{ left: node.trackLeft }}
                  >
                    {activeYear === node.year && (
                      <div className="node-pulse-crown"></div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            {/* Circular glowing progress SVG ring */}
            <div className="roadmap-complete-pct-container">
              <span className="roadmap-complete-pct">{activePercent}% COMPLETE &rarr;</span>
              <svg width="40" height="40" viewBox="0 0 80 80">
                <circle 
                  cx="40" 
                  cy="40" 
                  r="30" 
                  fill="none" 
                  stroke="rgba(255,255,255,0.06)" 
                  strokeWidth="6" 
                />
                <circle 
                  className="progress-ring-circle"
                  cx="40" 
                  cy="40" 
                  r="30" 
                  fill="none" 
                  strokeWidth="6" 
                  strokeDasharray={circumference}
                  strokeDashoffset={strokeOffset}
                  strokeLinecap="round"
                />
              </svg>
            </div>
          </div>

          {/* 3D Floating Grid cards */}
          <div className="roadmap-grid-container">
            {ROADMAP_DATA.map((card) => {
              const is2030 = card.year === 2030;
              const isActive = activeYear === card.year;
              return (
                <div 
                  key={card.year}
                  onMouseEnter={() => setActiveYear(card.year)}
                  className={`roadmap-col-card ${is2030 ? "glowing-vision-card" : ""} ${isActive ? "active" : ""}`}
                  data-card={card.year}
                >
                  {/* Sparkles particles loop (for 2030 only) */}
                  {is2030 && (
                    <>
                      <span className="ce-sparkle sparkle-1"></span>
                      <span className="ce-sparkle sparkle-2"></span>
                      <span className="ce-sparkle sparkle-3"></span>
                    </>
                  )}

                  <div className="card-top-row">
                    <span className="year-num">{card.year}</span>
                    <div className={`card-icon-badge ${is2030 ? "translucent-white" : ""}`}>
                      {card.icon}
                    </div>
                  </div>

                  <span className={`phase-badge-pill ${card.phaseClass}`}>
                    {card.phase}
                  </span>

                  <h5 className="card-heading" style={{ color: "white" }}>
                    {card.title}
                  </h5>

                  <p className="card-text">
                    {card.desc}
                  </p>

                  <div className="card-pills-stack">
                    {card.stats.map((stat, sIndex) => (
                      <div 
                        key={sIndex} 
                        className={`card-stat-pill-mini ${is2030 ? "translucent-crimson" : ""}`}
                      >
                        {stat.icon}
                        <span>{stat.text}</span>
                      </div>
                    ))}
                  </div>

                </div>
              );
            })}
          </div>

        </div>
      </section>
    </div>
  );
}