---
import { getLangFromUrl, useTranslations, localizePath } from '../utils/i18n';

const lang = getLangFromUrl(Astro.url);
const t = await useTranslations(lang);
---

<section class="py-20 bg-gradient-to-br from-primary via-primary to-secondary text-primary-foreground relative overflow-hidden">
  <!-- Background decoration -->
  <div class="absolute inset-0 opacity-10">
    <div class="absolute top-10 left-10 w-32 h-32 rounded-full bg-white blur-2xl"></div>
    <div class="absolute bottom-10 right-10 w-48 h-48 rounded-full bg-white blur-3xl"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-white blur-3xl"></div>
  </div>

  <div class="container-custom relative z-10">
    <div class="text-center max-w-4xl mx-auto animate-on-scroll">
      <!-- CTA heading -->
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold mb-6">
        {t('cta.title')}
      </h2>
      
      <!-- CTA subtitle -->
      <p class="text-lg sm:text-xl mb-8 opacity-90 leading-relaxed">
        {t('cta.subtitle')}
      </p>
      
      <!-- CTA button -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
        <a 
          href={localizePath("/contact", lang)} 
          class="bg-background text-foreground hover:bg-background/90 px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"
        >
          {t('cta.button')}
          <svg class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
          </svg>
        </a>
        
        <a 
          href="tel:+391234567890" 
          class="border-2 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105 inline-flex items-center"
        >
          Call Now
          <svg class="h-5 w-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
          </svg>
        </a>
      </div>

      <!-- Contact info -->
      <div class="mt-8 opacity-80">
        <p class="text-sm">
          📧 info@tiber365.it | 📞 +39 123 456 7890
        </p>
      </div>
    </div>
  </div>
</section>