@extends('layouts.app')

@section('title', 'الشركاء والرعاة - ايوان')

@section('styles')
<style>
    .partners-hero {
        background: linear-gradient(rgba(30, 58, 95, 0.9), rgba(44, 95, 65, 0.9)), 
                    url('/images/design/calligraphy-1.jpg') center/cover;
        padding: 6rem 0 4rem;
        position: relative;
        overflow: hidden;
    }

    .partners-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="partners-pattern" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><polygon points="12.5,5 20,12.5 12.5,20 5,12.5" fill="%23d4af37" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23partners-pattern)"/></svg>');
    }

    .partner-category {
        margin-bottom: 4rem;
    }

    .category-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .category-title {
        font-family: 'Amiri', serif;
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
    }

    .category-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--secondary-color);
        border-radius: 2px;
    }

    .category-description {
        color: #666;
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .partner-card {
        background: white;
        border-radius: 20px;
        padding: 3rem 2rem;
        text-align: center;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        transition: all 0.4s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .partner-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    }

    .partner-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    }

    .partner-logo {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, var(--secondary-color), #b8941f);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem;
        color: var(--primary-color);
        font-size: 3.5rem;
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
        transition: all 0.3s ease;
    }

    .partner-card:hover .partner-logo {
        transform: scale(1.1);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
    }

    .partner-name {
        font-family: 'Amiri', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .partner-role {
        color: var(--secondary-color);
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .partner-description {
        color: #666;
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    .partner-contributions {
        background: #f8f9fa;
        border-radius: 15px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .partner-contributions h6 {
        color: var(--primary-color);
        margin-bottom: 1rem;
        font-weight: 700;
    }

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

    .contributions-list li {
        background: white;
        margin-bottom: 0.5rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border-right: 3px solid var(--secondary-color);
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .contributions-list li:hover {
        background: var(--light-gold);
        transform: translateX(-5px);
    }

    .contributions-list li::before {
        content: '✓';
        color: var(--accent-color);
        font-weight: bold;
        margin-left: 0.5rem;
    }

    .partner-contact {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .contact-btn {
        background: var(--secondary-color);
        color: var(--primary-color);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
    }

    .contact-btn:hover {
        background: #b8941f;
        color: var(--primary-color);
        transform: translateY(-2px);
        text-decoration: none;
    }

    .main-sponsor {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border: 3px solid var(--secondary-color);
        position: relative;
    }

    .main-sponsor::after {
        content: 'الراعي الرسمي';
        position: absolute;
        top: -15px;
        right: 20px;
        background: var(--secondary-color);
        color: var(--primary-color);
        padding: 0.5rem 1rem;
        border-radius: 15px;
        font-weight: 700;
        font-size: 0.8rem;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    }

    .strategic-partner {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border: 3px solid #2196f3;
        position: relative;
    }

    .strategic-partner::after {
        content: 'شريك استراتيجي';
        position: absolute;
        top: -15px;
        right: 20px;
        background: #2196f3;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 15px;
        font-weight: 700;
        font-size: 0.8rem;
        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    .innovation-partner {
        background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
        border: 3px solid #4caf50;
        position: relative;
    }

    .innovation-partner::after {
        content: 'شريك الابتكار';
        position: absolute;
        top: -15px;
        right: 20px;
        background: #4caf50;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 15px;
        font-weight: 700;
        font-size: 0.8rem;
        box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    }

    .design-partner {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        border: 3px solid #ff9800;
        position: relative;
    }

    .design-partner::after {
        content: 'شريك التصميم';
        position: absolute;
        top: -15px;
        right: 20px;
        background: #ff9800;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 15px;
        font-weight: 700;
        font-size: 0.8rem;
        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    }

    .partnership-benefits {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-blue) 100%);
        color: white;
        padding: 4rem 0;
        margin: 4rem 0;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    .partnership-benefits::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="benefits-pattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="%23d4af37" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23benefits-pattern)"/></svg>');
    }

    .benefits-content {
        position: relative;
        z-index: 2;
    }

    .benefit-item {
        background: rgba(255,255,255,0.1);
        border-radius: 15px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .benefit-item:hover {
        background: rgba(255,255,255,0.2);
        transform: translateY(-5px);
    }

    .benefit-icon {
        width: 80px;
        height: 80px;
        background: var(--secondary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        color: var(--primary-color);
        font-size: 2.5rem;
    }

    .benefit-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .become-partner-cta {
        background: linear-gradient(135deg, var(--secondary-color) 0%, #b8941f 100%);
        color: var(--primary-color);
        padding: 4rem 0;
        border-radius: 20px;
        text-align: center;
        margin: 4rem 0;
    }

    .cta-title {
        font-family: 'Amiri', serif;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .cta-description {
        font-size: 1.2rem;
        margin-bottom: 2.5rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-button {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 1rem 2.5rem;
        border-radius: 30px;
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(30, 58, 95, 0.3);
    }

    .cta-button:hover {
        background: var(--dark-blue);
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(30, 58, 95, 0.4);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .partners-hero {
            padding: 4rem 0 2rem;
        }
        
        .partner-card {
            padding: 2rem 1.5rem;
            margin-bottom: 2rem;
        }
        
        .partner-logo {
            width: 100px;
            height: 100px;
            font-size: 3rem;
        }
        
        .category-title {
            font-size: 2rem;
        }
        
        .partner-contact {
            flex-direction: column;
            align-items: center;
        }
        
        .benefit-item {
            padding: 1.5rem;
        }
        
        .cta-title {
            font-size: 2rem;
        }
    }
</style>
@endsection

@section('content')
<!-- Partners Hero -->
<section class="partners-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center text-white">
                <h1 class="display-3 fw-bold mb-4 fade-in">الشركاء والرعاة</h1>
                <p class="lead mb-4 fade-in">شراكات استراتيجية تجمع بين القطاعين العام والخاص لخدمة بيوت الله</p>
                <div class="d-flex justify-content-center gap-4 text-center">
                    <div>
                        <div class="h2 fw-bold text-warning">4</div>
                        <small>شركاء رئيسيين</small>
                    </div>
                    <div>
                        <div class="h2 fw-bold text-warning">15+</div>
                        <small>شريك داعم</small>
                    </div>
                    <div>
                        <div class="h2 fw-bold text-warning">50+</div>
                        <small>عارض مشارك</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Sponsor -->
<section class="py-5">
    <div class="container">
        <div class="partner-category">
            <div class="category-header">
                <h2 class="category-title">الراعي الرسمي</h2>
                <p class="category-description">
                    الجهة الحكومية الرسمية التي تشرف على تنظيم المعرض وتقدم الدعم الكامل لإنجاحه
                </p>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="partner-card main-sponsor">
                        <div class="partner-logo">
                            <i class="fas fa-mosque"></i>
                        </div>
                        <h3 class="partner-name">وزارة الشؤون الإسلامية والدعوة والإرشاد</h3>
                        <div class="partner-role">الراعي الرسمي</div>
                        <p class="partner-description">
                            تتولى وزارة الشؤون الإسلامية والدعوة والإرشاد الإشراف العام على المعرض، وتقدم الدعم الكامل 
                            لضمان تحقيق أهدافه في تطوير وتحسين تجهيزات المساجد في المملكة والعالم الإسلامي.
                        </p>
                        <div class="partner-contributions">
                            <h6>مساهمات الوزارة:</h6>
                            <ul class="contributions-list">
                                <li>الإشراف العام على تنظيم المعرض</li>
                                <li>توفير الدعم اللوجستي والتنظيمي</li>
                                <li>استضافة الخبراء والمتخصصين</li>
                                <li>تقديم الاستشارات الشرعية والفنية</li>
                                <li>التنسيق مع الجهات الحكومية ذات العلاقة</li>
                                <li>نشر التوعية حول أهمية المعرض</li>
                            </ul>
                        </div>
                        <div class="partner-contact">
                            <a href="#" class="contact-btn">
                                <i class="fas fa-globe"></i>
                                الموقع الرسمي
                            </a>
                            <a href="#" class="contact-btn">
                                <i class="fas fa-envelope"></i>
                                تواصل معنا
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Strategic Partners -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="partner-category">
            <div class="category-header">
                <h2 class="category-title">الشركاء الاستراتيجيون</h2>
                <p class="category-description">
                    شركات رائدة تقدم الدعم التقني والمالي والخبرات المتخصصة لإنجاح المعرض
                </p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="partner-card strategic-partner">
                        <div class="partner-logo">
                            <i class="fas fa-industry"></i>
                        </div>
                        <h3 class="partner-name">شركة سابك</h3>
                        <div class="partner-role">الشريك الاستراتيجي</div>
                        <p class="partner-description">
                            شركة سابك العالمية تساهم في المعرض من خلال تقديم الحلول المبتكرة في مجال المواد 
                            والتقنيات المتقدمة لتجهيز المساجد.
                        </p>
                        <div class="partner-contributions">
                            <h6>مساهمات سابك:</h6>
                            <ul class="contributions-list">
                                <li>توفير مواد البناء المتطورة</li>
                                <li>حلول العزل الحراري والصوتي</li>
                                <li>تقنيات الاستدامة البيئية</li>
                                <li>الدعم التقني والاستشاري</li>
                            </ul>
                        </div>
                        <div class="partner-contact">
                            <a href="#" class="contact-btn">
                                <i class="fas fa-globe"></i>
                                الموقع
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="partner-card innovation-partner">
                        <div class="partner-logo">
                            <i class="fas fa-oil-can"></i>
                        </div>
                        <h3 class="partner-name">أرامكو السعودية</h3>
                        <div class="partner-role">شريك الابتكار</div>
                        <p class="partner-description">
                            أرامكو السعودية تقود مبادرات الطاقة المتجددة والاستدامة في المعرض، وتقدم الحلول 
                            المبتكرة لتوفير الطاقة في المساجد.
                        </p>
                        <div class="partner-contributions">
                            <h6>مساهمات أرامكو:</h6>
                            <ul class="contributions-list">
                                <li>حلول الطاقة المتجددة</li>
                                <li>أنظمة الطاقة الشمسية</li>
                                <li>تقنيات توفير الطاقة</li>
                                <li>الاستشارات البيئية</li>
                            </ul>
                        </div>
                        <div class="partner-contact">
                            <a href="#" class="contact-btn">
                                <i class="fas fa-globe"></i>
                                الموقع
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="partner-card design-partner">
                        <div class="partner-logo">
                            <i class="fas fa-drafting-compass"></i>
                        </div>
                        <h3 class="partner-name">هيئة فنون العمارة والتصميم</h3>
                        <div class="partner-role">شريك التصميم</div>
                        <p class="partner-description">
                            هيئة فنون العمارة والتصميم تساهم في تطوير المعايير التصميمية والمعمارية للمساجد 
                            وفق أحدث الاتجاهات العالمية.
                        </p>
                        <div class="partner-contributions">
                            <h6>مساهمات الهيئة:</h6>
                            <ul class="contributions-list">
                                <li>معايير التصميم المعماري</li>
                                <li>الاستشارات الفنية</li>
                                <li>ورش التصميم المتخصصة</li>
                                <li>تطوير الهوية البصرية</li>
                            </ul>
                        </div>
                        <div class="partner-contact">
                            <a href="#" class="contact-btn">
                                <i class="fas fa-globe"></i>
                                الموقع
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Partnership Benefits -->
<section class="partnership-benefits">
    <div class="benefits-content">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-4">مزايا الشراكة معنا</h2>
                <p class="lead">انضم إلى شبكة الشركاء واستفد من الفرص الاستثمارية والتسويقية المتميزة</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h4 class="benefit-title">التسويق والترويج</h4>
                        <p>عرض علامتك التجارية أمام آلاف الزوار والمتخصصين في المجال</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h4 class="benefit-title">الشراكات التجارية</h4>
                        <p>فرص للتواصل مع عملاء جدد وإقامة شراكات تجارية مثمرة</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <h4 class="benefit-title">الابتكار والتطوير</h4>
                        <p>منصة لعرض أحدث الابتكارات والتقنيات في مجال تجهيز المساجد</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h4 class="benefit-title">الوصول العالمي</h4>
                        <p>فرصة للوصول إلى أسواق جديدة في المنطقة والعالم الإسلامي</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Supporting Partners -->
<section class="py-5">
    <div class="container">
        <div class="partner-category">
            <div class="category-header">
                <h2 class="category-title">الشركاء الداعمون</h2>
                <p class="category-description">
                    شركات ومؤسسات متخصصة تساهم في إثراء المعرض بخبراتها ومنتجاتها المتميزة
                </p>
            </div>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="partner-card">
                        <div class="partner-logo">
                            <i class="fas fa-volume-up"></i>
                        </div>
                        <h3 class="partner-name">الشركة السعودية للأنظمة الصوتية</h3>
                        <div class="partner-role">شريك تقني</div>
                        <p class="partner-description">متخصصة في أنظمة الصوت المتقدمة للمساجد</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-card">
                        <div class="partner-logo">
                            <i class="fas fa-microchip"></i>
                        </div>
                        <h3 class="partner-name">شركة المساجد الذكية</h3>
                        <div class="partner-role">شريك تقني</div>
                        <p class="partner-description">رائدة في تقنيات المباني الذكية والأتمتة</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-card">
                        <div class="partner-logo">
                            <i class="fas fa-pray"></i>
                        </div>
                        <h3 class="partner-name">مؤسسة الفرش النبوي</h3>
                        <div class="partner-role">شريك متخصص</div>
                        <p class="partner-description">متخصصة في فرش وسجاد المساجد عالي الجودة</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-card">
                        <div class="partner-logo">
                            <i class="fas fa-globe-asia"></i>
                        </div>
                        <h3 class="partner-name">رابطة العالم الإسلامي</h3>
                        <div class="partner-role">شريك دولي</div>
                        <p class="partner-description">تمثل الخبرات العالمية في إدارة المساجد</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Become a Partner CTA -->
<section class="become-partner-cta">
    <div class="container">
        <h2 class="cta-title">كن شريكاً معنا</h2>
        <p class="cta-description">
            انضم إلى شبكة الشركاء المتميزين واستفد من الفرص الاستثمارية والتسويقية الفريدة 
            في ايوان
        </p>
        <div class="d-flex flex-column flex-md-row gap-3 justify-content-center">
            <a href="{{ route('contact') }}" class="cta-button">
                <i class="fas fa-handshake"></i>
                طلب شراكة
            </a>
            <a href="#" class="cta-button">
                <i class="fas fa-download"></i>
                تحميل ملف الشراكة
            </a>
        </div>
    </div>
</section>
@endsection