@extends('front.layouts.app')

@section('title', 'من نحن | منصة MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/about.css') }}">
@endsection

@section('content')
    <!-- Story Section -->
    @if($about)
    <section class="story-section" style="padding: 80px 0;">
        <div class="container">
            <div class="story-grid">
                <div class="story-text">
                    <span class="section-label">قصتنا</span>
                    <h2>{{ $about->title }}</h2>
                    <p>{{ $about->description }}</p>
                    
                    <div class="story-stats">
                        @if($about->stat1_number)
                        <div class="stat-box">
                            <h3>{{ $about->stat1_number }}</h3>
                            <p>{{ $about->stat1_title }}</p>
                        </div>
                        @endif
                        
                        @if($about->stat2_number)
                        <div class="stat-box">
                            <h3>{{ $about->stat2_number }}</h3>
                            <p>{{ $about->stat2_title }}</p>
                        </div>
                        @endif
                        
                        @if($about->stat3_number)
                        <div class="stat-box">
                            <h3>{{ $about->stat3_number }}</h3>
                            <p>{{ $about->stat3_title }}</p>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="story-image">
                    @if($about->image)
                        <img src="{{ asset('storage/' . $about->image) }}" alt="{{ $about->title }}" width="600" height="700" loading="lazy">
                    @else
                        <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=600&h=700&fit=crop" alt="Medical Team" width="600" height="700" loading="lazy">
                    @endif
                </div>
            </div>
        </div>
    </section>
    @else
    <section class="story-section" style="padding: 100px 0; text-align: center;">
        <div class="container">
            <h2>قريباً...</h2>
            <p>نعمل حالياً على تجهيز محتوى هذه الصفحة.</p>
        </div>
    </section>
    @endif

    <!-- Mission & Vision -->
    @if($mv)
    <section class="mission-vision" style="padding: 80px 0; background-color: var(--bg-light);">
        <div class="container">
            <div class="mv-grid">
                <div class="mv-card">
                    <div class="mv-icon">
                        <i class="{{ $mv->vision_icon ?? 'fas fa-bullseye' }}"></i>
                    </div>
                    <h3>{{ $mv->vision_title }}</h3>
                    <p>{{ $mv->vision_description }}</p>
                </div>
                <div class="mv-card">
                    <div class="mv-icon">
                        <i class="{{ $mv->mission_icon ?? 'fas fa-rocket' }}"></i>
                    </div>
                    <h3>{{ $mv->mission_title }}</h3>
                    <p>{{ $mv->mission_description }}</p>
                </div>
            </div>
        </div>
    </section>
    @endif

    <!-- Values Section / Advantages -->
    @if($advantages->isNotEmpty())
    <section class="values-section" style="padding: 80px 0;">
        <div class="container">
            <div class="section-header" style="text-align: center; margin-bottom: 50px;">
                <span class="section-label">قيمنا</span>
                <h2>ما الذي يميزنا؟</h2>
            </div>
            <div class="values-grid">
                @foreach($advantages as $advantage)
                <div class="value-card">
                    <div class="value-icon">
                        <i class="{{ $advantage->icon }}"></i>
                    </div>
                    <h4>{{ $advantage->title }}</h4>
                    <p>{{ $advantage->description }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Team Section -->
    @if($teamMembers->isNotEmpty())
    <section class="team-section" style="padding: 80px 0; background-color: var(--bg-light);">
        <div class="container">
            <div class="section-header" style="text-align: center; margin-bottom: 50px;">
                <span class="section-label">فريقنا</span>
                <h2>نخبة من المتخصصين</h2>
            </div>
            <div class="team-grid">
                @foreach($teamMembers as $member)
                <div class="team-card">
                    <div class="team-image">
                        @if($member->image)
                            <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}" width="200" height="200" loading="lazy">
                        @else
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($member->name) }}&background=random&color=fff&size=200" alt="{{ $member->name }}" width="200" height="200" loading="lazy">
                        @endif
                    </div>
                    <h4>{{ $member->name }}</h4>
                    <p>{{ $member->description }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if($contactCta)
    <!-- CTA Section -->
    <section class="cta-section" style="padding: 80px 0; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; text-align: center;">
        <div class="container">
            <div class="cta-content">
                <h2 style="color: white; margin-bottom: 20px;">{{ $contactCta->title }}</h2>
                <p style="margin-bottom: 30px; opacity: 0.9;">{{ $contactCta->description }}</p>
                <a href="{{ $contactCta->button_link }}" class="btn-cta" style="display: inline-flex; align-items: center; gap: 10px; background: white; color: var(--primary-color); padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: transform 0.3s ease;">
                    <span>{{ $contactCta->button_text }}</span>
                    <i class="fas fa-arrow-left"></i>
                </a>
            </div>
        </div>
    </section>
    @endif
@endsection

@section('scripts')
    <script src="{{ asset('js/about.js') }}" defer></script>
@endsection