import React from "react";

type Step = {
  n: number;
  title: string;
  sub: string;
};

const steps: Step[] = [
  { n: 1, title: "Discovery", sub: "Goals + requirements" },
  { n: 2, title: "Plan", sub: "Scope + timeline" },
  { n: 3, title: "Design", sub: "UX + system outline" },
  { n: 4, title: "Build", sub: "Features in iterations" },
  { n: 5, title: "Launch", sub: "Testing + deploy" },
  { n: 6, title: "Improve", sub: "Scale + optimize" },
];

export default function ProcessFlowMap() {
  return (
    // UPDATED: Used colored shadow (cyan) instead of gray for that "Premium/Linear" feel
    <div className="relative w-full overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 shadow-2xl shadow-cyan-900/5">
      
      {/* ================= Ambient Background ================= */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -top-24 -left-24 h-80 w-80 rounded-full bg-cyan-100/40 blur-[80px]" />
        <div className="absolute -bottom-24 -right-24 h-80 w-80 rounded-full bg-blue-100/40 blur-[80px]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#f8fafc_1px,transparent_1px),linear-gradient(to_bottom,#f8fafc_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
      </div>

      <div className="relative z-10">
        
        {/* ================= Header ================= */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between mb-10">
          <div className="flex items-center gap-2 rounded-full border border-slate-200 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm backdrop-blur-md">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
            </span>
            Live Workflow
          </div>
        </div>

        {/* ========================================================= */}
        {/* VIEW 1: DESKTOP (Horizontal) - Hidden on Mobile */}
        {/* ========================================================= */}
        <div className="hidden md:block relative w-full overflow-x-auto pb-4 hide-scrollbar">
          <svg viewBox="0 0 960 200" className="w-full min-w-[960px] h-auto select-none">
            <defs>
              <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#22d3ee" stopOpacity="0" />
                <stop offset="50%" stopColor="#22d3ee" stopOpacity="1" />
                <stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
              </linearGradient>
              {/* UPDATED: Colored drop shadow for cards */}
              <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
                <feDropShadow dx="0" dy="8" stdDeviation="12" floodColor="#06b6d4" floodOpacity="0.12" />
              </filter>
              <path id="flow-path" d="M40 80 L920 80" />
            </defs>

            {/* Track & Animation */}
            <path d="M40 80 L920 80" fill="none" stroke="#F1F5F9" strokeWidth="4" strokeLinecap="round"/>
            <path d="M40 80 L920 80" fill="none" stroke="url(#lineGradient)" strokeWidth="4" strokeLinecap="round" strokeDasharray="100 300" className="animate-dash"/>
            <circle r="6" fill="#06B6D4" filter="url(#cardShadow)">
              <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1">
                <mpath href="#flow-path" />
              </animateMotion>
            </circle>

            {/* Steps */}
            {steps.map((s, i) => {
              const x = 80 + i * 160; 
              const y = 80;
              const isHighlight = s.n >= 4;
              return (
                <g key={s.n} className="group cursor-default">
                  {/* Hover effect on circle */}
                  <circle cx={x} cy={y} r={isHighlight ? 10 : 8} fill="white" stroke={isHighlight ? "#06B6D4" : "#CBD5E1"} strokeWidth={3} className="transition-all duration-300 group-hover:scale-125 group-hover:stroke-cyan-400"/>
                  {isHighlight && <circle cx={x} cy={y} r="4" fill="#06B6D4" />}
                  
                  <line x1={x} y1={y + 14} x2={x} y2={y + 35} stroke="#E2E8F0" strokeWidth="2" />
                  
                  <g transform={`translate(${x - 65}, ${y + 35})`}>
                    <rect width="130" height="54" rx="12" fill="white" stroke={isHighlight ? "#06B6D4" : "#E2E8F0"} strokeWidth={isHighlight ? 1.5 : 1} filter="url(#cardShadow)" className="transition-all duration-300 group-hover:-translate-y-1 group-hover:shadow-lg group-hover:shadow-cyan-500/10 group-hover:stroke-cyan-400"/>
                    
                    <g transform="translate(10, -10)">
                       <circle r="12" cx="12" cy="12" fill="white" stroke="#E2E8F0" />
                       <text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="bold" fill="#64748B">{s.n}</text>
                    </g>
                    <text x="14" y="24" fontSize="12" fontWeight="bold" fill="#1E293B" className="font-sans">{s.title}</text>
                    <text x="14" y="40" fontSize="10" fontWeight="500" fill="#64748B" className="font-sans">{s.sub}</text>
                  </g>
                </g>
              );
            })}
          </svg>
        </div>

        {/* ========================================================= */}
        {/* VIEW 2: MOBILE (Vertical) - Visible on Mobile Only */}
        {/* ========================================================= */}
        <div className="block md:hidden relative w-full pl-4">
          <svg viewBox="0 0 320 600" className="w-full h-auto select-none">
            <defs>
              <linearGradient id="vLineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="#22d3ee" stopOpacity="0" />
                <stop offset="50%" stopColor="#22d3ee" stopOpacity="1" />
                <stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
              </linearGradient>
              <path id="v-flow-path" d="M20 30 L20 570" />
            </defs>

            {/* Vertical Track */}
            <path d="M20 30 L20 570" fill="none" stroke="#F1F5F9" strokeWidth="3" strokeLinecap="round"/>
            <path d="M20 30 L20 570" fill="none" stroke="url(#vLineGradient)" strokeWidth="3" strokeLinecap="round" strokeDasharray="60 180" className="animate-dash"/>
            
            <circle r="5" fill="#06B6D4" filter="url(#cardShadow)">
              <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1">
                <mpath href="#v-flow-path" />
              </animateMotion>
            </circle>

            {/* Vertical Steps */}
            {steps.map((s, i) => {
              const x = 20; 
              const y = 50 + i * 90;
              const isHighlight = s.n >= 4;

              return (
                <g key={s.n}>
                  <circle cx={x} cy={y} r={isHighlight ? 8 : 6} fill="white" stroke={isHighlight ? "#06B6D4" : "#CBD5E1"} strokeWidth={2} />
                  
                  <line x1={x + 10} y1={y} x2={x + 30} y2={y} stroke="#E2E8F0" strokeWidth="2" />

                  <g transform={`translate(${x + 30}, ${y - 25})`}>
                    <rect width="220" height="50" rx="10" fill="white" stroke={isHighlight ? "#06B6D4" : "#E2E8F0"} strokeWidth={isHighlight ? 1.5 : 1} filter="url(#cardShadow)" />
                    
                    <circle r="10" cx="0" cy="25" fill="white" stroke="#E2E8F0" />
                    <text x="0" y="29" textAnchor="middle" fontSize="10" fontWeight="bold" fill="#64748B">{s.n}</text>

                    <text x="20" y="20" fontSize="13" fontWeight="bold" fill="#1E293B" className="font-sans">{s.title}</text>
                    <text x="20" y="36" fontSize="10" fontWeight="500" fill="#64748B" className="font-sans">{s.sub}</text>
                  </g>
                </g>
              );
            })}
          </svg>
        </div>

      </div>

      <style>{`
        @keyframes dashMove {
          from { stroke-dashoffset: 400; }
          to { stroke-dashoffset: 0; }
        }
        .animate-dash {
          animation: dashMove 3s linear infinite;
        }
        .hide-scrollbar::-webkit-scrollbar {
          display: none;
        }
        .hide-scrollbar {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      `}</style>
    </div>
  );
}