---
import { getLangFromUrl, useTranslations } from '../i18n/ui';
import { Building, Zap, FileText, Shield, Users, CheckCircle } from 'lucide-astro';

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

const services = [
  {
    icon: Building,
    title: t('services.architectural.title'),
    description: t('services.architectural.description'),
    features: [
      lang === 'ar' ? 'مخططات معمارية مبدئية ونهائية' : 'Preliminary and final architectural plans',
      lang === 'ar' ? 'تصميم الواجهات والمقاطع' : 'Facade and section design',
      lang === 'ar' ? 'الالتزام بكود البناء المحلي' : 'Compliance with local building codes'
    ]
  },
  {
    icon: Shield,
    title: t('services.structural.title'),
    description: t('services.structural.description'),
    features: [
      lang === 'ar' ? 'تحليل إنشائي متكامل' : 'Comprehensive structural analysis',
      lang === 'ar' ? 'مخططات حديد التسليح' : 'Reinforcement steel plans',
      lang === 'ar' ? 'التوافق مع شروط السلامة' : 'Compliance with safety requirements'
    ]
  },
  {
    icon: Zap,
    title: t('services.mep.title'),
    description: t('services.mep.description'),
    features: [
      lang === 'ar' ? 'أنظمة الكهرباء والإنارة' : 'Electrical and lighting systems',
      lang === 'ar' ? 'التكييف والتهوية' : 'HVAC and ventilation',
      lang === 'ar' ? 'المياه والصرف الصحي' : 'Water and drainage systems'
    ]
  },
  {
    icon: FileText,
    title: t('services.permit.title'),
    description: t('services.permit.description'),
    features: [
      lang === 'ar' ? 'تجهيز ملف المشروع' : 'Project file preparation',
      lang === 'ar' ? 'التقديم الإلكتروني' : 'Electronic submission',
      lang === 'ar' ? 'متابعة الإجراءات' : 'Procedure follow-up'
    ]
  },
  {
    icon: Users,
    title: t('services.supervision.title'),
    description: t('services.supervision.description'),
    features: [
      lang === 'ar' ? 'زيارات ميدانية دورية' : 'Regular site visits',
      lang === 'ar' ? 'تقارير إشراف' : 'Supervision reports',
      lang === 'ar' ? 'مراجعة المخططات' : 'Plan reviews'
    ]
  },
  {
    icon: CheckCircle,
    title: t('services.completion.title'),
    description: t('services.completion.description'),
    features: [
      lang === 'ar' ? 'مخططات As Built' : 'As-built drawings',
      lang === 'ar' ? 'شهادة الإنجاز' : 'Completion certificate',
      lang === 'ar' ? 'اعتماد الجهات الرسمية' : 'Official authority approval'
    ]
  }
];
---

<section id="services" class="section-padding bg-white dark:bg-blueprint-primary">
  <div class="container-custom">
    <!-- Section Header -->
    <div class="text-center mb-16" data-aos="fade-up">
      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
        {t('services.title')}
      </h2>
      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-3xl mx-auto">
        {t('services.description')}
      </p>
    </div>

    <!-- Services Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {services.map((service, index) => (
        <div 
          class="group bg-blueprint-light dark:bg-blueprint-primary/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-transparent hover:border-blueprint-accent/30"
          data-aos="fade-up"
          data-aos-delay={index * 100}
        >
          <!-- Icon -->
          <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent/20 rounded-xl mb-6 group-hover:bg-blueprint-accent group-hover:text-white transition-all duration-300">
            <service.icon class="w-8 h-8 text-blueprint-accent group-hover:text-white transition-colors duration-300" />
          </div>

          <!-- Title -->
          <h3 class="text-2xl font-bold text-blueprint-primary dark:text-white mb-4 group-hover:text-blueprint-accent transition-colors duration-300">
            {service.title}
          </h3>

          <!-- Description -->
          <p class="text-blueprint-dark dark:text-blueprint-light mb-6 leading-relaxed">
            {service.description}
          </p>

          <!-- Features -->
          <ul class="space-y-2">
            {service.features.map((feature) => (
              <li class="flex items-start space-x-2 rtl:space-x-reverse text-sm text-blueprint-dark dark:text-blueprint-light">
                <CheckCircle class="w-4 h-4 text-blueprint-accent mt-0.5 flex-shrink-0" />
                <span>{feature}</span>
              </li>
            ))}
          </ul>

          <!-- Hover Effect -->
          <div class="absolute inset-0 bg-gradient-to-r from-blueprint-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
        </div>
      ))}
    </div>

    <!-- CTA Section -->
    <div class="text-center mt-16" data-aos="fade-up" data-aos-delay="600">
      <p class="text-lg text-blueprint-dark dark:text-blueprint-light mb-8">
        {t('services.cta.question')}
      </p>
      <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse">
        <span>{t('services.cta.button')}</span>
      </a>
    </div>
  </div>
</section>