@extends('layouts.site')

@section('content')
@php
    $isAr = $locale === 'ar';
    $nameField = $isAr ? 'name_ar' : 'name_en';
    $titleField = $isAr ? 'title_ar' : 'title_en';
    $summaryField = $isAr ? 'summary_ar' : 'summary_en';
    $excerptField = $isAr ? 'excerpt_ar' : 'excerpt_en';
    $labelField = $isAr ? 'label_ar' : 'label_en';
    $suffixField = $isAr ? 'suffix_ar' : 'suffix_en';
@endphp

<section class="hero">
    <div class="hero-media">
        <img src="{{ asset('media/صور من المركز/0K6A9138.JPG.jpeg') }}" alt="{{ $isAr ? 'مركز الإحسان' : 'Al-Ihsan Center' }}">
    </div>
    <div class="container hero-content reveal">
        <span class="eyebrow">{{ $isAr ? 'مؤسسة حكومية يمنية' : 'Yemeni Government Program' }}</span>
        <h1>{{ $isAr ? 'البرنامج الوطني لرعاية وإيواء المتشردين المرضى النفسيين غير المصحوبين' : 'National Program for Care and Shelter of Unaccompanied Homeless Psychiatric Patients' }}</h1>
        <p>{{ $isAr ? 'من الشارع إلى الرعاية... ومن الرعاية إلى حياة كريمة عبر الإنقاذ والإيواء والعلاج والتأهيل والتمكين.' : 'From the street to care, and from care to a dignified life through rescue, shelter, treatment, rehabilitation, and empowerment.' }}</p>
        <div class="hero-actions">
            <a class="btn btn-primary" href="{{ url('/' . $locale . '/journey') }}">{{ $isAr ? 'استكشف رحلة المستفيد' : 'Explore the Journey' }}</a>
            <a class="btn btn-light" href="{{ url('/' . $locale . '/media') }}">{{ $isAr ? 'المركز الإعلامي' : 'Media Center' }}</a>
        </div>
    </div>
</section>

<section class="stats-band">
    <div class="container stats-grid">
        @foreach ($stats as $stat)
            <article class="stat-card reveal">
                <strong>{{ $stat->value }}{{ $stat->{$suffixField} }}</strong>
                <span>{{ $stat->{$labelField} }}</span>
            </article>
        @endforeach
    </div>
</section>

<section class="section">
    <div class="container split">
        <div class="section-copy reveal">
            <span class="eyebrow">{{ $isAr ? 'مركز الإحسان' : 'Al-Ihsan Center' }}</span>
            <h2>{{ $isAr ? 'النموذج الرئيسي والتجريبي الحالي للبرنامج' : 'The Current Main Pilot Model' }}</h2>
            <p>{{ $isAr ? 'يستقبل المركز المستفيدين أولاً، ثم يوفر النظافة والحلاقة والملابس والغذاء والإيواء والأدوية، مع متابعة طبية ونفسية واجتماعية ورقابية على مدار الساعة.' : 'The center receives beneficiaries, provides hygiene care, grooming, clothing, food, shelter, and medication, with 24/7 medical, psychiatric, social, and supervision support.' }}</p>
            <a class="text-link" href="{{ url('/' . $locale . '/centers') }}">{{ $isAr ? 'عرض المراكز والفروع' : 'View Centers' }}</a>
        </div>
        <div class="image-mosaic reveal">
            <img src="{{ asset('media/صور من المركز/0K6A9073.JPG.jpeg') }}" alt="">
            <img src="{{ asset('media/صور من المركز/0K6A6488.JPG.jpeg') }}" alt="">
        </div>
    </div>
</section>

<section class="section section-muted">
    <div class="container">
        <div class="section-heading reveal">
            <span class="eyebrow">{{ $isAr ? 'الخدمات الأساسية' : 'Core Services' }}</span>
            <h2>{{ $isAr ? 'رعاية شاملة تحمي الإنسان وتعيد له مساره' : 'Integrated Care That Restores Dignity' }}</h2>
        </div>
        <div class="service-grid">
            @foreach ([
                [$isAr ? 'الإنقاذ والاستقبال' : 'Rescue and Admission', $isAr ? 'جمع الحالات من الشوارع والطرقات واستقبالها بكرامة.' : 'Identifying street cases and receiving them with dignity.'],
                [$isAr ? 'الرعاية الصحية والنفسية' : 'Medical and Psychiatric Care', $isAr ? 'متابعة أطباء نفسيين وأطباء مختصين في الطب البشري.' : 'Follow-up by psychiatrists and medical specialists.'],
                [$isAr ? 'الإيواء والنظافة' : 'Shelter and Hygiene', $isAr ? 'غرف مجهزة، ملابس جديدة، نظافة يومية، وطعام وشراب.' : 'Equipped rooms, new clothing, daily hygiene, food, and water.'],
                [$isAr ? 'التأهيل والأنشطة' : 'Rehabilitation Activities', $isAr ? 'رياضة وثقافة واجتماعيات ومصلى ومركز ثقافي.' : 'Sports, culture, social activities, prayer space, and cultural center.'],
                [$isAr ? 'لم الشمل' : 'Family Reunification', $isAr ? 'مختصون اجتماعيون يبحثون عن الأسر ويتواصلون معها.' : 'Social specialists trace families and reconnect beneficiaries.'],
                [$isAr ? 'التمكين والدمج' : 'Empowerment and Reintegration', $isAr ? 'توظيف أو مشاريع صغيرة مع أدوية مجانية مدى الحياة.' : 'Employment or small businesses with lifelong free medication.'],
            ] as $service)
                <article class="service-card reveal">
                    <h3>{{ $service[0] }}</h3>
                    <p>{{ $service[1] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-heading reveal">
            <span class="eyebrow">{{ $isAr ? 'رحلة المستفيد' : 'Beneficiary Journey' }}</span>
            <h2>{{ $isAr ? 'تسع مراحل من الإنقاذ إلى الدمج المجتمعي' : 'Nine Stages From Rescue to Reintegration' }}</h2>
        </div>
        @include('site.partials.journey-timeline')
    </div>
</section>

<section class="section section-muted">
    <div class="container cards-section">
        <div class="section-heading reveal">
            <span class="eyebrow">{{ $isAr ? 'القيادة والكوادر' : 'Leadership' }}</span>
            <h2>{{ $isAr ? 'قيادة متخصصة وكوادر تعمل على مدار الساعة' : 'Specialized Leadership and Dedicated Teams' }}</h2>
        </div>
        <div class="people-grid">
            @foreach ($leaders as $leader)
                <article class="person-card reveal">
                    <img src="{{ \App\Support\MediaUrl::to($leader->image) }}" alt="{{ $leader->{$nameField} }}">
                    <div>
                        <h3>{{ $leader->{$nameField} }}</h3>
                        <p>{{ $leader->{$titleField} }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-heading reveal">
            <span class="eyebrow">{{ $isAr ? 'مشاريعنا' : 'Projects' }}</span>
            <h2>{{ $isAr ? 'من الرعاية إلى الاستقلال الكريم' : 'From Care to Dignified Independence' }}</h2>
        </div>
        <div class="content-grid">
            @foreach ($projects as $project)
                <article class="content-card reveal">
                    <img src="{{ \App\Support\MediaUrl::to($project->image) }}" alt="{{ $project->{$nameField} }}">
                    <div>
                        <h3>{{ $project->{$nameField} }}</h3>
                        <p>{{ $project->{$summaryField} }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="section section-muted">
    <div class="container split partners-highlight">
        <div class="section-copy reveal">
            <span class="eyebrow">{{ $isAr ? 'شركاؤنا' : 'Partners' }}</span>
            <h2>{{ $isAr ? 'بدعم رئيسي من الهيئة العامة للزكاة' : 'Main Support by the General Authority of Zakat' }}</h2>
            <p>{{ $isAr ? 'يمثل الدعم المؤسسي ركيزة أساسية لاستدامة الرعاية والتوسع المستقبلي في المراكز والخدمات.' : 'Institutional support is essential to sustaining care and enabling future expansion of centers and services.' }}</p>
        </div>
        <div class="partner-logo reveal">
            <img src="{{ asset('media/الهيئة_العامة_للزكاة.jpg') }}" alt="{{ $isAr ? 'الهيئة العامة للزكاة' : 'General Authority of Zakat' }}">
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-heading reveal">
            <span class="eyebrow">{{ $isAr ? 'آخر المستجدات' : 'Latest Updates' }}</span>
            <h2>{{ $isAr ? 'أخبار وقصص ومواد توعوية' : 'News, Stories, and Awareness Materials' }}</h2>
        </div>
        <div class="content-grid">
            @foreach ($latestPosts as $post)
                <article class="content-card reveal">
                    <img src="{{ \App\Support\MediaUrl::to($post->image) }}" alt="{{ $post->{$titleField} }}">
                    <div>
                        <span class="tag">{{ $post->type }}</span>
                        <h3>{{ $post->{$titleField} }}</h3>
                        <p>{{ $post->{$excerptField} }}</p>
                        <a class="text-link" href="{{ url('/' . $locale . '/media/' . $post->type . '/' . $post->slug) }}">{{ $isAr ? 'اقرأ المزيد' : 'Read more' }}</a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="cta-band">
    <div class="container cta-inner reveal">
        <h2>{{ $isAr ? 'ساهم في صناعة فرصة جديدة لحياة كريمة' : 'Help Create a New Chance for Dignified Life' }}</h2>
        <div>
            <a class="btn btn-primary" href="{{ url('/' . $locale . '/donate') }}">{{ $isAr ? 'تبرع الآن' : 'Donate Now' }}</a>
            <a class="btn btn-light" href="{{ url('/' . $locale . '/contact') }}">{{ $isAr ? 'تواصل معنا' : 'Contact Us' }}</a>
        </div>
    </div>
</section>
@endsection