---
interface Props {
  title: string;
  subtitle?: string;
  background_image?: string;
  background_gradient?: string;
  cta_text?: string;
  cta_url?: string;
  cta_secondary_text?: string;
  cta_secondary_url?: string;
  alignment?: 'left' | 'center' | 'right';
}

const { 
  title, 
  subtitle, 
  background_image, 
  background_gradient = 'from-blue-900 via-purple-900 to-indigo-900',
  cta_text,
  cta_url,
  cta_secondary_text,
  cta_secondary_url,
  alignment = 'center'
} = Astro.props;

const alignmentClasses = {
  left: 'items-start text-left',
  center: 'items-center text-center',
  right: 'items-end text-right'
};
---

<section 
  class={`relative min-h-[70vh] flex items-center justify-center py-20 bg-gradient-to-br ${background_gradient}`}
  style={background_image ? `background-image: url('${background_image}'); background-size: cover; background-position: center;` : ''}
>
  {background_image && <div class="absolute inset-0 bg-black/50"></div>}
  
  <div class={`relative z-10 max-w-5xl mx-auto px-6 flex flex-col gap-6 ${alignmentClasses[alignment]}`}>
    <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight drop-shadow-2xl">
      {title}
    </h1>
    
    {subtitle && (
      <p class="text-xl md:text-2xl text-white/90 max-w-3xl leading-relaxed">
        {subtitle}
      </p>
    )}
    
    {(cta_text || cta_secondary_text) && (
      <div class="flex flex-wrap gap-4 mt-6">
        {cta_text && cta_url && (
          <a 
            href={cta_url}
            class="inline-flex items-center px-8 py-4 bg-white text-gray-900 rounded-xl font-bold text-lg shadow-xl hover:bg-gray-100 hover:scale-105 transition-all duration-300"
          >
            {cta_text}
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        )}
        
        {cta_secondary_text && cta_secondary_url && (
          <a 
            href={cta_secondary_url}
            class="inline-flex items-center px-8 py-4 border-2 border-white text-white rounded-xl font-bold text-lg hover:bg-white/10 transition-all duration-300"
          >
            {cta_secondary_text}
          </a>
        )}
      </div>
    )}
  </div>
  
  <!-- Decorative elements -->
  <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent"></div>
</section>
