@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 mb-4">
                    <div class="col-12 col-md-10 col-lg-8">


                      <h1 class="fw-bolder font-family-roboto-condensed mb-3">Latest AI & tech news in 1 hyper-focused platform</h1>
{{--                         <div class="display-6 fw-bold font-family-roboto-condensed mb-2">Your Future Depends<wbr> on Today's
                            News</div>
                        <h1 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 hourly news
                            <strong>FutureWalker</strong>.
                        </h1>

                        <a href="#latest-news" class="btn btn-primary px-4 rounded-pill text-decoration-none">Start reading
                            now</a>
                    </div> --}}
                </div>
                <div class="text-center row justify-content-center">
                    <div class="col-12 col-md-10 col-lg-6">

                        <p data-nosnippet class="h4 mb-3">📡 Top keywords identified for the past 24 hours across {{ $rss_count }} articles identified by GPT</p>

                        <div class="d-flex justify-content-center flex-wrap gap-1">
                        @foreach ($top_rss_keywords as $rss_keyword)
                            <a href="{{ get_route_search_result($rss_keyword->value_lowercased) }}"
                                class=" pb-1 badge text-primary border fw-bold shadow hover-grow">
                                <span class="h6">#{{ $rss_keyword->value }}</span>
                            </a>
                        @endforeach
                        </div>



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

        {{--         @if ($featured_posts->count() > 0)
            <div class="container-lg py-4">
                <div class="text-center">
                    <h2 id="latest-news" class="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 --}}


        <div id="latest-news" class="container-lg py-4">

            <div class="row">
                <div class="col-12 col-lg-8 mb-3">

                    @if ($rss_posts->count() > 0)
                        <div class="text-start mb-3">
                            <div class="d-flex">
                                <h2 class="align-self-center fw-bold font-family-roboto-condensed mb-1 h2">
                                    This Just In 🛰️</h2>
                                <div class="align-self-center">
                                    <span
                                        class="mb-2 ms-2 badge illuminated-slow bg-gradient-rainbow text-white d-inline-flex font-family-roboto-condensed"><i
                                            class="bi bi-clock-history me-1"></i> UPDATED HOURLY</span>
                                </div>

                            </div>

                        </div>


                        @include('front.partials.news_bites')

                        <div class="w-full text-center mt-3 mb-3">
                            <a href="{{ route('front.all') }}"
                                class="btn btn-primary px-4 rounded-pill text-decoration-none">Discover more news</a>
                        </div>
                    @endif

                    {{--                     @if ($latest_posts->count() > 0)
                        <div class="text-start">
                            <h2 id="latest-news" class="fw-semibold 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-12">
                                    <div class="card bg-white border-0 shadow" style="height:100%;">
                                        <div class="card-body d-flex px-3 py-2">

                                            <div class="row align-self-center">

                                                <div class="col-12 d-flex py-1" style="height:100%;">
                                                    <div class="align-self-center">
                                                        <div class="">
                                                            <h3 class="h5 mb-1 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 class="d-flex flex-wrap">
                                                            @foreach ($post->keywords as $keyword)
                                                                @if ($keyword == $post->main_keyword)
                                                                    <h4
                                                                        class=" pb-1 d-inline badge text-bg-dark me-1 small">
                                                                        {{ $keyword }}</h4>
                                                                @else
                                                                    <h4
                                                                        class=" pb-1 d-inline badge text-bg-light border me-1 small fw-normal">
                                                                        {{ $keyword }}</h4>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                        <div>
                                                            @if ($post->category)
                                                                <span
                                                                    class="d-inline text-secondary small">{{ $post->category->name }}</span>
                                                                <i class="bi bi-dot"></i>
                                                            @endif

                                                            <span
                                                                class="d-inline text-secondary small">{{ $post->published_at->diffForHumans() }}</span>
                                                            <i class="bi bi-dot"></i>
                                                            <span
                                                                class="d-inline text-secondary small">{{ markdown_min_read($post->body) }}</span>
                                                        </div>
                                                    </div>

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

                                </div>
                            @endforeach
                        </div>
                        <div class="w-full text-center mb-3">
                            <a href="{{ route('front.all') }}"
                                class="btn btn-primary px-4 rounded-pill text-decoration-none">Discover More
                                News</a>
                        </div>
                    @endif --}}

                </div>
                <div class="col-12 col-lg-4 mb-3">
                    <div class="position-sticky" style="top: 8rem;">
                        @include('front.partials.sidebar')


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

        </div>

    </main>
@endsection