import Image from "next/image";
import React from "react";
import { SectionHeader } from "@/components/SectionHeader";
import { cn } from "@/lib/utils";

const steps = [
  {
    step: "01",
    title: "Book Your Service",
    desc: "Choose your service online or on WhatsApp, then select your preferred time and location.",
  },
  {
    step: "02",
    title: "We Come to You",
    desc: "A trained technician arrives at your doorstep with tools and equipment.",
  },
  {
    step: "03",
    title: "Service in Action",
    desc: "Your vehicle is inspected and serviced with a clean, standard process.",
  },
  {
    step: "04",
    title: "Clear Updates",
    desc: "You get clear updates, recommendations, and pricing before extra work.",
  },
  {
    step: "05",
    title: "Ride Ready",
    desc: "Your vehicle is tested, cleaned, and ready for a smooth ride.",
  },
];

type StepCardProps = {
  step: string;
  title: string;
  desc: string;
  isLast?: boolean;
};

export function StepCard({ step, title, desc, isLast }: StepCardProps) {
  return (
    <div className="relative flex flex-col items-center text-center group">
      {/* Horizontal Timeline Connector (Desktop) */}
      {!isLast && (
        <div className="absolute left-[60%] top-10 hidden h-[2px] w-[80%] bg-gradient-to-r from-white/30 via-white/10 to-transparent lg:block" />
      )}

      {/* Circular Step Indicator */}
      <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-full border-2 border-white/20 bg-white/5 backdrop-blur-md transition-all duration-500 group-hover:scale-110 group-hover:border-white group-hover:bg-white group-hover:shadow-[0_0_30px_rgba(255,255,255,0.3)]">
        <span className="text-2xl font-black tracking-tighter text-white group-hover:text-primary">
          {step}
        </span>
      </div>

      {/* Text Content */}
      <div className="mt-8 px-4">
        <h3 className="text-xl font-bold tracking-tight text-white">{title}</h3>
        <p className="mt-3 text-sm leading-relaxed text-white/70">{desc}</p>
      </div>

      {/* Vertical Mobile Connector */}
      {!isLast && (
        <div className="mt-8 h-12 w-px bg-gradient-to-b from-white/30 to-transparent lg:hidden" />
      )}
    </div>
  );
}

/**
 * RESTORED EXPORT: Use this if you are calling the grid specifically in your page
 */
export function StepCardsGrid() {
  return (
    <div className="grid gap-y-4 sm:grid-cols-2 lg:grid-cols-5 lg:gap-x-4">
      {steps.map((item, index) => (
        <StepCard key={item.title} {...item} isLast={index === steps.length - 1} />
      ))}
    </div>
  );
}

type HowItWorksSectionProps = {
  className?: string;
  containerClassName?: string;
};

export function HowItWorksSection({ className, containerClassName }: HowItWorksSectionProps) {
  return (
    <section
      data-section="how-it-works"
      className={cn(
        "relative overflow-hidden bg-primary py-20 font-['Space_Grotesk'] lg:py-25",
        className,
      )}
    >
      {/* Engine Line Art - Background Decorative Image */}
      <div className="pointer-events-none absolute -right-16 top-1/2 z-0 -translate-y-1/2 opacity-10 mix-blend-overlay lg:block">
        <img
          src="/images/engine-line.png"
          alt="Engine Blueprint"
          className="h-[500px] w-auto grayscale invert"
        />
      </div>

      {/* Decorative Ambient Light */}
      <div className="absolute -left-24 -top-24 h-96 w-96 rounded-full bg-white/5 blur-[120px]" />

      <div className={cn("relative z-10 mx-auto max-w-7xl px-4", containerClassName)}>
        <div className="mb-20">
          <SectionHeader
            eyebrow={<span className="text-white/80 uppercase tracking-widest">Our Process</span>}
            title={<span className="text-white">Effortless Servicing in 5 Steps</span>}
            lead={
              <span className="text-white/60">
                We’ve streamlined vehicle maintenance so you can focus on the road.
              </span>
            }
          />
        </div>

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