@php
    $socialIcons = [
        'facebook' => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.24 0-1.63.772-1.63 1.562V12h2.773l-.443 2.89h-2.33V21.878C18.343 21.128 22 16.991 22 12z"/></svg>',
        'x-twitter' => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.479l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h1.933L7.018 3.242H4.897Z"/></svg>',
        'instagram' => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.17.053 1.805.249 2.458.51c.64.256 1.16.598 1.697 1.134c.537.537.878 1.057 1.134 1.697c.261.653.457 1.288.51 2.458c.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.053 1.17-.249 1.805-.51 2.458c-.256.64-.598 1.16-1.134 1.697c-.537.537-1.057.878-1.697 1.134c-.653.261-1.288.457-2.458.51c-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.17-.053-1.805-.249-2.458-.51c-.64-.256-1.16-.598-1.697-1.134c-.537-.537-.878-1.057-1.134-1.697c-.261-.653-.457-1.288-.51-2.458c-.058-1.266-.07-1.646-.07-4.85s.012-3.584.07-4.85c.053-1.17.249-1.805.51-2.458c.256.64.598-1.16 1.134-1.697c.537.537 1.057.878 1.697 1.134c.653.261 1.288.457 2.458.51c1.266.058 1.646.07 4.85.07zm0-2.163C8.74 0 8.333.014 7.053.072C5.775.132 4.628.36 3.58.85C2.533 1.34 1.67 2.07 1.003 3.003C.336 3.936.1 5.082.042 6.36C-.014 7.64-.028 8.05-.028 12s.014 4.36.072 5.64c.06 1.278.288 2.425.783 3.473c.494 1.047 1.226 1.91 2.16 2.577c.935.666 2.08.9 3.357.958c1.28.058 1.687.072 4.947.072s3.667-.014 4.947-.072c1.278-.06 2.425-.288 3.473-.783c1.047-.494 1.91-1.226 2.577-2.16c.666-.935.9-2.08.958-3.357c.058-1.28.072-1.687.072-4.947s-.014-3.667-.072-4.947c-.06-1.278-.288-2.425-.783-3.473c-.494-1.047-1.226-1.91-2.16-2.577C20.063.336 18.918.1 17.64.042C16.36-.014 15.95-.028 12-.028zM12 5.838a6.162 6.162 0 1 0 0 12.324a6.162 6.162 0 0 0 0-12.324zM12 16.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5s4.5 2.015 4.5 4.5s-2.015 4.5-4.5 4.5zM16.806 5.194a1.44 1.44 0 1 1 0 2.88a1.44 1.44 0 0 1 0-2.88z"/></svg>',
        'linkedin' => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.783 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>',
    ];
@endphp

<style>
    @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

    :root {
        --footer-bg-gradient: #e0e5ec; 
        --footer-text: #4a5568;      
        --footer-text-hover: #6c5ce7; 
        --footer-title: #4a5568;
    }

    .app-footer {
        background: var(--footer-bg-gradient);
        color: var(--footer-text);
        font-family: 'Vazirmatn', sans-serif;
        padding: 5rem 0 2rem;
        direction: rtl;
        margin-top: auto;
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 12px 24px rgba(163, 177, 198, 0.3); 
    }

    .app-footer .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .footer-main {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .footer-column__title {
        color: var(--footer-title);
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 1.75rem;
        position: relative;
        display: inline-block;
    }

    .footer-column__title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: 0;
        width: 30px;
        height: 3px;
        background: #6c5ce7;
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    .footer-column:hover .footer-column__title::after {
        width: 50px;
    }

    .footer-column__links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-column__links li {
        margin-bottom: 1rem;
    }

    .footer-column__links a {
        color: var(--footer-text);
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0.8;
    }

    .footer-column__links a:hover {
        color: var(--footer-text-hover);
        transform: translateX(-5px);
        opacity: 1;
    }

    /* برند و لوگو */
    .footer-brand__logo {
        font-size: 2rem;
        font-weight: 900;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 1rem;
        color: #6c5ce7;
    }

    .footer-brand__address {
        font-size: 0.95rem;
        line-height: 1.8;
        margin-bottom: 2rem;
        opacity: 0.9;
        color: #718096;
    }

    .footer-social {
        display: flex;
        gap: 1rem;
    }

    .footer-social__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: #e0e5ec;
        border-radius: 14px;
        color: #4a5568;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8);
    }

    .footer-social__link svg {
        width: 22px;
        height: 22px;
    }

    .footer-social__link:hover {
        background: #6c5ce7;
        border-color: transparent;
        color: #fff;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
    }

    /* نوار پایین فوتر */
    .footer-bottom-bar {
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .footer-copyright {
        font-size: 0.9rem;
        color: #64748b;
    }

    .footer-legal-links {
        display: flex;
        gap: 2rem;
    }

    .footer-legal-links a {
        color: #94a3b8;
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.2s;
        position: relative;
    }

    .footer-legal-links a:hover {
        color: #fff;
    }
    
    .footer-legal-links a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: -2px;
        left: 0;
        background-color: #00eaff;
        transition: width 0.3s;
    }
    
    .footer-legal-links a:hover::after {
        width: 100%;
    }

    @media (max-width: 992px) {
        .footer-main {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .footer-main {
            grid-template-columns: 1fr;
            gap: 3rem;
            text-align: center;
        }

        .footer-column__title {
            margin-bottom: 1rem;
        }

        .footer-column__title::after {
            right: 50%;
            transform: translateX(50%);
        }
        
        .footer-column__links a {
            justify-content: center;
        }

        .footer-social {
            justify-content: center;
            margin-bottom: 1rem;
        }
        
        .footer-bottom-bar {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }
        
        .footer-legal-links {
            gap: 1rem;
            justify-content: center;
        }
    }
</style>

<footer class="app-footer">
    <div class="container">
        <div class="footer-main">
            
            {{-- ستون برند (راست چین) --}}
            <div class="footer-column footer-column--brand">
                <a href="/" class="footer-brand__logo">{{ config('app.name', 'RamAiWeb') }}</a>
                <p class="footer-brand__address">
                    مشهد، احمدآباد، بلوار رضا<br>
                    ساختمان فناوری اطلاعات
                </p>
                <div class="footer-social">
                    <a href="#" aria-label="Instagram" class="footer-social__link">
                        {!! $socialIcons['instagram'] !!}
                    </a>
                    <a href="#" aria-label="LinkedIn" class="footer-social__link">
                        {!! $socialIcons['linkedin'] !!}
                    </a>
                    <a href="#" aria-label="X (Twitter)" class="footer-social__link">
                        {!! $socialIcons['x-twitter'] !!}
                    </a>
                    <a href="#" aria-label="Facebook" class="footer-social__link">
                        {!! $socialIcons['facebook'] !!}
                    </a>
                </div>
            </div>

            {{-- ستون دسترسی سریع --}}
            <div class="footer-column">
                <h4 class="footer-column__title">{{ __('menu.about_us') }}</h4>
                <ul class="footer-column__links">
                    <li><a href="#">{{ __('menu.our_story') }}</a></li>
                    <li><a href="#">{{ __('menu.careers') }}</a></li>
                    <li><a href="#">{{ __('menu.press_news') }}</a></li>
                    <li><a href="#">{{ __('menu.blog') }}</a></li>
                </ul>
            </div>

            {{-- ستون منابع --}}
            <div class="footer-column">
                <h4 class="footer-column__title">{{ __('menu.resources') }}</h4>
                <ul class="footer-column__links">
                    <li><a href="#">{{ __('menu.articles') }}</a></li>
                    <li><a href="#">{{ __('menu.product_instructions') }}</a></li>
                    <li><a href="#">{{ __('menu.sds') }}</a></li>
                    <li><a href="#">{{ __('menu.online_courses') }}</a></li>
                </ul>
            </div>

            {{-- ستون تماس --}}
            <div class="footer-column">
                <h4 class="footer-column__title">{{ __('menu.contact_us') }}</h4>
                <ul class="footer-column__links">
                    <li><a href="#">{{ __('menu.support') }}</a></li>
                    <li><a href="#">{{ __('menu.faq') }}</a></li>
                    <li><a href="#">{{ __('menu.locations') }}</a></li>
                    <li style="direction: ltr; justify-content: flex-end;">
                        <a href="tel:+989123456789" style="font-weight: 700; color: #fff;">0912 345 6789</a>
                    </li>
                    <li style="direction: ltr; justify-content: flex-end;">
                        <a href="mailto:support@example.com">support@ramai.ir</a>
                    </li>
                </ul>
            </div>

        </div>

        <div class="footer-bottom-bar">
            <div class="footer-copyright">
                &copy; {{ date('Y') }} {{ config('app.name') }}. {{ __('menu.all_rights_reserved') }}
            </div>
            <nav class="footer-legal-links">
                <a href="#">{{ __('menu.privacy_policy') }}</a>
                <a href="#">{{ __('menu.terms_conditions') }}</a>
            </nav>
        </div>
    </div>
</footer>