<!--

Footer Component -->
<footer class="bg-dark rtl-container" >
<div class="container" >
<div class="row" >
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0" >
<h5 > استكشف</h5 >
<ul class="footer-links" >
<li > <a href="/services" > <i class="bi bi-chevron-left" > </i > كل الخدمات</a > </li >
<li > <a href="/classifieds" > <i class="bi bi-chevron-left" > </i > الإعلانات المبوبة</a > </li >
<li > <a href="/experts" > <i class="bi bi-chevron-left" > </i > خبراء الخدمة</a > </li >
<li > <a href="/jobs" > <i class="bi bi-chevron-left" > </i > وظائف</a > </li >
<li > <a href="/travel" > <i class="bi bi-chevron-left" > </i > استكشاف السفر</a > </li >
<li > <a href="/news" > <i class="bi bi-chevron-left" > </i > الأخبار والمجلات</a > </li >
<li > <a href="/events" > <i class="bi bi-chevron-left" > </i > الفعاليات</a > </li >
<li > <a href="/products" > <i class="bi bi-chevron-left" > </i > المنتجات</a > </li >
</ul >
</div >
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0" >
<h5 > كل الأقسام</h5 >
<ul class="footer-links" >
<li > <a href="/category/real-estate" > <i class="bi bi-chevron-left" > </i > العقارات</a > </li >
<li > <a href="/category/automobiles" > <i class="bi bi-chevron-left" > </i > السيارات</a > </li >
<li > <a href="/category/spa" > <i class="bi bi-chevron-left" > </i > السبا والعناية</a > </li >
<li > <a href="/category/restaurants" > <i class="bi bi-chevron-left" > </i > المطاعم</a > </li >
<li > <a href="/category/technology" > <i class="bi bi-chevron-left" > </i > التكنولوجيا</a > </li >
<li > <a href="/category/education" > <i class="bi bi-chevron-left" > </i > التعليم</a > </li >
<li > <a href="/category/hospitals" > <i class="bi bi-chevron-left" > </i > المستشفيات</a > </li >
<li > <a href="/category/transportation" > <i class="bi bi-chevron-left" > </i > النقل</a > </li >
</ul >
</div >
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0" >
<h5 > أحدث المشروعات</h5 >
<ul class="footer-posts" >
<li >
<a href="/blog/top-health-products" > منتجات صحية رائدة في 2024</a >
<span class="post-date" > 7 أكتوبر 2022</span >
</li >
<li >
<a href="/blog/lovers-day-special" > عروض يوم العشاق</a >
<span class="post-date" > 22 سبتمبر 2022</span >
</li >
<li >
<a href="/blog/dream-destination" > اكتشف وجهتك المثالية</a >
<span class="post-date" > 15 نوفمبر 2021</span >
</li >
<li >
<a href="/blog/best-business-advice" > أفضل النصائح لعملك</a >
<span class="post-date" > 15 نوفمبر 2021</span >
</li >
</ul >
</div >
<div class="col-lg-3 col-md-6" >
<h5 > دعم مجاني</h5 >
<ul class="footer-contact" >
<li > <i class="bi bi-telephone-fill" > </i > +966 55 000 0000</li >
<li > <i class="bi bi-envelope-fill" > </i > info@example.com</li >
<li class="mt-3" >
<h5 class="mb-2" > تواصل معنا</h5 >
<div class="social-icons" >
<a href="#" class="me-2" > <i class="bi bi-facebook" > </i > </a >
<a href="#" class="me-2" > <i class="bi bi-twitter" > </i > </a >
<a href="#" class="me-2" > <i class="bi bi-instagram" > </i > </a >
<a href="#" class="me-2" > <i class="bi bi-linkedin" > </i > </a >
</div >
</li >
</ul >
</div >
</div >

<div class="row footer-middle py-4 mt-4 border-top border-secondary" >
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0" >
<h5 > الأقسام الشائعة</h5 >
<div class="tag-cloud" >
<a href="#" class="tag" > العقارات</a >
<a href="#" class="tag" > المطاعم</a >
<a href="#" class="tag" > السيارات</a >
<a href="#" class="tag" > التكنولوجيا</a >
<a href="#" class="tag" > التعليم</a >
<a href="#" class="tag" > المستشفيات</a >
</div >
</div >
@* <div class="col-lg-9 col-md-6" >
<h5 > تنزيل تطبيقاتنا المجانية</h5 >
<div class="d-flex" >
<a href="#" class="app-download me-3" >
<img src="/assets/img/app-store.png" alt="App Store" height="40" >
</a >
<a href="#" class="app-download" >
<img src="/assets/img/google-play.png" alt="Google Play" height="40" >
</a >
</div >
</div > *@
</div >

<div class="footer-bottom" >
<div class="row align-items-center" >
<div class="col-md-6 text-center text-md-start" >
<p class="mb-0" > @LanguageService.Translate("All Rights Reserved") &copy; @DateTime.Now.Year - شركة أعمال البنية الحديثة للصناعات الخرسانية والطوب الإسمنتي .</p >
</div >
<div class="col-md-6 text-center text-md-end" >
<ul class="footer-bottom-links" >
<li > <a href="/about" > @LanguageService.Translate("About the Site")</a > </li >
<li > <a href="/privacy" > @LanguageService.Translate("Privacy Policy")</a > </li >
<li > <a href="/terms" > @LanguageService.Translate("Terms of Use")</a > </li >
<li > <a href="/contact" > @LanguageService.Translate("Contact Us")</a > </li >
</ul >
</div >
</div >
</div >
</div >
</footer >

<style>
/* Footer Component Styles */
footer {
    background-color: #1d2d3a;
    color: rgba(255,255,255,0.7);
    padding: 4rem 0 0;
}

footer h5 {
    color: white;
    font-size: 16px;
    margin-bottom: 1.5rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 12px;
    text-transform: uppercase;
}

footer h5:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--theme-blue);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--theme-blue);
    text-decoration: none;
    padding-right: 5px;
}

.footer-links a i {
    color: var(--theme-blue);
    font-size: 12px;
    margin-left: 5px;
}

.footer-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-posts li {
    margin-bottom: 15px;
}

.footer-posts a {
    color: rgba(255,255,255,0.7);
    display: block;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.footer-posts a:hover {
    color: var(--theme-blue);
}

.post-date {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.footer-contact i {
    color: var(--theme-blue);
    margin-left: 10px;
    width: 16px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: var(--theme-blue);
    color: white;
    transform: translateY(-3px);
}

.footer-bottom {
    background-color: #172635;
    padding: 1.5rem 0;
    margin-top: 1rem;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}

.footer-bottom-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.footer-bottom-links li {
    margin-left: 20px;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--theme-blue);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.tag:hover {
    background-color: var(--theme-blue);
    color: white;
}

@media (max-width: 768px) {
    .footer-bottom-links {
        justify-content: center;
        margin-top: 15px;
    }

    .footer-bottom-links li {
        margin: 0 10px;
    }
}

/* Comprehensive Mobile Responsiveness Enhancements */
@media (max-width: 992px) {
    /* General mobile adjustments */
    body {
        font-size: 14px;
    }
    
    .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Mobile header adaptations */
    .navbar-brand1 {
        font-size: 1.2rem;
        max-width: 180px;
    }

    /* RTL-specific mobile adjustments */
    .rtl-container {
        text-align: right;
    }

    /* Footer mobile layout improvements */
    footer h5 {
        margin-bottom: 1rem;
        padding-bottom: 8px;
    }

    footer h5:after {
        width: 40px;
    }

    .footer-links li, .footer-posts li, .footer-contact li {
        margin-bottom: 8px;
    }

    /* Mobile navigation enhancements */
    .navbar .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }

    /* Fix touch events for dropdowns on mobile */
    .has-megamenu .dropdown-menu {
        box-shadow: none !important;
        border: none;
        padding: 0 !important;
    }

    .megamenu-section {
        padding: 0.5rem 1rem;
    }

    .megamenu-title {
        font-size: 0.9rem;
        padding-bottom: 5px;
        margin-bottom: 8px;
    }

    .megamenu-list li a {
        padding: 8px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    /* Better mobile padding and spacing */
    .row {
        margin-right: -10px;
        margin-left: -10px;
    }

    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, 
    .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, 
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, 
    .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, 
    .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, 
    .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, 
    .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, 
    .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, 
    .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, 
    .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, 
    .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Specific small mobile device improvements */
@media (max-width: 576px) {
    body {
        font-size: 13px;
    }
    
    .container {
        padding-right: 10px;
        padding-left: 10px;
    }
    
    /* Smaller headings on very small screens */
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.15rem; }
    h5, .h5 { font-size: 1rem; }
    
    /* Adjust button sizes for better touch targets */
    .btn {
        padding: 0.375rem 0.75rem;
    }
    
    /* RTL specific small device fixes */
    .rtl-container .dropdown-menu {
        right: 0;
        left: auto;
    }
    
    /* Stack elements vertically on very small screens */
    .d-flex {
        flex-wrap: wrap;
    }
    
    /* Fix for touch areas - ensure they're large enough for fingers */
    a, button, .nav-link, .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    
    /* Enhance mobile forms */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}
</style>

@code {
    [Inject] BlazorBlog.Services.LanguageService LanguageService

{
    get;
    set;
}

protected override async Task OnInitializedAsync() {
    await LanguageService.InitializeLanguageAsync();
}
}
