<footer class="professional-footer" style="background: linear-gradient(135deg, #2c3e50, #1a1a1a); color: #fff; padding: 50px 0 0; margin-top: 60px; font-family: 'Tajawal', sans-serif; border-top: 4px solid #7c3aed;">
    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div class="footer-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px;">
            
            <!-- قسم المعلومات -->
            <div class="footer-info">
                <div style="display: flex; align-items: center; margin-bottom: 20px;">
                    <img src="/dalelapp/assets/images/logo.png" alt="شعار دليل" style="height: 50px; margin-left: 10px;">
                    <h2 style="font-size: 22px; font-weight: 700; margin: 0;">دليل الشركات</h2>
                </div>
                <p style="line-height: 1.8; font-size: 15px; opacity: 0.9; margin-bottom: 20px;">
                    المنصة الرائدة لاكتشاف أفضل الشركات والخدمات في المملكة العربية السعودية. نوفر لك أحدث المعلومات ووسائل التواصل المباشرة.
                </p>
                <div class="social-icons" style="display: flex; gap: 15px;">
                    <a href="#" style="color: #fff; background: #1da1f2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"><i class="fab fa-twitter"></i></a>
                    <a href="#" style="color: #fff; background: #1877f2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" style="color: #fff; background: #e1306c; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"><i class="fab fa-instagram"></i></a>
                    <a href="#" style="color: #fff; background: #0a66c2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s;"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <!-- روابط سريعة -->
            <div class="footer-links">
                <h3 style="font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px;">
                    <span style="position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background: #7c3aed;"></span>
                    روابط سريعة
                </h3>
                <ul style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                    <li><a href="/dalelapp/index.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> الرئيسية</a></li>
                    <li><a href="/dalelapp/search.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> الشركات</a></li>
                    <li><a href="/dalelapp/register.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> سجل شركتك</a></li>
                    <li><a href="/dalelapp/offers.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> العروض</a></li>
                    <li><a href="/dalelapp/categories.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> الأقسام</a></li>
                    <li><a href="/dalelapp/contact.php" style="color: #ddd; text-decoration: none; transition: all 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px;"><i class="fas fa-chevron-left" style="font-size: 12px; color: #7c3aed;"></i> تواصل معنا</a></li>
                </ul>
            </div>
            
            <!-- معلومات التواصل -->
            <div class="footer-contact">
                <h3 style="font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px;">
                    <span style="position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background: #7c3aed;"></span>
                    تواصل معنا
                </h3>
                <ul style="list-style: none; padding: 0; margin: 0;">
                    <li style="margin-bottom: 15px; display: flex; align-items: flex-start; gap: 12px;">
                        <div style="background: #7c3aed; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-map-marker-alt" style="color: #fff; font-size: 14px;"></i>
                        </div>
                        <div>
                            <h4 style="margin: 0 0 5px 0; font-size: 15px;">العنوان</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.9;">المملكة العربية السعودية</p>
                        </div>
                    </li>
                    <li style="margin-bottom: 15px; display: flex; align-items: flex-start; gap: 12px;">
                        <div style="background: #7c3aed; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-envelope" style="color: #fff; font-size: 14px;"></i>
                        </div>
                        <div>
                            <h4 style="margin: 0 0 5px 0; font-size: 15px;">البريد الإلكتروني</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.9;">info@dalelapp.com</p>
                        </div>
                    </li>
                    <li style="margin-bottom: 15px; display: flex; align-items: flex-start; gap: 12px;">
                        <div style="background: #7c3aed; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-phone-alt" style="color: #fff; font-size: 14px;"></i>
                        </div>
                        <div>
                            <h4 style="margin: 0 0 5px 0; font-size: 15px;">الهاتف</h4>
                            <p style="margin: 0; font-size: 14px; opacity: 0.9;">+966 50 000 0000</p>
                        </div>
                    </li>
                    <li style="display: flex; align-items: flex-start; gap: 12px;">
                        <div style="background: #7c3aed; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fab fa-whatsapp" style="color: #fff; font-size: 16px;"></i>
                        </div>
                        <div>
                            <h4 style="margin: 0 0 5px 0; font-size: 15px;">واتساب</h4>
                            <a href="https://wa.me/966500000000" target="_blank" style="color: #25d366; text-decoration: none; font-size: 14px;">راسلنا مباشرة</a>
                        </div>
                    </li>
                </ul>
            </div>
            
            <!-- النشرة البريدية -->
            <div class="footer-newsletter">
                <h3 style="font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px;">
                    <span style="position: absolute; bottom: 0; right: 0; width: 50px; height: 2px; background: #7c3aed;"></span>
                    اشترك بالنشرة البريدية
                </h3>
                <p style="line-height: 1.7; font-size: 14px; opacity: 0.9; margin-bottom: 20px;">
                    اشترك ليصلك كل جديد عن العروض والشركات المميزة مباشرة إلى بريدك الإلكتروني
                </p>
                <form style="display: flex; gap: 10px;">
                    <input type="email" placeholder="بريدك الإلكتروني" style="flex: 1; padding: 12px 15px; border: none; border-radius: 6px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px;">
                    <button type="submit" style="background: #7c3aed; color: #fff; border: none; border-radius: 6px; padding: 0 20px; cursor: pointer; font-weight: 600; transition: all 0.3s;">اشترك</button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- حقوق النشر -->
    <div class="footer-copyright" style="background: rgba(0,0,0,0.2); padding: 20px 0; text-align: center;">
        <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px; font-size: 14px;">
            <p style="margin: 0; opacity: 0.8;">
                جميع الحقوق محفوظة &copy; <span id="current-year"><?= date('Y') ?></span> دليل الشركات التجارية. 
                <span style="margin: 0 10px;">|</span>
                <a href="/privacy" style="color: #ddd; text-decoration: none;">سياسة الخصوصية</a>
                <span style="margin: 0 10px;">|</span>
                <a href="/terms" style="color: #ddd; text-decoration: none;">شروط الاستخدام</a>
            </p>
        </div>
    </div>
</footer>

<!-- تأثيرات الهافر -->
<style>
    .professional-footer a:hover {
        color: #7c3aed !important;
    }
    
    .professional-footer .social-icons a:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    
    .professional-footer button:hover {
        background: #6a2cd6 !important;
    }
    
    .professional-footer input:focus {
        outline: none;
        background: rgba(255,255,255,0.2) !important;
    }
</style>

<!-- جافاسكريبت للسنة الحالية -->
<script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
</script>