@extends('layouts.app')

@section('title', $page?->meta_title ?? $page?->title ?? block('about.hero.badge', $isRtl ? 'من نحن' : 'About Us'))
@section('description', $page?->meta_description ?? block('about.hero.subtitle', $isRtl
    ? 'منصة موحدة تُمكّن الأفراد والشركات من حلول مالية سريعة وشفافة.'
    : 'A unified platform to empower individuals and businesses with fast, transparent financial solutions.'))

@section('content')
<section class="page-header about-hero">
    <div class="hero-shape hero-shape-1"></div>
    <div class="hero-shape hero-shape-2"></div>
    <div class="container">
        <div class="sama-license-row sama-license-row--hero mb-3" style="justify-content: center;">
            <img src="{{ asset('assets/img/central-bank.png') }}" alt="{{ $isRtl ? 'البنك المركزي السعودي (ساما)' : 'Saudi Central Bank (SAMA)' }}" class="sama-license-logo">
            <span class="badge badge-primary sama-pulse">
                <i class="fa-solid fa-bolt"></i>
                {{ $isRtl ? 'مرخص من البنك المركزي السعودي (ساما)' : 'Licensed by the Saudi Central Bank (SAMA)' }}
            </span>
        </div>
        <h1 class="font-weight-bold" style="font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.2;">
            {{ $page?->title ?? block('about.hero.title', $isRtl ? 'نُعيد تعريف التمويل في المملكة' : 'Revolutionizing Financing in KSA') }}
        </h1>
        <p class="text-muted" style="max-width: 720px; margin: 1.25rem auto 0; font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.8;">
            {{ block('about.hero.subtitle', $isRtl
                ? 'منصة موحدة تُمكّن الأفراد والشركات من حلول مالية سريعة وشفافة.'
                : 'A unified platform to empower individuals and businesses with fast, transparent financial solutions.') }}
        </p>
    </div>
</section>

<section class="about-stats-section">
    <div class="container">
        <div class="about-stats-grid">
            <div class="about-stat-item">
                <div class="about-stat-icon"><i class="fa-solid fa-building-columns"></i></div>
                <div class="about-stat-number">+20</div>
                <div class="about-stat-label">{{ $isRtl ? 'بنك وجهة تمويلية' : 'Banks & Financiers' }}</div>
            </div>
            <div class="about-stat-item">
                <div class="about-stat-icon"><i class="fa-solid fa-bolt"></i></div>
                <div class="about-stat-number">{{ $isRtl ? '5 دقائق' : '5 min' }}</div>
                <div class="about-stat-label">{{ $isRtl ? 'للحصول على عروضك' : 'to get your offers' }}</div>
            </div>
            <div class="about-stat-item">
                <div class="about-stat-icon"><i class="fa-solid fa-mobile-screen"></i></div>
                <div class="about-stat-number">100%</div>
                <div class="about-stat-label">{{ $isRtl ? 'إلكتروني بدون زيارة فروع' : 'digital — no branch visits' }}</div>
            </div>
            <div class="about-stat-item">
                <div class="about-stat-icon"><i class="fa-solid fa-shield-halved"></i></div>
                <div class="about-stat-number">SAMA</div>
                <div class="about-stat-label">{{ $isRtl ? 'مرخّصون من البنك المركزي' : 'Regulated by the Central Bank' }}</div>
            </div>
        </div>
    </div>
</section>



<section class="vision-mission-section section bg-white">
    <div class="container">
        <div class="about-grid">
            <div class="about-card about-card-vision" data-aos="fade-right">
                <span class="material-symbols-outlined">visibility</span>
                <h2>{{ block('about.vision.title', $isRtl ? 'رؤيتنا' : 'Our Vision') }}</h2>
                <p>
                    {{ block('about.vision.text', $isRtl
                        ? 'نسعى في هوت سبوت إلى إحداث ثورة في قطاع التمويل، وتمكين الأفراد والشركات من تحقيق جودة حياة وأداء أفضل بما يتماشى مع رؤية المملكة 2030.'
                        : 'Our vision at Hotspot is to revolutionize the financing landscape. We aim to empower individuals & Businesses to secure a better quality of life & performance aligned with Saudi Vision 2030.') }}
                </p>
                <div class="about-card-footer">
                    <span class="card-established">{{ block('about.vision.established', $isRtl ? 'تأسست 2024' : 'ESTABLISHED 2024') }}</span>
                </div>
            </div>

            <div class="about-card about-card-mission" data-aos="fade-left">
                <span class="material-symbols-outlined">rocket_launch</span>
                <h2>{{ block('about.mission.title', $isRtl ? 'مهمتنا' : 'Our Mission') }}</h2>
                <p>
                    {{ block('about.mission.text', $isRtl
                        ? 'مهمتنا تمكين الأفراد والشركات من خلال الوصول المريح إلى مجموعة واسعة من المنتجات والخدمات التمويلية.'
                        : 'Our mission is to empower individuals and businesses by providing them with convenient access to a wide range of financing products and services.') }}
                </p>
                <div class="about-card-footer">
                    <p style="margin-bottom: 0; font-weight: 500; font-size: 0.95rem;">
                        {{ block('about.mission.objective', $isRtl
                            ? 'هدفنا تبسيط اتخاذ القرارات المالية عبر منصة سهلة الاستخدام.'
                            : 'Our objective is to simplify the process of making financial choices via user-friendly platform.') }}
                    </p>
                    <a href="{{ route('contact') }}" class="about-link">
                        {{ block('about.mission.link', $isRtl ? 'التمكين الرقمي' : 'DIGITAL EMPOWERMENT') }}
                        <span class="material-symbols-outlined" style="font-size: 1.2rem; margin:0;">{{ $isRtl ? 'arrow_back' : 'arrow_forward' }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="attributes-section section">
    <div class="container">
        <div class="attributes-header">
            <div>
                <span class="badge badge-primary mb-3">{{ block('about.attributes.badge', $isRtl ? 'سمات أساسية' : 'CORE ATTRIBUTES') }}</span>
                <h2 class="font-weight-bold">
                    {{ block('about.attributes.title', $isRtl ? 'الابتكار بسرعة الثقة.' : 'Innovation at the Speed of Trust.') }}
                </h2>
            </div>
            <p>
                {{ block('about.attributes.subtitle', $isRtl
                    ? 'مصممة للتفاعلات المالية عالية الأداء، مع إعطاء الأولوية للشفافية واستقلالية المستخدم.'
                    : 'Designed for high-performance financial interactions, prioritizing transparency and user autonomy.') }}
            </p>
        </div>

        <div class="attribute-grid">
            <div class="attribute-card" data-aos="fade-up" data-aos-delay="100">
                <span class="material-symbols-outlined">dynamic_form</span>
                <h3>{{ block('about.attributes.innovation_title', $isRtl ? 'ابتكار' : 'Innovation') }}</h3>
                <p>{{ block('about.attributes.innovation_text', $isRtl ? 'مقارنة فورية لعدة عروض من المؤسسات المالية.' : 'Real-time comparison of the multiple offers received from financial institutions.') }}</p>
                <div class="attribute-bar"></div>
            </div>
            <div class="attribute-card" data-aos="fade-up" data-aos-delay="200">
                <span class="material-symbols-outlined">touch_app</span>
                <h3>{{ block('about.attributes.convenience_title', $isRtl ? 'راحة' : 'Convenience') }}</h3>
                <p>{{ block('about.attributes.convenience_text', $isRtl ? 'تقديم طلبات التمويل أونلاين بموافقات فورية.' : 'Seamless Online Financing Application with immediate and instant approvals.') }}</p>
                <div class="attribute-bar"></div>
            </div>
            <div class="attribute-card" data-aos="fade-up" data-aos-delay="300">
                <span class="material-symbols-outlined">public</span>
                <h3>{{ block('about.attributes.accessibility_title', $isRtl ? 'وصول' : 'Accessibility') }}</h3>
                <p>{{ block('about.attributes.accessibility_text', $isRtl ? 'عروض فورية من مؤسسات مالية وبنوك متعددة في المملكة.' : 'Instant Offers From Multiple Financial Institutions and Banks across the Kingdom.') }}</p>
                <div class="attribute-bar"></div>
            </div>
        </div>
    </div>
</section>

<section class="partners-footer-section section bg-white">
    <div class="container text-center">
        <span class="badge badge-success mb-3">
            <i class="fa-solid fa-shield-halved"></i>
            {{ block('about.partners.badge', $isRtl ? 'شبكة شركاء معتمدة من ساما' : 'SAMA Regulated Partner Network') }}
        </span>
        <h2 class="mb-5">{{ block('about.partners.title', $isRtl ? 'شركاؤنا التقنيون' : 'Our Technology Partners') }}</h2>
        <div class="our-partners-grid">
            <div class="partner-item"><img src="{{ asset('assets/img/partners/elm.png') }}" alt="ELM"></div>
            <div class="partner-item"><img src="{{ asset('assets/img/partners/nic.png') }}" alt="NIC"></div>
            <div class="partner-item"><img src="{{ asset('assets/img/partners/scb.png') }}" alt="SCB"></div>
            <div class="partner-item"><img src="{{ asset('assets/img/partners/tcc.png') }}" alt="TCC"></div>
        </div>
    </div>
</section>

<section class="about-cta-section section">
    <div class="container text-center">
        <h2 class="mb-3" style="font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800;">
            {{ $isRtl ? 'جاهز تبدأ رحلتك المالية معنا؟' : 'Ready to start your financial journey with us?' }}
        </h2>
        <p class="text-muted mb-4" style="max-width: 620px; margin: 0 auto 2rem; font-size: 1.15rem;">
            {{ $isRtl ? 'قدّم طلبك الآن واستلم عروض تمويل مخصصة من أفضل البنوك والجهات التمويلية في المملكة خلال دقائق.' : 'Apply now and receive tailored financing offers from the top banks and financiers in the Kingdom within minutes.' }}
        </p>
        <a href="{{ route('financing-request') }}" class="hero-cta-main mid-cta-bar" style="margin: 0 auto;">
            <span class="mid-cta-glow"></span>
            <span class="mid-cta-content">
                <i class="fa-solid fa-hand-pointer mid-cta-icon"></i>
                <span class="mid-cta-text">{{ block('home.hero.cta_compare', $isRtl ? 'اطلب تمويلك الآن' : 'Request Your Financing Now') }}</span>
                <i class="fa-solid fa-arrow-{{ $isRtl ? 'left' : 'right' }} mid-cta-arrow"></i>
            </span>
        </a>
    </div>
</section>
@endsection