@extends('layouts.app')


@section('content')
    {{-- Hero --}}
    <section class="page-hero">
        <div class="page-hero-bg"
            style="background-image:url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?w=1920&q=80')"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <div class="page-hero-title">Our <span style="color:var(--brand)">Blog</span></div>
            <div class="breadcrumb-nav">
                <a href="{{ route('home') }}">Home</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">Blog</span>
            </div>
        </div>
    </section>

    {{-- Blog Grid --}}
    <section class="section-pad">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="section-badge-dubble">Latest Articles</span>
                <h2 class="section-title">Real Estate <span>Insights</span></h2>
                <p class="section-subtitle">Stay updated with the latest market trends, property tips, and EPDL news.</p>
            </div>

            <div class="row gy-4 gx-md-4">
                @php
                    $posts = [
                        [
                            'title' => 'Your Gateway to Exceptional Living: EPDL’s Top Properties',
                            'cat' => 'Commercial',
                            'img' => asset('assets/img/blog/blog-1.png'),
                            'date' => 'Jan 15, 2024',
                            'author' => 'EPDL Team',
                            'excerpt' =>
                                'Explore EPDL’s premier properties, where luxury meets comfort and style. Discover your gateway to exceptional living with our exclusive range of top-tier residences and estates. Elevate your lifestyle with EPDL’s unparalleled commitment to quality and sophistication. Welcome home to a life of luxury and elegance.',
                            'route' => route('blog.details-one'),
                        ],

                        [
                            'title' => 'Discover Prime Real Estate Opportunities with EPDL',
                            'cat' => 'Development',
                            'img' => asset('assets/img/blog/blog-2.png'),
                            'date' => 'Jan 15, 2024',
                            'author' => 'EPDL Team',
                            'excerpt' =>
                                'Explore a world of potential with EPDL’s prime real estate opportunities. Whether you’re looking to invest, buy your first home, or upgrade your lifestyle, our curated listings offer the perfect match. Let EPDL guide you to properties that promise value, comfort, and long-term growth.',

                            'route' => route('blog.details-two'),
                        ],

                        [
                            'title' => 'Unlock Your Future: EPDL’s Exclusive Real Estate Listings',
                            'cat' => 'Residential',
                            'img' => asset('assets/img/blog/blog-3.png'),
                            'date' => 'Jan 15, 2024',
                            'author' => 'EPDL Team',
                            'excerpt' =>
                                'Discover the key to your dream home with EPDL’s exclusive real estate listings. From modern city apartments to serene suburban retreats, we offer properties that match your vision for the future. Start your journey toward exceptional living with trusted expertise and premium selections from EPDL.',

                            'route' => route('blog.details-three'),
                        ],
                    ];
                @endphp

                @foreach ($posts as $i => $post)
                    <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-delay="{{ $i * 80 }}">
                        <div class="blog-card">
                            <div class="blog-card-img">
                                <img src="{{ $post['img'] }}" alt="{{ $post['title'] }}" loading="lazy">
                                <span class="blog-card-cat">{{ $post['cat'] }}</span>
                            </div>
                            <div class="blog-card-body">
                                {{-- <div class="blog-meta">
                                    <span><i class="bi bi-calendar3"></i>{{ $post['date'] }}</span>
                                    <span><i class="bi bi-person"></i>{{ $post['author'] }}</span>
                                </div> --}}
                                <h5>{{ $post['title'] }}</h5>
                                <p>{{ Str::limit($post['excerpt'], 80) }}</p>
                                <a href="{{ $post['route'] }}" class="blog-read-more">
                                    Read Article <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

            {{-- Pagination --}}
            {{-- <div class="d-flex justify-content-center mt-5 gap-2">
                @foreach ([1, 2, 3] as $p)
                    <button
                        style="width:40px;height:40px;border-radius:8px;border:2px solid {{ $p === 1 ? 'var(--brand)' : 'var(--gray-light)' }};background:{{ $p === 1 ? 'var(--brand)' : 'white' }};color:{{ $p === 1 ? 'white' : 'var(--dark)' }};font-weight:600;font-size:.88rem;cursor:pointer;transition:all .3s;">
                        {{ $p }}
                    </button>
                @endforeach
            </div> --}}
        </div>
    </section>
@endsection