src/components/Contact.astro

---
import { getLangFromUrl, useTranslations } from '../i18n/ui';
import { MapPin, Phone, Mail, MessageCircle, Clock } from 'lucide-astro';

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

<section id="contact" 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('contact.title')}
      </h2>
      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-3xl mx-auto">
        {t('contact.description')}
      </p>
    </div>

    <!-- Contact Information - Full Width -->
    <div class="max-w-4xl mx-auto" data-aos="fade-up">
      <h3 class="text-3xl font-bold text-blueprint-primary dark:text-white mb-12 text-center">
        {t('contact.info.title')}
      </h3>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <!-- Address -->
        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
            <MapPin class="w-6 h-6 text-blueprint-accent" />
          </div>
          <div>
            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
              {t('contact.address.title')}
            </h4>
            <p class="text-blueprint-dark dark:text-blueprint-light leading-relaxed" set:html={t('contact.address.text')}></p>
            <a 
              href="https://maps.app.goo.gl/Xys7qA59S2tpJPWS9" 
              target="_blank"
              class="inline-flex items-center text-blueprint-accent hover:text-blueprint-accent/80 transition-colors duration-300 mt-2"
            >
              {t('contact.address.map')}
            </a>
          </div>
        </div>

        <!-- Phone -->
        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
            <Phone class="w-6 h-6 text-blueprint-accent" />
          </div>
          <div>
            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
              {t('contact.phone.title')}
            </h4>
            <a 
              href="tel:+971501611234" 
              class="text-blueprint-dark dark:text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 text-lg block"
            >
              +971 50 161 1234
            </a>
            <p class="text-sm text-blueprint-dark dark:text-blueprint-light mt-1">
              {t('contact.phone.note')}
            </p>
          </div>
        </div>

        <!-- Email -->
        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
            <Mail class="w-6 h-6 text-blueprint-accent" />
          </div>
          <div>
            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
              {t('contact.email.title')}
            </h4>
            <a 
              href="mailto:blueprintrak@gmail.com" 
              class="text-blueprint-dark dark:text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 text-lg break-all"
            >
              blueprintrak@gmail.com
            </a>
          </div>
        </div>

        <!-- Working Hours -->
        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
            <Clock class="w-6 h-6 text-blueprint-accent" />
          </div>
          <div class="flex-1">
            <h4 class="font-bold text-blueprint-primary dark:text-white mb-4">
              {t('contact.hours.title')}
            </h4>
            
            <!-- Working Hours Schedule -->
            <div class="space-y-3">
              <!-- Sunday to Thursday -->
              <div>
                <div class="font-semibold text-blueprint-primary dark:text-white mb-1">
                  {lang === 'ar' ? 'الأحد - الخميس' : 'Sunday - Thursday'}
                </div>
                <div class="space-y-1 text-sm">
                  <div class="flex items-center justify-between">
                    <span class="text-blueprint-dark dark:text-blueprint-light">
                      {lang === 'ar' ? 'الفترة الصباحية' : 'Morning'}
                    </span>
                    <span class="font-medium text-blueprint-accent">08:00 - 14:00</span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-blueprint-dark dark:text-blueprint-light">
                      {lang === 'ar' ? 'الفترة المسائية' : 'Evening'}
                    </span>
                    <span class="font-medium text-blueprint-accent">17:00 - 20:30</span>
                  </div>
                </div>
              </div>

              <!-- Friday -->
              <div class="pt-2 border-t border-blueprint-accent/10">
                <div class="flex items-center justify-between">
                  <span class="font-semibold text-blueprint-primary dark:text-white">
                    {lang === 'ar' ? 'الجمعة' : 'Friday'}
                  </span>
                  <span class="font-medium text-blueprint-accent">08:00 - 12:00</span>
                </div>
              </div>

              <!-- Saturday -->
              <div class="pt-2 border-t border-blueprint-accent/10">
                <div class="text-center">
                  <span class="text-blueprint-dark dark:text-blueprint-light text-sm">
                    {lang === 'ar' ? 'السبت: عطلة' : 'Saturday: Closed'}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- WhatsApp CTA - Centered -->
      <div class="max-w-2xl mx-auto">
        <div class="p-8 bg-green-50 dark:bg-green-900/20 rounded-2xl border border-green-200 dark:border-green-800 text-center">
          <div class="flex items-center justify-center mb-6">
            <div class="flex items-center justify-center w-16 h-16 bg-green-500 rounded-full">
              <MessageCircle class="w-8 h-8 text-white" />
            </div>
          </div>
          <h4 class="text-2xl font-bold text-green-800 dark:text-green-300 mb-3">
            {t('contact.whatsapp.title')}
          </h4>
          <p class="text-green-700 dark:text-green-400 mb-6 text-lg">
            {t('contact.whatsapp.description')}
          </p>
          <a 
            href="https://wa.me/971501611234?text=استشارة" 
            target="_blank"
            class="inline-flex items-center bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-lg font-semibold transition-colors duration-300 text-lg"
          >
            <MessageCircle class="w-6 h-6 mr-3" />
            {t('contact.whatsapp.button')}
          </a>
        </div>
      </div>
    </div>
  </div>
</section>