"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 component
 *
 * Displays a numbered process with icons and descriptions.
 * Horizontal layout on desktop, vertical stack on mobile.
 */
export function HowItWorks({
  title = "How It Works",
  eyebrow = "Simple Process",
  steps,
  className,
}: HowItWorksProps) {
  return (
    <section className={cn("py-8", className)}>
      {/* Section Header */}
      <div className="text-center mb-8">
        <p className="text-sm font-semibold text-primary uppercase tracking-wider mb-2">
          {eyebrow}
        </p>
        <h2 className="text-display-sm font-display text-foreground">{title}</h2>
      </div>

      {/* Steps Container */}
      <div className="relative">
        {/* Connection line - visible on md+ */}
        <div
          className="hidden md:block absolute top-8 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-transparent via-border to-transparent"
          aria-hidden="true"
        />

        {/* Steps Grid */}
        <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">
              {/* Step Number Badge */}
              <div className="relative mb-4">
                {/* Icon Container */}
                <div className="w-16 h-16 rounded-2xl bg-card border border-border shadow-sm flex items-center justify-center text-primary group-hover:border-primary/40 group-hover:shadow-md transition-all duration-[var(--cp-duration-normal)]">
                  {step.icon}
                </div>
                {/* Number Badge */}
                <div 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 shadow-sm">
                  {index + 1}
                </div>
              </div>

              {/* Content */}
              <h3 className="text-base font-semibold text-foreground mb-1.5">{step.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed max-w-[200px]">
                {step.description}
              </p>

              {/* Vertical connector for mobile - between steps */}
              {index < steps.length - 1 && (
                <div className="md:hidden w-0.5 h-6 bg-border mt-4" aria-hidden="true" />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default HowItWorks;
