"use client";

import {
  ClipboardDocumentListIcon,
  CreditCardIcon,
  ShieldCheckIcon,
  DevicePhoneMobileIcon,
} from "@heroicons/react/24/outline";

const steps = [
  {
    number: 1,
    title: "Select Plan",
    description: "Choose your data, voice, or combo plan",
    icon: ClipboardDocumentListIcon,
  },
  {
    number: 2,
    title: "Submit Order",
    description: "Add payment method & residence card",
    icon: CreditCardIcon,
  },
  {
    number: 3,
    title: "Verification",
    description: "We review your ID (1-2 business days)",
    icon: ShieldCheckIcon,
  },
  {
    number: 4,
    title: "Receive SIM",
    description: "eSIM via email or physical SIM shipped",
    icon: DevicePhoneMobileIcon,
  },
];

export function SimOrderProcess() {
  return (
    <div className="bg-card border border-border rounded-2xl p-6 md:p-8">
      <h3 className="text-lg font-semibold text-foreground text-center mb-6">How Ordering Works</h3>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
        {steps.map((step, index) => (
          <div key={step.number} className="relative text-center">
            {/* Connector line (hidden on mobile between rows) */}
            {index < steps.length - 1 && (
              <div className="hidden md:block absolute top-8 left-[60%] w-[80%] h-0.5 bg-border" />
            )}

            {/* Step icon */}
            <div className="relative mx-auto w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mb-3">
              <step.icon className="w-7 h-7 text-primary" />
              <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold flex items-center justify-center">
                {step.number}
              </span>
            </div>

            {/* Step content */}
            <h4 className="font-medium text-foreground text-sm mb-1">{step.title}</h4>
            <p className="text-xs text-muted-foreground leading-relaxed">{step.description}</p>
          </div>
        ))}
      </div>

      <p className="text-center text-xs text-muted-foreground mt-6 pt-4 border-t border-border">
        ID verification is required for all new SIM subscriptions in compliance with Japanese
        telecommunications regulations.
      </p>
    </div>
  );
}
