@extends('frontend.jpt.layout.mainlayout')


@section('content')
    <!-- === HEADER === -->
    <header>
        <h1>{!! __('home.navigation.forum') !!}</h1>
        <div class="banner-decoration"></div>
    </header>

    <section id="presentation" class="bg-6" data-animate>
        <div class="section-container">
            <h2>{{ __('home.sections.presentation') }}</h2>
            <div class="rtl-flex-row" style="display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 300px;">
                    <p class="intro-text double-line-height justify-text">
                        {!! __('home.presentation.content1') !!}
                    </p>
                    <p class="intro-text double-line-height justify-text">
                        {{ __('home.presentation.content2') }}
                    </p>
                </div>
                <div style="flex: 1; min-width: 300px; text-align: center;">
                    <img src="{{ URL::asset('assets/frontend/jpt/images/forum-tunis.jpg') }}"
                        alt="Coopération médicale internationale" style="width: 100%; max-width: 500px;">
                </div>
            </div>
        </div>
    </section>

    <section id="editorial" class="bg-1" data-animate>
        <div class="section-container">
            <h2>{{ __('home.sections.editorial') }}</h2>
            <div style="display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 300px;">
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content1') !!}
                    </p>
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content2') !!}
                    </p>
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content3') !!}
                    </p>
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content4') !!}
                    </p>
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content5') !!}
                    </p>
                    <p class="double-line-height justify-text">
                        {!! __('home.editorial.content6') !!}
                    </p>
                </div>
                <div style="flex: 1; min-width: 300px; text-align: center;">
                    <img src="{{ URL::asset('assets/frontend/jpt/images/ministre-mustapha-ferjani.jpg') }}"
                        alt="Ministre de la Santé Tunisie"
                        style="width: 100%; max-width: 400px; border-radius: 10px; box-shadow: var(--ombre);">
                </div>
            </div>
        </div>
    </section>

    <section id="objectifs" class="bg-6 objectifs" data-animate>
        <div class="section-container">
            <h2>{{ __('home.sections.objectives') }}</h2>
            <div class="rtl-flex-row"
                style="display: flex; align-items: center; gap: 40px; flex-wrap: wrap; flex-direction: row-reverse;">
                <div style="flex: 1; min-width: 300px;">
                    <ul>
                        @foreach (__('home.objectives.items') as $index => $item)
                            <li>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <style>
        header {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
                url({{ URL::asset('assets/frontend/jpt/images/banner-1.jpg') }}) center/cover fixed no-repeat;
        }
    </style>
@endsection