"use client";

import type { ReactNode } from "react";
import { cn } from "@/shared/utils/cn";

export interface HowItWorksStep {
  icon: ReactNode;
  title: string;
  description: string;
}

export interface HowItWorksProps {
  title?: string;
  eyebrow?: string;
  steps: HowItWorksStep[];
  className?: string;
}

/**
 * HowItWorks - Visual step-by-step process.
 * Horizontal on desktop, vertical stack on mobile.
 */
export function HowItWorks({
  title = "How It Works",
  eyebrow = "Simple Process",
  steps,
  className,
}: HowItWorksProps) {
  return (
    <section className={cn("py-6", className)}>
      {/* Header */}
      <div className="text-center mb-8">
        <p className="text-xs font-semibold text-primary uppercase tracking-wider mb-1.5">
          {eyebrow}
        </p>
        <h2 className="text-xl sm:text-2xl font-bold leading-tight tracking-tight text-foreground">
          {title}
        </h2>
      </div>

      {/* Steps */}
      <div className="relative">
        {/* Connection line — desktop */}
        <div
          className="hidden md:block absolute top-8 left-[12%] right-[12%] h-px bg-border"
          aria-hidden="true"
        />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-4">
          {steps.map((step, index) => (
            <div key={index} className="relative flex flex-col items-center text-center group">
              {/* Icon */}
              <div className="relative mb-3">
                <div className="w-14 h-14 rounded-xl bg-card border border-border shadow-sm flex items-center justify-center text-primary group-hover:border-primary/30 group-hover:shadow-md transition-all duration-200">
                  {step.icon}
                </div>
                <div className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-primary text-primary-foreground text-[10px] font-bold flex items-center justify-center">
                  {index + 1}
                </div>
              </div>

              <h3 className="text-sm font-semibold text-foreground mb-1">{step.title}</h3>
              <p className="text-xs text-muted-foreground leading-relaxed max-w-[180px]">
                {step.description}
              </p>

              {/* Vertical connector — mobile */}
              {index < steps.length - 1 && (
                <div className="md:hidden w-px h-5 bg-border mt-3" aria-hidden="true" />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default HowItWorks;
