'use client'
import React, { useState } from "react";

export default function Process() {
  const [activeStep, setActiveStep] = useState(-1);

  const CalendarIcon = (
    <svg
      width={34}
      height={34}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
      <line x1="16" y1="2" x2="16" y2="6" />
      <line x1="8" y1="2" x2="8" y2="6" />
      <line x1="3" y1="10" x2="21" y2="10" />
    </svg>
  );

  const steps = [
    {
      number: "1",
      title: "Feb 2022",
      description: "Trauma Registry established on Feb.2022 in collaboration with Transport Corporation of India Limited (TCI).",
      icon: CalendarIcon,
    },
    {
      number: "2",
      title: "Dec 2023",
      description: "Trauma Quality Improvement Programme established on Dec.2023 in collaboration with the Indian Council of Medical Research.",
      icon: CalendarIcon,
    }, 
    // {
    //   number: "3",
    //   title: "Nov 2022",
    //   description: "Trauma centre begins operations with full emergency suite",
    //   icon: CalendarIcon,
    // },
  ];

  return (
    <div className="bg-white py-12 sm:py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
          {/* Left Column */}
          <div className="flex flex-col justify-start">
            <div className="mb-8 lg:mb-16">
              <div className="text-xl mb-4" style={{ color: "#e64838" }}>
                Milestones
              </div>
              <h2
                className="text-3xl sm:text-4xl md:text-5xl font-bold leading-tight mb-6"
                style={{ color: "#012068" }}
              >
                Our Journey in Trauma Care
              </h2>
              <p className="text-base sm:text-lg leading-relaxed mb-8" style={{ color: '#333' }}>
                From the inauguration of our Department of Trauma Surgery to
                establishing a Level-1 Trauma Facility, we continue to expand our
                emergency care services with dedication and excellence.
              </p>
            </div>
          </div>

          {/* Right Column - Steps */}
          <div className="relative">
            {steps.map((step, index) => (
              <div
                key={index}
                className={`relative group cursor-pointer transition-all duration-500 ${
                  index !== 0 ? "mt-8 sm:mt-12" : ""
                }`}
                onMouseEnter={() => setActiveStep(index)}
                onMouseLeave={() => setActiveStep(-1)}
              >
                {/* Connecting Line */}
                {index !== 0 && (
                  <div className="absolute left-6 -top-8 sm:-top-12 w-0.5 h-8 sm:h-12 bg-gray-300 overflow-hidden">
                    <div
                      className={`w-full transition-all duration-700 ease-out origin-bottom ${
                        activeStep >= index ||
                        (activeStep === -1 && index === 0)
                          ? "h-full scale-y-100"
                          : "h-0 scale-y-0"
                      }`}
                      style={{ backgroundColor: "#012068" }}
                    />
                  </div>
                )}

                {/* Step Content */}
                <div className="flex items-start gap-4 sm:gap-6">
                  {/* Number Circle */}
                  <div
                    className={`relative z-10 flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-lg transition-all duration-500 transform ${
                      activeStep === index ||
                      (activeStep === -1 && index === 0)
                        ? "scale-110 shadow-lg ring-4"
                        : "scale-100 hover:scale-105"
                    }`}
                    style={{
                      backgroundColor:
                        activeStep === index ||
                        (activeStep === -1 && index === 0)
                          ? "#012068"
                          : "#333", // Black when inactive
                      "--tw-ring-color":
                        activeStep === index ||
                        (activeStep === -1 && index === 0)
                          ? "#012068" + "33"
                          : "transparent",
                    } as React.CSSProperties}
                  >
                    {step.number}
                  </div>

                  {/* Step Card */}
                  <div
                    className={`flex-1 p-4 sm:p-6 rounded-lg border transition-all duration-500 transform ${
                      activeStep === index ||
                      (activeStep === -1 && index === 0)
                        ? "border-transparent text-white shadow-2xl scale-105 -translate-y-2"
                        : "border-gray-300 hover:shadow-lg hover:-translate-y-1"
                    }`}
                    style={{
                      backgroundColor:
                        activeStep === index ||
                        (activeStep === -1 && index === 0)
                          ? "#012068"
                          : "#f4f4f4",
                      color:
                        activeStep === index ||
                        (activeStep === -1 && index === 0)
                          ? "white"
                          : "#333", // Black text when inactive
                    }}
                  >
                    {/* Icon */}
                    <div
                      className={`mb-4 transition-all duration-500 transform ${
                        activeStep === index ||
                        (activeStep === -1 && index === 0)
                          ? "text-white"
                          : "scale-100 group-hover:scale-105"
                      }`}
                      style={{
                        color:
                          activeStep === index ||
                          (activeStep === -1 && index === 0)
                            ? "white"
                            : "black", // Black icon when inactive
                      }}
                    >
                      {step.icon}
                    </div>

                    {/* Text */}
                    <h3 className="text-lg sm:text-xl font-semibold mb-3 transition-all duration-300">
                      {step.title}
                    </h3>
                    <p className="text-sm sm:text-base leading-relaxed transition-all duration-500">
                      {step.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
