@extends('front.layouts.app')
@section('content')
    <main>
        <div class="w-full py-5 bg-hero">
            <div class="container-lg">
                <div class="text-center row justify-content-center">
                    <div class="col-12 col-md-10 col-lg-8">
                        <div class="display-6 fw-bold font-family-roboto-condensed mb-2">Your future depends<wbr> on today's
                            news.</div>
                        <div class="h4 fw-normal mb-4">In the fast-evolving world of AI and tech, staying updated is not
                            optional—it's critical for your future success. Stay updated with daily news from
                            <strong>FutureWalker</strong>.
                        </div>
                        <a href="#latest-news" class="btn btn-primary px-4 rounded-pill">Start reading now</a>
                    </div>
                </div>
            </div>
        </div>

        @if ($featured_posts->count() > 0)
            <div class="container-lg py-4">
                <div class="text-center">
                    <h2 id="latest-news" class="fw-bold font-family-roboto-condensed mb-3 h2">Featured News</h2>
                </div>

                <div class="row g-3">
                    @foreach ($featured_posts as $post)
                        <div class="col-12 col-md-4">
                            <div class="card border-0" style="height:100%;">
                                <div class="ratio ratio-16x9">
                                    <img src="{{ $post->featured_image }}" alt=""
                                        class="rounded-4 card-img-top shadow" style="object-fit: cover;">
                                </div>
                                <div class="card-body px-0">
                                    <h3 class="h4 fw-bold font-family-roboto-condensed mb-0">
                                        <a
                                            href="{{ route('front.post', ['category_slug' => $post->category->slug, 'slug' => $post->slug]) }}">{{ $post->title }}</a>
                                    </h3>
                                    <div class="mb-0"><small
                                                                class="text-secondary">{{ $post->published_at->diffForHumans() }}</small>
                                                                <i class="bi bi-dot"></i>
                                                                <small
                                                                class="text-secondary">{{ markdown_min_read($post->body) }}</small>
                                                        </div>
                                    <p>{{ str_first_sentence($post->bites) }}</p>
                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        @if ($latest_posts->count() > 0)
            <div class="container-lg py-4">


                <div class="row">
                    <div class="col-12 col-lg-8 mb-3">
                        <div class="text-start">
                            <h2 id="latest-news" class="fw-bold font-family-roboto-condensed mb-3 h2">Latest News</h2>
                        </div>
                        <div class="row g-2 mb-4">
                            @foreach ($latest_posts as $post)
                                <div class="col-12 col-md-6">
                                    <div class="card bg-white border-0 shadow" style="height:100%;">
                                        <div class="card-body d-flex p-2 p-lg-3">
                                            <div class="row align-self-center">
                                                <div class="col-3 col-lg-5 d-flex py-1" style="height:100%;">
                                                    <div class="align-self-center">
                                                        <img class="img-fluid rounded-2" src="{{ $post->featured_image }}"
                                                            alt="{{ $post->title }}">
                                                    </div>

                                                </div>
                                                <div class="col-9 col-lg-7 d-flex py-1" style="height:100%;">
                                                    <div class="align-self-center">
                                                        <div class="">
                                                            <h3 class="h6 mb-0 fw-bold font-family-roboto-condensed">
                                                                <a href="{{ route('front.post', ['category_slug' => $post->category->slug, 'slug' => $post->slug]) }}"
                                                                    class="fw-bold"
                                                                    style="  display: -webkit-box;
                                      -webkit-line-clamp: 2;
                                      -webkit-box-orient: vertical;  
                                      overflow: hidden;">{{ $post->title }}</a>
                                                            </h3>
                                                        </div>
                                                        <div><small
                                                                class="text-secondary">{{ $post->published_at->diffForHumans() }}</small>
                                                                <i class="bi bi-dot"></i>
                                                                <small
                                                                class="text-secondary">{{ markdown_min_read($post->body) }}</small>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        </div>
                        <div class="w-full text-center">
                            <a href="{{ route('front.all') }}"
                                class="btn btn-outline-primary px-4 rounded-pill text-decoration-none">Discover More
                                News</a>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4 mb-3">
                        <div class="position-sticky" style="top: 2rem;">
                            @include('front.partials.sidebar')


                        </div>
                    </div>
                </div>


            </div>
        @endif



    </main>
@endsection