@extends('layouts.app')

@section('title', 'عن المعرض - ايوان')

@section('styles')
    <style>
        /* Root Variables */
        :root {
            --primary-color: #003a4f;
            --secondary-color: #02927a;
            --accent-color: #02927a;
            --light-gold: #f8f1e4;
            --dark-blue: #001f2e;
            --text-color: #2e2e2e;
            --light-bg: #ffffff;
            --card-bg: rgba(255, 255, 255, 0.7);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --transition-speed: 0.3s;
            --blur-radius: 12px;
            --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.15);
            --background-gradient: linear-gradient(135deg, #02927a, #003a4f);
            --font-arabic: 'Noto Kufi Arabic', sans-serif;
            --font-english: 'Poppins', sans-serif;
        }

        [data-theme="dark"] {
            --primary-color: #02927a;
            --secondary-color: #003a4f;
            --text-color: #f0f0f0;
            --light-bg: #121212;
            --card-bg: rgba(30, 30, 30, 0.7);
            --glass-bg: rgba(30, 30, 30, 0.3);
            --glass-border: rgba(255, 255, 255, 0.1);
            --background-gradient: linear-gradient(135deg, #003a4f, #02927a);
        }

        /* --- Hero Section --- */
        .about-hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 6rem 2rem;
            overflow: hidden;
        }

        .about-hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        .about-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 58, 79, 0.8), rgba(2, 146, 122, 0.6));
            z-index: 2;
        }

        .about-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' patternUnits='userSpaceOnUse' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23d4af37' opacity='0.2' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23pattern)' /%3E%3C/svg%3E");
            opacity: 0.18;
            pointer-events: none;
            z-index: 0;
        }

        .about-hero-content {
            position: relative;
            z-index: 3;
            color: #fff;
            max-width: 900px;
            width: 100%;
            padding: 2.5rem;
            border-radius: 20px;
            background: rgba(13, 27, 42, 0.4);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
        }

        .about-hero-title {
            font-family: 'Tajawal', serif;
            font-size: 4rem;
            font-weight: 900;
            line-height: 1.1;
            background: linear-gradient(to right, #f8f8f8, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
        }

        /* --- Stats Section --- */
        .stats-container {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 3rem 0;
            flex-wrap: wrap;
        }

        .stats-card {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 1.5rem;
            min-width: 150px;
            text-align: center;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(2, 146, 122, 0.3);
            transition: all 0.3s ease;
        }

        .stats-card:hover {
            transform: translateY(-10px) scale(1.05);
            background: rgba(2, 146, 122, 0.2);
        }

        .stats-number {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--primary-color);
        }

        .stats-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 0.5rem;
        }

        /* --- Vision & Mission --- */
        .vision-mission-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .vision-card,
        .mission-card {
            background: var(--glass-bg);
            border-radius: 20px;
            box-shadow: var(--shadow-glass);
            backdrop-filter: blur(var(--blur-radius));
            border: 1px solid var(--glass-border);
            padding: 2rem;
            transition: all 0.4s ease;
        }

        .vision-card:hover,
        .mission-card:hover {
            transform: translateY(-10px);
            border-color: var(--secondary-color);
        }

        .vision-card h3,
        .mission-card h3 {
            font-family: var(--font-arabic);
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .vision-card h3 i,
        .mission-card h3 i {
            margin-left: 1rem;
            font-size: 2rem;
            color: var(--secondary-color);
        }

        /* --- Objectives --- */
        .objectives-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .objective-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border-top: 4px solid var(--secondary-color);
        }

        .objective-card:hover {
            transform: translateY(-8px);
        }

        .objective-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }

        .objective-card h4 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-weight: 700;
        }

        /* --- Timeline --- */
        .timeline-section {
            position: relative;
            padding: 4rem 0;
        }

        .timeline-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .timeline-container::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
        }

        .timeline-item {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            margin: 2rem 0;
        }

        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .timeline-content {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 20px;
            width: 45%;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .timeline-content::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: var(--secondary-color);
            transform: rotate(45deg);
        }

        .timeline-item:nth-child(odd) .timeline-content::after {
            right: -10px;
        }

        .timeline-item:nth-child(even) .timeline-content::after {
            left: -10px;
        }

        .timeline-date {
            background: var(--secondary-color);
            color: #fff;
            font-weight: bold;
            padding: 0.5rem 1rem;
            border-radius: 20px;
        }

        /* --- Partners --- */
        .partner-logo {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 100%;
        }

        .partner-logo:hover {
            transform: translateY(-8px);
        }

        .partner-logo h5 {
            color: var(--primary-color);
            font-weight: 700;
        }

        /* --- CTA Section --- */
        .cta-section {
            background: var(--background-gradient);
            color: white;
            padding: 4rem 0;
            border-radius: 20px;
            text-align: center;
            margin: 4rem 0;
        }

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

        /* --- Mobile Responsive Enhancements --- */
        @media (max-width: 768px) {
            .about-hero {
                padding: 4rem 1rem;
            }

            .about-hero-title {
                font-size: 2.5rem;
            }

            .vision-mission-container {
                grid-template-columns: 1fr;
            }

            .stats-container {
                flex-direction: column;
                align-items: center;
            }

            .stats-card {
                width: 90%;
                margin-bottom: 1rem;
            }

            .timeline-container::after {
                display: none;
            }

            .timeline-content {
                width: 95%;
            }

            .timeline-date {
                margin-top: 1rem;
            }
        }

        @media (max-width: 576px) {
            .about-hero-title {
                font-size: 2rem;
            }

            .stats-number {
                font-size: 2.2rem;
            }

            .objective-card {
                padding: 1.5rem;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
@endsection



@section('content')
    <!-- About Hero -->
    <section class="about-hero">
        <img src="{{ asset('images/design/architecture-1.jpg') }}" alt="عن المعرض" class="about-hero-bg">
        <div class="about-hero-overlay"></div>
        <div class="about-hero-content animate__animated animate__fadeIn">
            <h1 class="about-hero-title">عن المعرض</h1>
            <p class="hero-subtitle">منصة عالمية رائدة تجمع بين الأصالة والابتكار في خدمة بيوت الله</p>
        </div>
    </section>

    <!-- Statistics -->
    <section class="container py-5">
        <div class="stats-container">
            <div class="stats-card floating">
                <div class="stats-number">5</div>
                <div class="stats-label">أيام من الفعاليات</div>
            </div>
            <div class="stats-card floating" style="animation-delay: 0.2s">
                <div class="stats-number">8</div>
                <div class="stats-label">ورش تدريبية متخصصة</div>
            </div>
            <div class="stats-card floating" style="animation-delay: 0.4s">
                <div class="stats-number">50+</div>
                <div class="stats-label">عارض ومشارك</div>
            </div>
            <div class="stats-card floating" style="animation-delay: 0.6s">
                <div class="stats-number">1000+</div>
                <div class="stats-label">زائر متوقع</div>
            </div>
        </div>
    </section>

    <!-- Vision & Mission -->
    <section class="container py-5">
        <div class="vision-mission-container">
            <div class="vision-card">
                <h3><i class="fas fa-eye"></i>الرؤية</h3>
                <p class="lead">أن يكون المعرض منصة عالمية رائدة تجمع بين الأصالة والابتكار في خدمة بيوت الله، من خلال عرض
                    أحدث تجهيزات المساجد وفق أعلى المعايير التقنية والمعمارية والجمالية.</p>
            </div>
            <div class="mission-card">
                <h3><i class="fas fa-bullseye"></i>الرسالة</h3>
                <p class="lead">تعزيز جودة ورفاهية بيئة المساجد عبر تشجيع الابتكار، وتبادل الخبرات، وتحفيز الشراكات بين
                    القطاعين العام والخاص لتقديم منتجات وخدمات تواكب متطلبات العصر وتُعلي من شأن رسالة المسجد روحًا ومكانة.
                </p>
            </div>
        </div>
    </section>

    <!-- Objectives -->
    <section class="container py-5">
        <h2 class="section-title text-center">أهداف المعرض</h2>
        <div class="objectives-grid">
            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <h4>تسليط الضوء على الابتكار</h4>
                <p>عرض أحدث التقنيات والحلول المبتكرة في مجال تجهيز المساجد، من أنظمة الصوت والإضاءة إلى التكييف والفرش.</p>
            </div>

            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-handshake"></i>
                </div>
                <h4>تعزيز التكامل والشراكة</h4>
                <p>تعزيز التكامل بين الجهات الحكومية والخاصة لتطوير البنية التحتية للمساجد وتحسين جودة الخدمات المقدمة.</p>
            </div>

            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h4>خلق فرص استثمارية</h4>
                <p>خلق فرص استثمارية جديدة في مجال تصنيع وتطوير منتجات تجهيز المساجد، وتحفيز الاستثمار في هذا القطاع الحيوي.
                </p>
            </div>

            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <h4>نقل وتوطين المعرفة</h4>
                <p>نقل وتوطين المعرفة عبر استضافة خبراء عالميين وعقد ورش عمل متخصصة في مختلف جوانب تجهيز المساجد.</p>
            </div>

            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-mosque"></i>
                </div>
                <h4>التأكيد على الهوية المعمارية</h4>
                <p>التأكيد على الهوية المعمارية الإسلامية في تصميم المساجد مع مراعاة متطلبات الاستدامة والبيئة.</p>
            </div>

            <div class="objective-card">
                <div class="objective-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h4>تبادل الخبرات</h4>
                <p>توفير منصة لتبادل الخبرات والتجارب بين المختصين والمهتمين في مجال تجهيز وإدارة المساجد.</p>
            </div>
        </div>
    </section>

    <!-- Timeline -->
    <section class="timeline-section">
        <div class="container">
            <h2 class="section-title text-center">الجدول الزمني للمعرض</h2>
            <div class="timeline-container">
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>الافتتاح الرسمي</h4>
                        <p>حفل الافتتاح الرسمي بحضور معالي وزير الشؤون الإسلامية والدعوة والإرشاد وكبار المسؤولين والضيوف.
                        </p>
                    </div>
                    <div class="timeline-date">14 أغسطس</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>الورش التدريبية</h4>
                        <p>بداية الورش التدريبية المتخصصة في الهندسة الصوتية والتقنيات الذكية لإدارة المساجد.</p>
                    </div>
                    <div class="timeline-date">15 أغسطس</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>ورش التصميم والاستدامة</h4>
                        <p>ورش متخصصة في التصميم الداخلي والخارجي للمساجد والاستدامة والطاقة المتجددة.</p>
                    </div>
                    <div class="timeline-date">16 أغسطس</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>ورش المجتمعات والفرش</h4>
                        <p>ورش حول تجهيز المساجد في المجتمعات الصغيرة والمعايير الصحية والفنية للفرش والسجاد.</p>
                    </div>
                    <div class="timeline-date">17 أغسطس</div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>الختام والتكريم</h4>
                        <p>حفل الختام وإعلان الجوائز والتوصيات وتكريم الرعاة والمشاركين المتميزين.</p>
                    </div>
                    <div class="timeline-date">18 أغسطس</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners -->
    <section class="partners-section">
        <div class="container">
            <h2 class="section-title text-center">الشركاء والرعاة</h2>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="partner-logo">
                        <i class="fas fa-mosque"></i>
                        <h5>وزارة الشؤون الإسلامية والدعوة والإرشاد</h5>
                        <div class="role">الراعي الرسمي</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-logo">
                        <i class="fas fa-industry"></i>
                        <h5>شركة سابك</h5>
                        <div class="role">الشريك الاستراتيجي</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-logo">
                        <i class="fas fa-oil-can"></i>
                        <h5>أرامكو السعودية</h5>
                        <div class="role">شريك الابتكار</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="partner-logo">
                        <i class="fas fa-drafting-compass"></i>
                        <h5>هيئة فنون العمارة والتصميم</h5>
                        <div class="role">شريك التصميم</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="cta-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto text-center">
                        <h2 class="display-5 fw-bold mb-4">كن جزءاً من هذا الحدث التاريخي</h2>
                        <p class="lead mb-4">انضم إلينا في ايوان واستكشف مستقبل تجهيز بيوت الله</p>
                        <div class="d-flex flex-column flex-md-row gap-3 justify-content-center">
                            <a href="{{ route('registration.form') }}" class="btn btn-islamic btn-lg px-5">
                                <i class="fas fa-user-plus me-2"></i>سجل الآن
                            </a>
                            <a href="{{ route('events.index') }}" class="btn btn-outline-light btn-lg px-5">
                                <i class="fas fa-calendar-alt me-2"></i>عرض الفعاليات
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection