---
interface Step {
  title: string;
  description: string;
  icon?: string;
}

interface Props {
  title?: string;
  subtitle?: string;
  steps: Step[];
  layout?: 'vertical' | 'horizontal';
}

const { 
  title, 
  subtitle,
  steps = [],
  layout = 'vertical'
} = Astro.props;
---

<section class="max-w-5xl mx-auto px-6 py-16">
  {(title || subtitle) && (
    <div class="text-center mb-12">
      {title && (
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          {title}
        </h2>
      )}
      {subtitle && (
        <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          {subtitle}
        </p>
      )}
    </div>
  )}
  
  {layout === 'horizontal' ? (
    <div class="grid md:grid-cols-3 gap-8">
      {steps.map((step, index) => (
        <div class="relative text-center group">
          <div class="w-16 h-16 bg-gradient-to-br from-primary to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300">
            <span class="text-2xl font-bold text-white">{index + 1}</span>
          </div>
          
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
            {step.title}
          </h3>
          
          <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
            {step.description}
          </p>
          
          {index < steps.length - 1 && (
            <div class="hidden md:block absolute top-8 left-[60%] w-[80%] h-0.5 bg-gradient-to-r from-primary/50 to-transparent"></div>
          )}
        </div>
      ))}
    </div>
  ) : (
    <div class="space-y-8">
      {steps.map((step, index) => (
        <div class="flex gap-6 group">
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-primary to-purple-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
              <span class="text-xl font-bold text-white">{index + 1}</span>
            </div>
            {index < steps.length - 1 && (
              <div class="w-0.5 flex-1 bg-gradient-to-b from-primary/50 to-transparent mt-4"></div>
            )}
          </div>
          
          <div class="flex-1 pb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
              {step.title}
            </h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
              {step.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  )}
</section>
