@extends('components.web.main')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">

        {{-- News Hero Section - أهم أو آخر خبر --}}
        <div class="mb-12 wow animate__animated animate__fadeIn" data-wow-duration="1s">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                {{-- صورة الخبر الرئيسي --}}
                <div class="rounded-lg overflow-hidden shadow-2xl">
                    <img class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500 ease-in-out"
                        src="https://images.pexels.com/photos/2694037/pexels-photo-2694037.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                        alt="صورة الخبر الرئيسي">
                </div>

                {{-- تفاصيل الخبر الرئيسي --}}
                <div class="text-right">
                    <span class="bg-blue-600 text-white px-3 py-1 text-sm font-semibold rounded-full">الأبرز</span>
                    <h1 class="text-4xl md:text-5xl font-extrabold text-white my-4 leading-tight">
                        عنوان الخبر الرئيسي: انطلاقة جديدة لمنصتنا التعليمية
                    </h1>
                    <p class="text-gray-300 text-lg mb-6">
                        هذا النص هو وصف مختصر للخبر الرئيسي. يستعرض أهم النقاط والتفاصيل التي سيجدها القارئ عند الضغط لقراءة
                        المزيد...
                    </p>
                    <a href="#"
                        class="inline-block bg-white text-blue-800 font-bold text-lg px-8 py-3 rounded-md hover:bg-gray-200 transition-colors duration-300">
                        اقرأ المزيد
                        <i class="fas fa-arrow-left mr-2"></i>
                    </a>
                </div>
            </div>
        </div>

        {{-- Divider - خط فاصل --}}
        <div class="border-t border-gray-700 my-16"></div>

        {{-- All News Section - بقية الأخبار --}}
        <div>
            <h2 class="text-3xl font-bold text-white text-right mb-8 wow animate__animated animate__fadeInUp"
                data-wow-duration="1s">آخر الأخبار</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {{-- بطاقة الخبر 1 --}}
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg transform hover:-translate-y-2 transition-transform duration-300 wow animate__animated animate__fadeInUp"
                    data-wow-duration="1s" data-wow-delay="0.2s">
                    <img class="w-full h-48 object-cover"
                        src="https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                        alt="صورة خبر">
                    <div class="p-6 text-right">
                        <h3 class="text-xl font-bold text-white mb-2">عنوان الخبر الأول</h3>
                        <p class="text-gray-400 mb-4">وصف مختصر للخبر الأول. يمكن أن يحتوي على تفاصيل بسيطة تجذب القارئ...
                        </p>
                        <a href="#" class="font-semibold text-blue-400 hover:text-blue-300">التفاصيل ←</a>
                    </div>
                </div>

                {{-- بطاقة الخبر 2 --}}
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg transform hover:-translate-y-2 transition-transform duration-300 wow animate__animated animate__fadeInUp"
                    data-wow-duration="1s" data-wow-delay="0.4s">
                    <img class="w-full h-48 object-cover"
                        src="https://images.pexels.com/photos/590022/pexels-photo-590022.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                        alt="صورة خبر">
                    <div class="p-6 text-right">
                        <h3 class="text-xl font-bold text-white mb-2">عنوان الخبر الثاني</h3>
                        <p class="text-gray-400 mb-4">وصف مختصر للخبر الثاني. يمكن أن يحتوي على تفاصيل بسيطة تجذب القارئ...
                        </p>
                        <a href="#" class="font-semibold text-blue-400 hover:text-blue-300">التفاصيل ←</a>
                    </div>
                </div>

                {{-- بطاقة الخبر 3 --}}
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg transform hover:-translate-y-2 transition-transform duration-300 wow animate__animated animate__fadeInUp"
                    data-wow-duration="1s" data-wow-delay="0.6s">
                    <img class="w-full h-48 object-cover"
                        src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                        alt="صورة خبر">
                    <div class="p-6 text-right">
                        <h3 class="text-xl font-bold text-white mb-2">عنوان الخبر الثالث</h3>
                        <p class="text-gray-400 mb-4">وصف مختصر للخبر الثالث. يمكن أن يحتوي على تفاصيل بسيطة تجذب القارئ...
                        </p>
                        <a href="#" class="font-semibold text-blue-400 hover:text-blue-300">التفاصيل ←</a>
                    </div>
                </div>

                {{-- يمكنك تكرار بطاقات الأخبار هنا --}}
            </div>
        </div>

    </div>
@endsection