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

// Get language from the URL
export async function getStaticPaths() {
  return Object.keys(languages).map(lang => {
    return { params: { lang } };
  });
}

const { lang = defaultLang } = Astro.params;
const t = ui[lang as keyof typeof ui];

// Get translations needed for multiple sections
const phone = t['phone'];

const services = [
  {
    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 11c0-1.657-1.343-3-3-3s-3 1.343-3 3 1.343 3 3 3 3-1.343 3-3zm0 0c0-1.657 1.343-3 3-3s3 1.343 3 3-1.343 3-3 3-3-1.343-3-3z" /></svg>',
    title: t['services.security.title'],
    description: t['services.security.description'],
    link: `/${lang}/services/security/`
  },
  {
    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>',
    title: t['services.concierge.title'],
    description: t['services.concierge.description'],
    link: `/${lang}/services/concierge/`
  },
  {
    icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>',
    title: t['services.food.title'],
    description: t['services.food.description'],
    link: `/${lang}/services/food/`
  },
];

const testimonials = [
  { quote: 'JPM provided exceptional service and peace of mind at our event.', author: 'A.B., Event Manager' },
  { quote: 'Professional, discreet, and always dependable.', author: 'C.D., Private Client' },
  { quote: 'Their concierge team made our guests feel truly welcome.', author: 'E.F., Venue Director' },
];
---
<BaseLayout>
  <Header />
  
  <!-- Hero Section -->
  <section class="relative min-h-[80vh] flex flex-col items-center justify-center py-20 overflow-hidden">
    <!-- Background elements -->
    <div class="absolute inset-0 -z-20">
      <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>
    
    <!-- Logo watermark -->
    <div class="absolute inset-0 -z-10 flex items-center justify-center opacity-10 pointer-events-none select-none">
      <img src="/Logo.png" alt="JPM Logo" class="w-[40rem] h-[40rem] object-contain mx-auto" loading="eager" />
    </div>
    
    <!-- Blur overlay for text readability -->
    <div class="absolute inset-0 -z-5 backdrop-blur-[2px] bg-black-deep/30 pointer-events-none"></div>
    
    <!-- Animated lines -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/30 to-transparent"></div>
      <div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-silver-metallic/30 to-transparent"></div>
    </div>
    
    <!-- Content -->
    <div class="container mx-auto px-4 text-center relative z-10">
      <h1 class="text-5xl md:text-7xl font-extrabold mb-6">
        <span class="block text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light drop-shadow-xl">
          {t['hero.tagline']}
        </span>
      </h1>
      
      <p class="text-xl md:text-2xl text-silver-light/90 mb-10 max-w-3xl mx-auto leading-relaxed">
        {t['hero.subtitle']}
      </p>
      
      <a href="#services" class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-semibold px-8 py-3 rounded-full shadow-2xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px]">
        {t['hero.cta']}
      </a>
    </div>
    
    <!-- Scroll indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center">
      <span class="text-silver-light/50 text-sm mb-2">{t['hero.scroll']}</span>
      <div class="w-0.5 h-10 bg-gradient-to-b from-silver-metallic/50 to-transparent animate-pulse"></div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="relative py-24 px-4 bg-gradient-to-b from-black-deep to-black-medium">
    <div class="absolute inset-0 bg-[url('/assets/grid-pattern.svg')] opacity-5"></div>
    
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['services.title']}</span>
        <h2 class="text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['services.heading']}</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
        {services.map(service => (
          <ServiceCard 
            icon={service.icon} 
            title={service.title} 
            description={service.description} 
            link={service.link}
          />
        ))}
      </div>
    </div>
  </section>

  <!-- About Us Section -->
  <section id="about" class="relative py-24 px-4">
    <div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
    <div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-accent-blue/5 to-transparent"></div>
    
    <div class="max-w-4xl mx-auto relative z-10">
      <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">
        <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-10 md:p-12">
          <span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['about.label']}</span>
          <h2 class="text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['about.title']}</h2>
          
          <p class="text-lg text-silver-light/80 mb-6 leading-relaxed">
            {t['about.content']}
          </p>
          
          <div class="mt-8">
            <h3 class="text-silver-light text-lg font-medium mb-4">{t['about.values']}</h3>
            <ul class="flex flex-wrap gap-4">
              <li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
                <span class="w-2 h-2 bg-accent-gold rounded-full"></span>
                {t['about.value1']}
              </li>
              <li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
                <span class="w-2 h-2 bg-accent-gold rounded-full"></span>
                {t['about.value2']}
              </li>
              <li class="bg-gradient-to-r from-black-deep to-black-medium border border-silver-dark/30 rounded-full px-6 py-2 text-silver-metallic text-sm font-medium flex items-center gap-2">
                <span class="w-2 h-2 bg-accent-gold rounded-full"></span>
                {t['about.value3']}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section id="testimonials" class="relative py-24 px-4 bg-gradient-to-b from-black-medium to-black-deep">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-accent-blue/5 to-transparent"></div>
    
    <div class="max-w-7xl mx-auto relative z-10">
      <div class="text-center mb-16">
        <span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['testimonials.label']}</span>
        <h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['testimonials.title']}</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        {testimonials.map((t, i) => (
          <div class="backdrop-blur-sm bg-gradient-to-br from-black-deep/80 to-black-medium/80 border-l-2 border-accent-gold/50 rounded-lg p-8 shadow-xl">
            <svg class="w-8 h-8 text-accent-gold/30 mb-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804 .167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"></path>
            </svg>
            <p class="text-silver-light/90 text-lg italic mb-6 leading-relaxed">"{t.quote}"</p>
            <div class="flex items-center justify-between">
              <div class="text-silver-dark text-sm font-medium">— {t.author}</div>
              <div class="flex">
                {Array(5).fill(0).map((_, idx) => (
                  <svg class={`w-4 h-4 ${idx < 5 ? 'text-accent-gold' : 'text-silver-dark/30'}`} fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                  </svg>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="relative py-24 px-4 bg-gradient-to-b from-black-deep to-black-medium">
    <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 class="max-w-4xl mx-auto relative z-10">
      <div class="text-center mb-12">
        <span class="inline-block text-accent-gold text-sm font-medium tracking-wider uppercase mb-3">{t['contact.label']}</span>
        <h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">{t['contact.title']}</h2>
        <div class="w-24 h-1 bg-gradient-to-r from-silver-dark to-transparent rounded mx-auto"></div>
      </div>
      
      <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">
        <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-10 md:p-12">
          <div class="flex flex-col md:flex-row gap-10 items-start justify-between">
            <div class="md:w-1/2">
              <h3 class="text-xl text-silver-light font-semibold mb-4">{t['contact.info.title']}</h3>
              <div class="space-y-4">
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <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>
                  </div>
                  <span class="text-silver-light/80">{phone}</span>
                </div>
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <span class="text-silver-light/80">{t['contact.email']}</span>
                </div>
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 rounded-full bg-black-deep border border-silver-dark/30 flex items-center justify-center text-accent-gold">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                  </div>
                  <span class="text-silver-light/80">{t['contact.address']}</span>
                </div>
              </div>
            </div>
            
            <div class="md:w-1/2">
              <h3 class="text-xl text-silver-light font-semibold mb-4">{t['contact.message.title']}</h3>
              <p class="text-silver-light/80 mb-6">{t['contact.message.prompt']}</p>
              <div class="space-y-4">
                <button class="w-full bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-semibold px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px]">
                  {t['contact.button']}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</BaseLayout> 