---
import BaseLayout from '../../../../layouts/BaseLayout.astro';
import Header from '../../../../components/Header.astro';
import Footer from '../../../../components/Footer.astro';
import { ui, languages, defaultLang } from '../../../../i18n/ui';

const lang = 'en';
const t = ui[lang];
---

<BaseLayout>
  <Header />
  
  <!-- Hero Section -->
  <section class="relative pt-32 pb-20 overflow-hidden">
    <!-- Background elements -->
    <div class="absolute inset-0 -z-10">
      <div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
      <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
    </div>
    
    <!-- Content -->
    <div class="container mx-auto px-4 relative z-10">
      <div class="mb-8">
        <a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
          {t['services.back']}
        </a>
      </div>
      
      <h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
        {t['services.concierge.page.title']}
      </h1>
      
      <p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
        {t['services.concierge.page.description']}
      </p>
    </div>
  </section>

  <!-- Main Content Section -->
  <section class="relative py-16 px-4">
    <div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
    
    <div class="max-w-6xl mx-auto relative z-10">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
        <!-- Left Column: Image -->
        <div class="relative rounded-2xl overflow-hidden h-full min-h-[400px] order-2 md:order-1">
          <div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
          <img src="/assets/concierge-service.jpg" alt="Concierge Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
          <div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
          
          <!-- Contact box -->
          <div class="absolute bottom-0 left-0 right-0 p-8">
            <div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
              <h3 class="text-xl text-silver-light font-semibold mb-4">Elevate Your Guest Experience</h3>
              <p class="text-silver-light/70 text-sm mb-6">Contact us today to learn how our concierge services can enhance your event or venue.</p>
              <a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
                Contact Us
              </a>
            </div>
          </div>
        </div>
        
        <!-- Right Column: Content -->
        <div class="order-1 md:order-2">
          <div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
            <div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
            
            <div class="p-8 md:p-10">
              <p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
                {t['services.concierge.page.content']}
              </p>
              
              <h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.concierge.page.features']}</h3>
              <ul class="space-y-4">
                <li class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature1']}</h4>
                    <p class="text-silver-light/70 text-sm mt-1">Professional welcoming and assistance for all guests.</p>
                  </div>
                </li>
                <li class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature2']}</h4>
                    <p class="text-silver-light/70 text-sm mt-1">Personalized service for high-profile and important guests.</p>
                  </div>
                </li>
                <li class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature3']}</h4>
                    <p class="text-silver-light/70 text-sm mt-1">Arranging transportation and managing arrival/departure logistics.</p>
                  </div>
                </li>
                <li class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature4']}</h4>
                    <p class="text-silver-light/70 text-sm mt-1">Dedicated support for special requests and individual needs.</p>
                  </div>
                </li>
                <li class="flex items-start gap-4">
                  <div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="text-silver-metallic font-medium">{t['services.concierge.page.feature5']}</h4>
                    <p class="text-silver-light/70 text-sm mt-1">Providing guidance on event schedules, venue facilities, and local amenities.</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</BaseLayout> 