"use client";

import {
  UserPlusIcon,
  MagnifyingGlassIcon,
  CheckBadgeIcon,
  RocketLaunchIcon,
} from "@heroicons/react/24/outline";

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

function Step({ number, icon, title, description, isLast = false }: StepProps) {
  return (
    <div className="relative flex items-start gap-4">
      {/* Step number with icon */}
      <div className="flex flex-col items-center">
        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 border-2 border-primary/30 text-primary">
          {icon}
        </div>
        {/* Connector line */}
        {!isLast && (
          <div className="w-0.5 h-full min-h-[3rem] bg-gradient-to-b from-primary/30 to-transparent mt-2" />
        )}
      </div>

      {/* Content */}
      <div className="flex-1 pb-8">
        <div className="flex items-center gap-2 mb-1">
          <span className="text-xs font-bold text-primary uppercase tracking-wider">
            Step {number}
          </span>
        </div>
        <h4 className="font-semibold text-foreground mb-1">{title}</h4>
        <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
      </div>
    </div>
  );
}

export function HowItWorksSection() {
  const steps = [
    {
      icon: <UserPlusIcon className="h-5 w-5" />,
      title: "Create your account",
      description:
        "Sign up with your email and provide your service address. This only takes a minute.",
    },
    {
      icon: <MagnifyingGlassIcon className="h-5 w-5" />,
      title: "We verify with NTT",
      description:
        "Our team checks what service is available at your address. This takes 1-2 business days.",
    },
    {
      icon: <CheckBadgeIcon className="h-5 w-5" />,
      title: "Choose your plan",
      description:
        "Once verified, you'll see exactly which plans are available and can select your tier (Silver, Gold, or Platinum).",
    },
    {
      icon: <RocketLaunchIcon className="h-5 w-5" />,
      title: "Get connected",
      description:
        "We coordinate NTT installation and set up your service. You'll be online in no time.",
    },
  ];

  return (
    <section className="bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] p-6">
      <div className="mb-6">
        <h3 className="text-lg font-bold text-foreground mb-1">How it works</h3>
        <p className="text-sm text-muted-foreground">
          Getting connected is simple. Here's what to expect.
        </p>
      </div>

      <div className="space-y-0">
        {steps.map((step, index) => (
          <Step
            key={index}
            number={index + 1}
            icon={step.icon}
            title={step.title}
            description={step.description}
            isLast={index === steps.length - 1}
          />
        ))}
      </div>
    </section>
  );
}
