"use client";

import { MapPin, Settings, Calendar, Wifi } from "lucide-react";

interface StepProps {
  number: number;
  icon: React.ReactNode;
  title: string;
  description: string;
}

function Step({ number, icon, title, description }: StepProps) {
  return (
    <div className="flex flex-col items-center text-center flex-1 min-w-0">
      {/* Icon with number badge */}
      <div className="relative mb-4">
        <div className="flex h-16 w-16 items-center justify-center rounded-xl bg-gray-50 border border-gray-200 text-primary shadow-sm">
          {icon}
        </div>
        {/* Number badge */}
        <div className="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-white text-xs font-bold shadow-sm">
          {number}
        </div>
      </div>

      {/* Content */}
      <h4 className="font-semibold text-foreground mb-2">{title}</h4>
      <p className="text-sm text-muted-foreground leading-relaxed max-w-[180px]">{description}</p>
    </div>
  );
}

export function HowItWorksSection() {
  const steps = [
    {
      icon: <MapPin className="h-6 w-6" />,
      title: "Enter Address",
      description: "Submit your address for coverage check",
    },
    {
      icon: <Settings className="h-6 w-6" />,
      title: "We Verify",
      description: "Our team checks with NTT (1-2 days)",
    },
    {
      icon: <Calendar className="h-6 w-6" />,
      title: "Sign Up & Order",
      description: "Create account and select your plan",
    },
    {
      icon: <Wifi className="h-6 w-6" />,
      title: "Get Connected",
      description: "NTT installs fiber at your home",
    },
  ];

  return (
    <section className="bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] p-8">
      {/* Header */}
      <div className="text-center mb-8">
        <span className="text-sm font-semibold text-primary uppercase tracking-wider">
          Getting Started
        </span>
        <h3 className="text-2xl font-bold text-foreground mt-1">How It Works</h3>
      </div>

      {/* Steps with connecting line */}
      <div className="relative">
        {/* Connecting line - hidden on mobile */}
        <div className="hidden md:block absolute top-8 left-[12%] right-[12%] h-0.5 bg-gray-200" />

        {/* Curved path SVG for visual connection - hidden on mobile */}
        <svg
          className="hidden md:block absolute top-[30px] left-0 right-0 w-full h-4 pointer-events-none"
          preserveAspectRatio="none"
        >
          <path
            d="M 12% 8 Q 30% 8, 37.5% 8 Q 45% 8, 50% 8 Q 55% 8, 62.5% 8 Q 70% 8, 88% 8"
            fill="none"
            stroke="#e5e7eb"
            strokeWidth="2"
            strokeDasharray="6 4"
          />
        </svg>

        {/* Steps grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 relative z-10">
          {steps.map((step, index) => (
            <Step
              key={index}
              number={index + 1}
              icon={step.icon}
              title={step.title}
              description={step.description}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
