@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --color-banner-title: {{ $colorBannerTitle ?? '#ffffff' }};
            --color-banner-description: {{ $colorBannerDescription ?? '#ffffff' }};
            --color-section-title: {{ $colorSectionTitle ?? '#1e3a8a' }};
            --color-body-text: {{ $colorBodyText ?? '#4b5563' }};
            --color-benefit-title: {{ $colorBenefitTitle ?? '#1e40af' }};
            --color-price: {{ $colorPrice ?? '#ef4444' }};
            --color-apply-button-bg: {{ $colorApplyButtonBg ?? '#449cef' }};
            --color-apply-button-text: {{ $colorApplyButtonText ?? '#ffffff' }};
            --color-faq-question: {{ $colorFaqQuestion ?? '#1e3a8a' }};
        }

        * {
            box-sizing: border-box;
        }

        .membership-page {
            background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        }

        .membership-header {
            padding: 100px 0 80px;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 400px;
            display: flex;
            align-items: center;
        }

        .membership-header.has-image::before {
            display: none;
        }

        .membership-header:not(.has-image)::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.95) 0%, rgba(59, 130, 246, 0.95) 50%, rgba(96, 165, 250, 0.95) 100%);
            z-index: 1;
        }

        .membership-header:not(.has-image) {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
        }

        .membership-header img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .membership-header > .container {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .membership-header h1 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 25px;
            color: var(--color-banner-title);
            text-shadow: 0 2px 10px rgba(0,0,0,0.1);
            letter-spacing: -0.5px;
        }

        .membership-header p {
            font-size: 20px;
            opacity: 0.95;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
            font-weight: 300;
            color: var(--color-banner-description);
        }

        .faq-section {
            background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
            padding: 80px 0;
            margin-top: 0;
            position: relative;
        }

        .faq-container {
            max-width: 950px;
            margin: 0 auto;
        }

        .faq-title {
            font-size: 36px;
            font-weight: 800;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
            margin-bottom: 50px;
            position: relative;
            padding-bottom: 20px;
        }

        .faq-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 2px;
        }

        .faq-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(59, 130, 246, 0.1);
        }

        .faq-item:hover {
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .faq-question {
            width: 100%;
            padding: 24px 30px;
            background: white;
            border: none;
            text-align: right;
            font-size: 19px;
            font-weight: 700;
            color: var(--color-faq-question);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .faq-question::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #3b82f6, #60a5fa);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .faq-question:hover {
            background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);
            padding-right: 35px;
        }

        .faq-question:hover::before {
            opacity: 1;
        }

        .faq-question.active {
            background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
            color: #1e40af;
            padding-right: 35px;
        }

        .faq-question.active::before {
            opacity: 1;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            background: white;
        }

        .faq-answer.active {
            max-height: 500px;
            padding: 0 25px 20px;
        }

        .faq-answer p {
            color: var(--color-body-text);
            font-size: 16px;
            line-height: 1.8;
            margin: 0;
        }

        .faq-icon {
            transition: transform 0.3s ease;
            font-size: 20px;
            color: #3b82f6;
        }

        .faq-question.active .faq-icon {
            transform: rotate(180deg);
        }

        .apply-section {
            background: #ffffff;
            padding: 70px 0 60px;
            text-align: center;
            position: relative;
        }

        .apply-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: #1e3a8a;
        }

        .membership-fee-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-body-text);
            margin-bottom: 12px;
            text-align: center;
        }

        .membership-fee-price {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-price);
            margin-bottom: 30px;
            text-align: center;
            display: block;
        }

        .apply-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 50px;
            background: var(--color-apply-button-bg);
            color: var(--color-apply-button-text);
            font-size: 20px;
            font-weight: 700;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(68, 156, 239, 0.35);
            border: none;
            margin-bottom: 20px;
        }

        .apply-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(68, 156, 239, 0.45);
            color: var(--color-apply-button-text);
            text-decoration: none;
        }

        .apply-button:active {
            transform: translateY(-1px);
        }

        .apply-button i {
            font-size: 18px;
        }

        .apply-benefits-text {
            font-size: 16px;
            color: var(--color-body-text);
            margin-top: 15px;
            text-align: center;
            line-height: 1.6;
        }

        .membership-content {
            padding: 80px 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
        }

        .content-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .content-section {
            margin-bottom: 60px;
            animation: fadeInUp 0.6s ease-out;
        }

        .intro-section {
            background: #ffffff;
            padding: 80px 0;
            margin-bottom: 60px;
            border-top: 1px solid #e5e7eb;
            border-bottom: 1px solid #e5e7eb;
        }

        .intro-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 60px;
        }

        .intro-content {
            display: grid;
            grid-template-columns: 500px 1fr;
            gap: 100px;
            align-items: center;
        }

        .intro-logo {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            flex-direction: column;
        }

        .intro-logo img {
            max-width: 100%;
            height: auto;
            max-height: 280px;
            min-height: 200px;
            width: auto;
            object-fit: contain;
        }

        .intro-logo h1 {
            font-size: 72px;
            font-weight: 900;
            color: #1e3a8a;
            margin: 0;
            letter-spacing: -3px;
            line-height: 1;
        }

        .intro-logo p {
            font-size: 18px;
            color: #6b7280;
            margin-top: 15px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .intro-text {
            padding-right: 50px;
        }

        .intro-text h2 {
            font-size: 38px;
            font-weight: 900;
            color: #111827;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 25px;
            text-align: right;
            line-height: 1.3;
            letter-spacing: -0.5px;
        }

        .intro-text h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #5786c7, #7a9fd6);
            border-radius: 3px;
        }

        .intro-text p {
            font-size: 19px;
            line-height: 2.1;
            color: var(--color-body-text);
            margin-bottom: 22px;
            text-align: right;
            font-weight: 400;
            letter-spacing: 0.2px;
        }

        @media (max-width: 992px) {
            .intro-container {
                padding: 0 30px;
            }

            .intro-content {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .intro-logo {
                order: -1;
            }

            .intro-logo img {
                max-height: 150px;
            }

            .intro-logo h1 {
                font-size: 42px;
            }

            .intro-text {
                padding-right: 0;
                text-align: center;
            }

            .intro-text h2 {
                text-align: center;
                font-size: 28px;
            }

            .intro-text h2::after {
                right: 50%;
                transform: translateX(50%);
            }

            .intro-text p {
                text-align: center;
                font-size: 16px;
            }
        }

        @media (max-width: 768px) {
            .intro-section {
                padding: 50px 0;
            }

            .intro-container {
                padding: 0 20px;
            }

            .intro-content {
                gap: 40px;
            }

            .intro-logo img {
                max-height: 150px;
                min-height: 120px;
            }

            .intro-logo h1 {
                font-size: 44px;
            }

            .intro-logo p {
                font-size: 16px;
            }

            .intro-text h2 {
                font-size: 28px;
            }

            .intro-text p {
                font-size: 16px;
                line-height: 1.9;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content-section h2 {
            font-size: 32px;
            font-weight: 800;
            color: var(--color-section-title);
            margin-bottom: 30px;
            text-align: right;
            line-height: 1.5;
            position: relative;
            padding-bottom: 15px;
        }

        .content-section h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 2px;
        }

        .content-section p {
            font-size: 18px;
            line-height: 2;
            color: var(--color-body-text);
            text-align: right;
            margin-bottom: 22px;
        }

        .content-section ul {
            text-align: right;
            padding-right: 20px;
        }

        .content-section li {
            font-size: 16px;
            line-height: 1.8;
            color: #4b5563;
            margin-bottom: 10px;
        }

        .membership-box-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin: 50px 0;
            gap: 25px;
        }

        .membership-title-banner {
            background: #f7d25a;
            border: 2px solid #1e3a8a;
            border-radius: 20px;
            padding: 18px 35px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 750px;
            width: 100%;
            box-shadow: 0 2px 10px rgba(30, 58, 138, 0.1);
        }

        .membership-title-banner::before,
        .membership-title-banner::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 2px;
            background: #1e3a8a;
            border-radius: 1px;
        }

        .membership-title-banner::before {
            top: -12px;
        }

        .membership-title-banner::after {
            bottom: -12px;
        }

        .membership-title-banner h3 {
            font-size: 24px;
            font-weight: 900;
            color: #1e3a8a;
            margin: 0;
            text-align: center;
            letter-spacing: -0.3px;
        }

        .membership-box {
            background: white;
            border: 2px solid #1e3a8a;
            border-radius: 20px;
            padding: 0;
            margin: 0 auto;
            box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
            position: relative;
            overflow: hidden;
            max-width: 750px;
            width: 100%;
        }

        .membership-box-content {
            padding: 35px 40px;
            text-align: right;
        }

        .membership-box-content ul {
            list-style: none;
            padding-right: 0;
            margin: 25px 0 0 0;
            text-align: right;
        }

        .membership-box-content ul li {
            padding: 14px 0;
            padding-right: 30px;
            position: relative;
            font-size: 17px;
            line-height: 1.85;
            color: #1e3a8a;
            text-align: right;
            font-weight: 700;
        }

        .membership-box-content ul li::before {
            content: "•";
            position: absolute;
            right: 0;
            color: #1e3a8a;
            font-weight: bold;
            font-size: 16px;
            top: 14px;
        }

        .price-box {
            background: linear-gradient(135deg, #3b82f6 0%, #1e40af 50%, #1e3a8a 100%);
            color: white;
            border-radius: 24px;
            padding: 50px 40px;
            margin: 40px 0;
            text-align: center;
            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
            position: relative;
            overflow: hidden;
        }

        .price-box::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 4s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        .price-box h3 {
            color: white;
            margin-bottom: 20px;
            text-align: center;
            font-size: 28px;
            font-weight: 800;
            position: relative;
            z-index: 1;
        }

        .price-amount {
            font-size: 56px;
            font-weight: 900;
            margin: 30px 0;
            color: white;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
            position: relative;
            z-index: 1;
            letter-spacing: -2px;
        }

        .price-box ul {
            list-style: none;
            padding: 0;
            margin: 20px 0 0 0;
            text-align: right;
        }

        .price-box ul li {
            padding: 8px 0;
            padding-right: 25px;
            position: relative;
            font-size: 17px;
            color: white;
        }

        .price-box ul li::before {
            content: "✓";
            position: absolute;
            right: 0;
            color: #34d399;
            font-weight: bold;
            font-size: 20px;
        }

        .benefits-section {
            margin-top: 60px;
            position: relative;
            padding: 60px 0 80px;
            background: linear-gradient(180deg, #f0f7ff 0%, #e0f2fe 100%);
            border-radius: 0;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .benefits-section.has-bg-image {
            background-blend-mode: overlay;
        }

        .benefits-section.has-bg-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(240, 247, 255, 0.85) 0%, rgba(224, 242, 254, 0.85) 100%);
            z-index: 0;
        }

        .benefits-section.has-bg-image .container,
        .benefits-section.has-bg-image .benefits-container {
            position: relative;
            z-index: 1;
        }

        .benefits-section::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 120px;
            background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.12) 100%);
            border-radius: 100% 100% 0 0 / 60px;
            z-index: 1;
        }

        .benefits-section.has-bg-image::before {
            background: linear-gradient(180deg, transparent 0%, rgba(59, 130, 246, 0.18) 100%);
        }

        .benefits-section .container > h2 {
            text-align: center;
            margin-bottom: 12px;
            font-size: 34px;
            font-weight: 900;
            color: #3b82f6;
            text-shadow: 0 3px 12px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1;
        }

        .benefits-section .container > p {
            text-align: center;
            color: #3b82f6;
            font-size: 17px;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            font-weight: 400;
        }

        .benefits-container {
            max-width: 950px;
            margin: 45px auto 0;
            padding: 0 40px;
            position: relative;
            z-index: 1;
        }

        .benefit-item {
            background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
            border: 2px solid #1e3a8a;
            border-radius: 10px 3px 3px 10px;
            padding: 18px 24px;
            margin-bottom: 20px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 20px;
            box-shadow: 0 3px 12px rgba(30, 58, 138, 0.12);
        }

        .benefit-item:hover {
            box-shadow: 0 6px 20px rgba(30, 58, 138, 0.2);
            transform: translateY(-2px);
            border-color: #3b82f6;
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        }

        .benefit-text-box {
            flex: 1;
            text-align: center;
            padding: 12px 16px;
        }

        .benefit-item h4 {
            font-size: 18px;
            font-weight: 800;
            color: var(--color-benefit-title);
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.4;
            position: relative;
            padding-right: 18px;
        }

        .benefit-item h4::before {
            content: "●";
            position: absolute;
            right: 0;
            color: #ef4444;
            font-size: 14px;
            top: 2px;
        }

        .benefit-item p {
            font-size: 14px;
            line-height: 1.7;
            color: var(--color-body-text);
            text-align: center;
            margin-bottom: 8px;
            font-weight: 400;
        }

        .benefit-item ul {
            text-align: center;
            padding-right: 0;
            margin-top: 8px;
            list-style: none;
        }

        .benefit-item ul li {
            font-size: 14px;
            line-height: 1.6;
            color: #4b5563;
            margin-bottom: 5px;
            text-align: center;
        }

        .benefit-icon {
            flex-shrink: 0;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #1e3a8a;
            position: relative;
        }

        .benefit-icon::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2.5px solid #1e3a8a;
            border-right: none;
            border-radius: 35px 0 0 35px;
            z-index: -1;
        }

        .highlight-box {
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
            border-right: 5px solid;
            border-image: linear-gradient(180deg, #f59e0b, #fbbf24) 1;
            border-radius: 12px;
            padding: 25px;
            margin: 25px 0;
            text-align: right;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
            position: relative;
        }

        .highlight-box::before {
            content: '⚠️';
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
        }

        .highlight-box strong {
            color: #d97706;
            font-weight: 800;
            font-size: 18px;
        }

        @media (max-width: 768px) {
            .membership-header {
                padding: 60px 0 50px;
            }

            .membership-header h1 {
                font-size: 32px;
            }

            .membership-header p {
                font-size: 18px;
            }

            .faq-section {
                padding: 50px 0;
            }

            .faq-title {
                font-size: 28px;
                margin-bottom: 30px;
            }

            .faq-question {
                font-size: 17px;
                padding: 20px;
            }

            .content-section h2 {
                font-size: 24px;
            }

            .membership-box-wrapper {
                margin: 40px 0;
            }

            .membership-box {
                max-width: 90%;
            }

            .membership-title-banner {
                padding: 16px 25px;
            }

            .membership-title-banner h3 {
                font-size: 22px;
            }

            .membership-title-banner::before,
            .membership-title-banner::after {
                width: 80px;
            }

            .membership-box-content {
                padding: 28px 25px;
            }

            .membership-box-content ul li {
                font-size: 16px;
                padding-right: 25px;
            }

            .price-box {
                padding: 35px 25px;
            }

            .price-amount {
                font-size: 42px;
            }

            .benefits-section {
                padding: 45px 0 60px;
            }

            .benefits-section .container > h2 {
                font-size: 26px;
                margin-bottom: 10px;
            }

            .benefits-section .container > p {
                font-size: 15px;
            }

            .benefits-container {
                padding: 0 20px;
                margin-top: 35px;
            }

            .benefit-item {
                flex-direction: column;
                padding: 16px 20px;
                gap: 18px;
                border-radius: 10px;
            }

            .benefit-icon {
                width: 60px;
                height: 60px;
                font-size: 26px;
            }

            .benefit-icon::before {
                border-radius: 30px 0 0 30px;
            }

            .benefit-text-box {
                padding: 10px 12px;
            }

            .benefit-item h4 {
                font-size: 16px;
                padding-right: 16px;
                margin-bottom: 8px;
            }

            .benefit-item h4::before {
                font-size: 12px;
            }

            .benefit-item p {
                font-size: 13px;
            }

            .benefit-item ul li {
                font-size: 13px;
            }

            .membership-fee-text {
                font-size: 20px;
            }

            .membership-fee-price {
                font-size: 30px;
                margin-bottom: 25px;
            }

            .apply-button {
                padding: 16px 40px;
                font-size: 18px;
            }

            .apply-section {
                padding: 50px 0 45px;
            }

            .apply-benefits-text {
                font-size: 15px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="membership-page">
        <!-- Header Banner -->
        <section class="membership-header @if(!empty($bannerImage)) has-image @endif" @if(!empty($bannerImage)) style="background-image: url('{{ $bannerImage }}');" @endif>
            @if(!empty($bannerImage))
                <img src="{{ $bannerImage }}" alt="{{ $bannerTitle }}" class="img-cover" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;">
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); z-index: 1;"></div>
            @endif
            <div class="container">
                <h1>{{ $bannerTitle }}</h1>
                @if(!empty($bannerDescription))
                    <p>{{ $bannerDescription }}</p>
                @endif
            </div>
        </section>

        <!-- Introduction Section -->
        <section class="intro-section">
            <div class="intro-container">
                <div class="intro-content">
                    <div class="intro-logo">
                        @if(!empty($introLogo))
                            <img src="{{ e($introLogo) }}" alt="{{ e($introTitle ?? 'رابطة مونتيسوري الدولية') }}" />
                        @elseif(!empty($generalSettings['logo']))
                            <img src="{{ $generalSettings['logo'] }}" alt="{{ getGeneralSettings('site_name') ?? 'رابطة مونتيسوري الدولية' }}" />
                        @else
                            <h1 style="font-size: 48px; font-weight: 800; color: #1e3a8a; margin: 0;">IMA</h1>
                            <p style="font-size: 18px; color: #6b7280; margin-top: 10px;">رابطة مونتيسوري الدولية</p>
                        @endif
                    </div>
                    <div class="intro-text">
                        <h2>{{ e($introTitle ?? 'عن رابطة مونتيسوري الدولية') }}</h2>
                        @if(!empty($introParagraphs) && is_array($introParagraphs))
                            @foreach($introParagraphs as $paragraph)
                                @if(!empty($paragraph))
                                    <p>{{ e($paragraph) }}</p>
                                @endif
                            @endforeach
                        @else
                            <p>انطلاقًا من إيماننا بأن منهج مونتيسوري ليس مرحلة دراسية تنتهي بالحصول على شهادة، بل مسار مهني مستمر يحتاج إلى دعم، توجيه، وتطوير دائم؛</p>
                            <p>تم تأسيس رابطة مونتيسوري المهنية لتكون مجتمعًا مهنيًا متخصصًا يجمع خريجي مونتيسوري في مساحة واحدة قائمة على الوعي، الخبرة، والتأثير الحقيقي في المجال.</p>
                            <p>الرابطة تهدف إلى خلق بيئة احترافية داعمة، تجمع بين التطبيق العملي والنقاش المهني المستمر، تحت إشراف خبراء ومتخصصين في منهج مونتيسوري.</p>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <!-- Content Section -->
        <section class="membership-content">
            <div class="container">
                <div class="content-wrapper">

                    <!-- أهمية المشاركة في الرابطة والاستفادة منها -->
                    <section class="benefits-section @if(!empty($benefitsSectionBg)) has-bg-image @endif" @if(!empty($benefitsSectionBg)) style="background-image: url('{{ e($benefitsSectionBg) }}');" @endif>
                        @if(!empty($benefitsSectionBg))
                            <img src="{{ e($benefitsSectionBg) }}" alt="Benefits Section Background" class="img-cover" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.4; filter: blur(2px);">
                        @endif
                        <div class="container">
                            <h2>{{ e($benefitsTitle ?? 'مزايا العضوية') }}</h2>
                            @if(!empty($benefitsDescription))
                                <p>{{ e($benefitsDescription) }}</p>
                            @else
                                <p>الانضمام إلى رابطة مونتيسوري المهنية يوفّر للأعضاء منظومة متكاملة من الدعم والفرص الحقيقية</p>
                            @endif
                            
                            <div class="benefits-container">
                                @if(!empty($benefitsItems) && is_array($benefitsItems) && count($benefitsItems) > 0)
                                    @php
                                        $benefitIcons = [
                                            'fas fa-hands-helping',
                                            'fas fa-users',
                                            'fas fa-user-tie',
                                            'fas fa-network-wired',
                                            'fas fa-chalkboard-teacher',
                                            'fas fa-microphone',
                                            'fas fa-globe',
                                            'fas fa-id-card',
                                            'fas fa-graduation-cap',
                                            'fas fa-certificate',
                                            'fas fa-star',
                                            'fas fa-handshake'
                                        ];
                                    @endphp
                                    @foreach($benefitsItems as $index => $benefit)
                                        @if(!empty($benefit['title']))
                                            <div class="benefit-item">
                                                <div class="benefit-text-box">
                                                    <h4>{{ e($benefit['title']) }}</h4>
                                                    @if(!empty($benefit['description']))
                                                        <p>{{ e($benefit['description']) }}</p>
                                                    @endif
                                                </div>
                                                <div class="benefit-icon">
                                                    <i class="{{ $benefitIcons[$index % count($benefitIcons)] ?? 'fas fa-check-circle' }}"></i>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @else
                                    {{-- Default benefits if none are set --}}
                                    <div class="benefit-item">
                                        <div class="benefit-text-box">
                                            <h4>دعم مهني مدى الحياة</h4>
                                            <p>متابعة مستمرة، توجيه مهني عملي، وإجابات واضحة للتحديات التي تواجه الأعضاء طوال مسيرتهم المهنية، وليس لفترة زمنية محددة.</p>
                                        </div>
                                        <div class="benefit-icon">
                                            <i class="fas fa-hands-helping"></i>
                                        </div>
                                    </div>

                                    <div class="benefit-item">
                                        <div class="benefit-text-box">
                                            <h4>مجتمع مهني مغلق ومتخصص</h4>
                                            <p>مساحة احترافية لتبادل الخبرات الواقعية، طرح المشكلات العملية، ومناقشة الحلول مع مختصين وأصحاب خبرة فعلية.</p>
                                        </div>
                                        <div class="benefit-icon">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>

                                    <div class="benefit-item">
                                        <div class="benefit-text-box">
                                            <h4>إشراف وتوجيه متخصص</h4>
                                            <p>بقيادة ومشاركة <strong style="color: #1e3a8a;">د. نعمة محمد</strong> وعدد من الخبراء والمتخصصين في منهج مونتيسوري.</p>
                                        </div>
                                        <div class="benefit-icon">
                                            <i class="fas fa-user-tie"></i>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </section>

                    <!-- من له حق المشاركة -->
                    <div class="membership-box-wrapper">
                        <div class="membership-title-banner">
                            <h3>{{ e($eligibilityTitle ?? 'من له حق المشاركة في الرابطة؟') }}</h3>
                        </div>
                        <div class="membership-box">
                            <div class="membership-box-content">
                                <ul>
                                    @if(!empty($eligibilityItems) && is_array($eligibilityItems) && count($eligibilityItems) > 0)
                                        @foreach($eligibilityItems as $item)
                                            @if(!empty($item))
                                                <li>{{ e($item) }}</li>
                                            @endif
                                        @endforeach
                                    @else
                                        <li>خريجي دبلومات وبرامج مونتيسوري المعتمدة</li>
                                        <li>خريجي مؤسسة مونتيسوري والراغبين في الاستمرار بالدعم والتطوير المهني</li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Apply Button Section -->
        <section class="apply-section">
            <div class="container">
                <div class="membership-fee-text">{{ e($applyFeeText ?? 'تكلفة الاشتراك السنوية') }}</div>
                <span class="membership-fee-price">{{ $membershipPrice ?? 100 }} دولار أمريكي</span>
                <a href="#apply-form" class="apply-button">
                    <i class="fas fa-arrow-left"></i>
                    <span>{{ e($applyButtonText ?? 'تقدم الآن') }}</span>
                </a>
                @if(!empty($applyBenefitsText))
                    <p class="apply-benefits-text">
                        {{ e($applyBenefitsText) }}
                    </p>
                @else
                    <p class="apply-benefits-text">
                        واحصل على وصول فوري للمزايا والفرص الحصرية
                    </p>
                @endif
                @if(!empty($membershipPriceDescription))
                <p class="apply-benefits-text" style="margin-top: 10px; font-size: 15px; color: #6b7280;">
                    {{ e($membershipPriceDescription) }}
                </p>
                @endif
            </div>
        </section>

        <!-- Application Form Section -->
        <section class="application-form-section" id="apply-form" style="padding: 60px 0; background: #f8fafc;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-lg-8">
                        <div class="card shadow-sm" style="border-radius: 16px; border: none;">
                            <div class="card-body p-4 p-md-5">
                                <h2 class="text-center mb-4" style="color: #1e3a8a; font-weight: 800;">نموذج التسجيل في عضوية المونتيسوري</h2>
                                
                                @if(session()->has('msg'))
                                    <div class="alert alert-success">
                                        {{ session()->get('msg') }}
                                    </div>
                                @endif

                                @if($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <form action="/montessori-membership/store" method="post" enctype="multipart/form-data">
                                    {{ csrf_field() }}

                                    @if(!empty($formFields) && is_array($formFields) && count($formFields) > 0)
                                        @foreach($formFields as $fieldIndex => $field)
                                            @if(!empty($field['name']) && !empty($field['label']))
                                                <div class="form-group" data-field-name="{{ e($field['name']) }}">
                                                    <label class="input-label font-weight-600" style="color: #374151;">
                                                        {{ e($field['label']) }}
                                                        @if(!empty($field['required']) && $field['required'] == '1')
                                                            <span class="text-danger">*</span>
                                                        @endif
                                                    </label>
                                                    
                                                    @if(!empty($field['type']) && $field['type'] == 'select')
                                                        <select 
                                                            name="{{ e($field['name']) }}" 
                                                            class="form-control @error($field['name']) is-invalid @enderror"
                                                            @if(!empty($field['required']) && $field['required'] == '1') required @endif
                                                            @if(!empty($field['has_sub_fields']) && $field['has_sub_fields'] == '1')
                                                                data-has-sub-fields="true"
                                                                data-sub-fields-trigger="{{ e($field['sub_fields_trigger_value'] ?? '') }}"
                                                                data-parent-field="{{ e($field['name']) }}"
                                                                onchange="toggleSubFields('{{ e($field['name']) }}', this.value)"
                                                            @endif
                                                        >
                                                            <option value="">-- اختر --</option>
                                                            @if(!empty($field['options']))
                                                                @php
                                                                    $options = is_array($field['options']) ? $field['options'] : explode("\n", $field['options']);
                                                                @endphp
                                                                @foreach($options as $option)
                                                                    @if(!empty(trim($option)))
                                                                        <option value="{{ e(trim($option)) }}">{{ e(trim($option)) }}</option>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    @elseif(!empty($field['type']) && $field['type'] == 'file')
                                                        <input 
                                                            type="file" 
                                                            name="{{ e($field['name']) }}" 
                                                            class="form-control @error($field['name']) is-invalid @enderror"
                                                            accept="image/*"
                                                            @if(!empty($field['required']) && $field['required'] == '1') required @endif
                                                        />
                                                        <small class="text-muted">الملفات المسموح بها: JPG, JPEG, PNG, GIF, WEBP (الحد الأقصى: 10MB)</small>
                                                    @else
                                                        <input 
                                                            type="{{ e($field['type'] ?? 'text') }}" 
                                                            name="{{ e($field['name']) }}" 
                                                            value="{{ old($field['name']) }}"
                                                            class="form-control @error($field['name']) is-invalid @enderror"
                                                            @if(!empty($field['required']) && $field['required'] == '1') required @endif
                                                            placeholder="{{ e($field['label']) }}"
                                                        />
                                                    @endif
                                                    
                                                    @error($field['name'])
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                
                                                {{-- Sub Fields --}}
                                                @if(!empty($field['has_sub_fields']) && $field['has_sub_fields'] == '1' && !empty($field['sub_fields']))
                                                    <div class="sub-fields-group" id="sub_fields_{{ e($field['name']) }}" style="display: none; padding-right: 20px; border-right: 3px solid #3b82f6; margin-bottom: 15px;">
                                                        @foreach($field['sub_fields'] as $subField)
                                                            @if(!empty($subField['label']))
                                                                <div class="form-group">
                                                                    <label class="input-label font-weight-600" style="color: #374151;">
                                                                        {{ e($subField['label']) }}
                                                                    </label>
                                                                    
                                                                    @if($subField['type'] == 'textarea')
                                                                        <textarea 
                                                                            name="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}"
                                                                            class="form-control"
                                                                            rows="3"
                                                                        ></textarea>
                                                                    @elseif($subField['type'] == 'select')
                                                                        <select 
                                                                            name="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}"
                                                                            class="form-control"
                                                                        >
                                                                            <option value="">-- اختر --</option>
                                                                        </select>
                                                                    @elseif($subField['type'] == 'checkbox')
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input 
                                                                                type="checkbox"
                                                                                name="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}"
                                                                                class="custom-control-input"
                                                                                id="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}"
                                                                                value="1"
                                                                            />
                                                                            <label class="custom-control-label" for="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}">
                                                                                نعم
                                                                            </label>
                                                                        </div>
                                                                    @else
                                                                        <input 
                                                                            type="text"
                                                                            name="{{ e($field['name']) }}_sub_{{ e(Str::slug($subField['label'])) }}"
                                                                            class="form-control"
                                                                        />
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @endif
                                            @endif
                                        @endforeach
                                    @else
                                        {{-- Default form fields --}}
                                        <div class="form-group">
                                            <label class="input-label font-weight-600" style="color: #374151;">الاسم (الاسم الثلاثي) <span class="text-danger">*</span></label>
                                            <input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label font-weight-600" style="color: #374151;">البلد <span class="text-danger">*</span></label>
                                            <input type="text" name="country" value="{{ old('country') }}" class="form-control @error('country') is-invalid @enderror" required>
                                            @error('country')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label font-weight-600" style="color: #374151;">رقم التليفون المنضم به لجروب الدبلوم <span class="text-danger">*</span></label>
                                            <input type="tel" name="phone" value="{{ old('phone') }}" class="form-control @error('phone') is-invalid @enderror" required>
                                            @error('phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label font-weight-600" style="color: #374151;">بريد إلكتروني (يجب أن يكون Gmail) <span class="text-danger">*</span></label>
                                            <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label class="input-label font-weight-600" style="color: #374151;">حضرتك خريج/ة من أي دبلوم؟ <span class="text-danger">*</span></label>
                                            <select name="diploma" class="form-control @error('diploma') is-invalid @enderror" required>
                                                <option value="">-- اختر --</option>
                                                <option value="دبلوم مونتيسوري الدولي |المرحلة الأولى: من سن 0-3 سنوات">دبلوم مونتيسوري الدولي |المرحلة الأولى: من سن 0-3 سنوات</option>
                                                <option value="دبلوم مونتيسوري الدولي |المرحلة الثانية: من سن 3-6 سنوات">دبلوم مونتيسوري الدولي |المرحلة الثانية: من سن 3-6 سنوات</option>
                                                <option value="دبلوم مونتيسوري الدولي |المرحلة الثالثة: ذوي الهمم لجميع المراحل">دبلوم مونتيسوري الدولي |المرحلة الثالثة: ذوي الهمم لجميع المراحل</option>
                                                <option value="دبلوم مونتيسوري الدولي |المرحلة الرابعة: المرحلة الابتدائية">دبلوم مونتيسوري الدولي |المرحلة الرابعة: المرحلة الابتدائية</option>
                                                <option value="دبلوم مونتيسوري الدولي |المرحلة من 0 : 6 سنوات">دبلوم مونتيسوري الدولي |المرحلة من 0 : 6 سنوات</option>
                                                <option value="دبلوم مونتيسوري الدولي الشامل 4 مراحل">دبلوم مونتيسوري الدولي الشامل 4 مراحل</option>
                                                <option value="دبلوم التربية الخاصة">دبلوم التربية الخاصة</option>
                                            </select>
                                            @error('diploma')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    @endif

                                    <div class="form-group mt-4 text-center">
                                        <button type="submit" class="btn btn-primary btn-lg" style="background: rgb(68, 156, 239); border: none; padding: 15px 50px; font-size: 18px; font-weight: 700; border-radius: 8px;">
                                            <i class="fas fa-paper-plane"></i> إرسال الطلب
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="faq-section">
            <div class="container">
                <div class="faq-container">
                    <h2 class="faq-title">الأسئلة المتداولة</h2>
                    
                    @if(!empty($faqs) && count($faqs) > 0)
                        @foreach($faqs as $index => $faq)
                            <div class="faq-item">
                                <button class="faq-question" onclick="toggleFaq({{ $index }})">
                                    <span>{{ $faq['question'] ?? '' }}</span>
                                    <span class="faq-icon">▼</span>
                                </button>
                                <div class="faq-answer" id="faq-answer-{{ $index }}">
                                    <p>{{ $faq['answer'] ?? '' }}</p>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <!-- Default FAQs -->
                        <div class="faq-item">
                            <button class="faq-question" onclick="toggleFaq(0)">
                                <span>كيف يمكنني الانضمام؟</span>
                                <span class="faq-icon">▼</span>
                            </button>
                            <div class="faq-answer" id="faq-answer-0">
                                <p>يمكنك الانضمام إلى عضوية المونتيسوري من خلال ملء نموذج التسجيل الموجود في هذه الصفحة والضغط على زر "تقدم الآن".</p>
                            </div>
                        </div>

                        <div class="faq-item">
                            <button class="faq-question" onclick="toggleFaq(1)">
                                <span>هل يجب علي دفع أي رسوم إضافية؟</span>
                                <span class="faq-icon">▼</span>
                            </button>
                            <div class="faq-answer" id="faq-answer-1">
                                <p>الرسوم موضحة في نموذج التسجيل. لا توجد رسوم إضافية مخفية.</p>
                            </div>
                        </div>

                        <div class="faq-item">
                            <button class="faq-question" onclick="toggleFaq(2)">
                                <span>كيف يمكنني الحصول على الهوية والشهادة؟</span>
                                <span class="faq-icon">▼</span>
                            </button>
                            <div class="faq-answer" id="faq-answer-2">
                                <p>سيتم إرسال الهوية والشهادة إلى بريدك الإلكتروني بعد إتمام عملية التسجيل والدفع بنجاح.</p>
                            </div>
                        </div>

                        <div class="faq-item">
                            <button class="faq-question" onclick="toggleFaq(3)">
                                <span>هل المحاضرات مترجمة ومُسجلة؟</span>
                                <span class="faq-icon">▼</span>
                            </button>
                            <div class="faq-answer" id="faq-answer-3">
                                <p>نعم، جميع المحاضرات متاحة بالترجمة ويمكنك الوصول إليها في أي وقت بعد التسجيل.</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts_bottom')
    <script>
        function toggleFaq(index) {
            const answer = document.getElementById('faq-answer-' + index);
            const question = answer.previousElementSibling;
            
            // Close all other FAQs
            document.querySelectorAll('.faq-answer').forEach((item, i) => {
                if (i !== index) {
                    item.classList.remove('active');
                    item.previousElementSibling.classList.remove('active');
                }
            });

            // Toggle current FAQ
            answer.classList.toggle('active');
            question.classList.toggle('active');
        }

        // Smooth scroll to apply form when clicking apply button
        document.querySelectorAll('a[href="#apply-form"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const form = document.getElementById('apply-form');
                if (form) {
                    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Toggle sub-fields based on parent field value
        function toggleSubFields(fieldName, selectedValue) {
            const subFieldsContainer = document.getElementById('sub_fields_' + fieldName);
            const parentField = document.querySelector('select[data-parent-field="' + fieldName + '"]');
            
            console.log('Toggle Sub Fields:', fieldName, selectedValue);
            console.log('Container found:', subFieldsContainer);
            console.log('Parent field found:', parentField);
            
            if (subFieldsContainer && parentField) {
                const triggerValue = parentField.getAttribute('data-sub-fields-trigger');
                console.log('Trigger value:', triggerValue);
                console.log('Match:', selectedValue === triggerValue);
                
                if (selectedValue === triggerValue) {
                    subFieldsContainer.style.display = 'block';
                    // Enable inputs in sub-fields
                    subFieldsContainer.querySelectorAll('input, select, textarea').forEach(input => {
                        input.disabled = false;
                    });
                } else {
                    subFieldsContainer.style.display = 'none';
                    // Clear and disable inputs in sub-fields
                    subFieldsContainer.querySelectorAll('input, select, textarea').forEach(input => {
                        if (input.type !== 'checkbox') {
                            input.value = '';
                        } else {
                            input.checked = false;
                        }
                        input.disabled = true;
                    });
                }
            } else {
                console.log('Sub-fields container or parent field not found!');
            }
        }

        // Initialize sub-fields on page load
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('select[data-has-sub-fields="true"]').forEach(select => {
                const fieldName = select.getAttribute('data-parent-field');
                toggleSubFields(fieldName, select.value);
            });
        });
    </script>
@endpush