/**
 * BenefitsSection - Server Component
 *
 * Displays a grid of benefits/features with icons.
 * Inspired by Aceternity Features but simplified for Server Component.
 *
 * @example
 * ```tsx
 * <BenefitsSection
 *   title="Pourquoi passer par un courtier"
 *   subtitle="quand on est une TPE ?"
 *   description="Vous n'avez pas le temps de comparer des dizaines d'offres."
 *   items={[
 *     { icon: Clock, title: "Gain de temps", description: "Analyse en 5 minutes" },
 *     { icon: Euro, title: "Économies", description: "Jusqu'à -15% sur vos factures" },
 *   ]}
 * />
 * ```
 */

import { cn } from "@/lib/utils";
import {
  IconCheck,
  IconClock,
  IconCoin,
  IconShieldCheck,
} from "@tabler/icons-react";
import type { BenefitItem, BenefitsSectionProps } from "./types";

/**
 * Icon mapping for string-based icon names
 */
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  check: IconCheck,
  clock: IconClock,
  shield: IconShieldCheck,
  coin: IconCoin,
};

/**
 * Render icon from string name or component
 */
function renderIcon(icon: BenefitItem["icon"], className?: string) {
  if (typeof icon === "string") {
    const IconComponent = iconMap[icon] || IconCheck;
    return <IconComponent className={className} />;
  }
  const IconComponent = icon as React.ComponentType<{ className?: string }>;
  return <IconComponent className={className} />;
}

export function BenefitsSection({
  title,
  subtitle,
  description,
  items,
  columns = 3,
}: BenefitsSectionProps) {
  const gridCols = {
    2: "lg:grid-cols-2",
    3: "lg:grid-cols-3",
    4: "lg:grid-cols-4",
  };

  return (
    <section className="mx-auto max-w-7xl px-4 py-16 md:px-8 md:py-24 lg:py-32">
      {/* Header */}
      <div className="mb-12 text-center md:mb-16">
        <h2 className="text-2xl font-bold capitalize tracking-tight bg-linear-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent md:text-4xl lg:text-5xl">
          {title}
        </h2>
        {subtitle && (
          <p className="mt-4 text-base font-semibold text-gray-900 md:text-lg">
            {subtitle}
          </p>
        )}
        {description && (
          <p className="mx-auto mt-2 max-w-2xl text-base text-gray-600 md:text-lg">
            {description}
          </p>
        )}
      </div>

      {/* Benefits Grid */}
      <div
        className={cn(
          "mt-12 grid grid-cols-1 gap-4 md:mt-16 md:grid-cols-2",
          gridCols[columns]
        )}
      >
        {items.map((item, index) => (
          <BenefitCard
            key={item.title}
            item={item}
            isFirst={index === 0}
            isLast={index === items.length - 1}
          />
        ))}
      </div>
    </section>
  );
}

/**
 * Individual benefit card
 */
function BenefitCard({
  item,
  isFirst,
  isLast,
}: {
  item: BenefitItem;
  isFirst: boolean;
  isLast: boolean;
}) {
  return (
    <div
      className={cn(
        "group relative overflow-hidden rounded-2xl bg-gray-50 p-6 transition-all duration-300 hover:bg-gray-100 hover:shadow-lg md:p-8",
        isFirst && "md:rounded-tl-3xl",
        isLast && "md:rounded-br-3xl"
      )}
    >
      {/* Icon */}
      <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-linear-to-br from-orange-500 to-orange-600 text-white shadow-lg shadow-orange-500/25 transition-transform duration-300 group-hover:scale-110">
        {renderIcon(item.icon, "size-6")}
      </div>

      {/* Content */}
      <h3 className="mb-2 text-lg font-bold text-gray-900 md:text-xl">
        {item.title}
      </h3>
      <p className="text-sm text-gray-600 md:text-base">{item.description}</p>

      {/* Decorative gradient on hover */}
      <div
        className="pointer-events-none absolute -right-10 -top-10 size-32 rounded-full bg-linear-to-br from-orange-500/10 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        aria-hidden="true"
      />
    </div>
  );
}