---
/**
 * Features Section Component
 *
 * Displays a grid of feature cards with icons, titles, and descriptions.
 * Supports multiple icon types (zap, shield, chart, users, globe, lock).
 *
 * @example
 * ```astro
 * <Features
 *   title="Why Choose AstroDeck?"
 *   subtitle="Everything you need to build fast"
 *   features={[
 *     {
 *       icon: "zap",
 *       title: "Lightning Fast",
 *       description: "Built with Astro for optimal performance"
 *     },
 *     {
 *       icon: "shield",
 *       title: "Type Safe",
 *       description: "Full TypeScript support"
 *     }
 *   ]}
 * />
 * ```
 *
 * @customization
 * - Add new icons to iconPaths object (line 16)
 * - Change grid columns by modifying grid class (line 40)
 * - Adjust spacing with py-* and gap-* classes
 */
interface Feature {
  title: string;
  description: string;
  icon: string;
}

interface Props {
  title: string;
  subtitle?: string;
  features: Feature[];
}

const { title, subtitle, features } = Astro.props;

const iconPaths: Record<string, string> = {
  zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  chart: 'M18 20V10M12 20V4M6 20v-6',
  users:
    'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
  globe:
    'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',
  lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
};
---

<section class="py-20 px-6">
  <div class="container max-w-5xl mx-auto">
    <div class="flex flex-col items-center space-y-4 text-center" data-animate>
      <h2 class="text-3xl font-bold leading-[1.1] sm:text-3xl md:text-5xl">
        {title}
      </h2>
      {
        subtitle && (
          <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
            {subtitle}
          </p>
        )
      }
    </div>
    <div
      class="grid gap-px sm:grid-cols-2 md:grid-cols-3 mt-12 bg-border overflow-hidden rounded-xl border shadow-lg"
    >
      {
        features.map((feature, index) => (
          <div class="relative overflow-hidden bg-card px-10 py-12" data-animate data-delay={String(Math.min(index + 1, 5))}>
            <div class="inline-flex p-1.5 border border-foreground rounded-xl mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-5 w-5"
              >
                <path d={iconPaths[feature.icon] || iconPaths.zap} />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2">{feature.title}</h3>
            <p class="text-sm text-muted-foreground">{feature.description}</p>
          </div>
        ))
      }
    </div>
  </div>
</section>
