@extends('layouts.app')
@section('head')
    <x-meta
        title="B2B SaaS Hub: Expert Strategies & Growth Tips & Reports"
        description="Explore the B2B SaaS Hub for cutting-edge strategies and actionable tips tailored for SaaS entrepreneurs and marketers. Dive into our comprehensive guides, industry insights, and success stories."
        image="{{asset('b2bsaas.png')}}"
        url="{{route('hub')}}"
    />
@endsection
@section('content')
    <div class="max-w-7xl mx-auto pb-12 min-h-[400px]  px-4 sm:px-6 lg:px-8 2xl:px-0">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">B2B SaaS Hub</h1>
        <div class="max-w-5xl">
            <p class="mt-2 text-base leading-8 text-gray-600" x-data="{open:false}" x-id="['collapse']">
                Expert Insights and Strategies for Scaling Your B2B SaaS Business. Built for entrepreneurs, marketers, researchers.
                <span x-cloak
                      x-show="open"
                      x-collapse
                      :id="$id('collapse')">
                    Whether you're a startup founder, a marketing professional,
                    or a seasoned entrepreneur, our blog is designed to provide you with the knowledge and tools necessary to propel your business forward. Dive into our expertly curated content,
                    featuring the latest trends, actionable advice, and real-world case studies, all aimed at helping you navigate the complexities of the B2B SaaS landscape and achieve sustainable growth.
                </span>
                <button class="text-blue-500 px-3 text-sm"
                        @click="open = !open;"
                        :aria-controls="$id('collapse')"
                        :aria-expanded="open"
                >
                    <span x-text ="open ? 'Read less' : 'Read more'"></span>
                </button>
            </p>
        </div>

        <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20">
                    @if(!$posts->isEmpty())
                        @foreach($posts as $post)
                            <article class="relative isolate flex flex-col gap-8 lg:flex-row">
                                <div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-[2/1] lg:w-96 lg:shrink-0">
                                    <img src="{{$post->getFirstMediaUrl('cover','thumb')}}" loading="lazy" alt="{{$post->title}}" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
                                    <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                                </div>
                                <div>
                                    <div class="flex items-center text-xs divide-x divide-x-gray-200">
                                        <time class="text-gray-500 pr-3">{{$post->published_at->format('M d, Y')}}</time>
                                        <span class="text-gray-500 px-3  py-1.5">{{Str::readDuration($post->content)}} min read</span>
                                        @if($post->categories->count()>0)
                                            <div class="flex justify-start gap-3 items-center px-3">
                                                @foreach($post->categories as $category)
                                                    <a href="{{route('hub.category',$category->slug)}}" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">{{$category->name}}</a>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                    <div class="group relative max-w-xl">
                                        <h3 class="mt-3 text-xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
                                            <a href="{{route('hub.show',$post->slug)}}">
                                                <span class="absolute inset-0"></span>
                                                {{$post->title}}
                                            </a>
                                        </h3>
                                        <p class="mt-5 text-sm lg:text-base leading-6 text-gray-600 line-clamp-4">
                                            {{$post->excerpt}}
                                        </p>
                                    </div>
                                    <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                                        <div class="relative flex items-center gap-x-4">
                                            <img src="{{$post->author->getFirstMediaUrl('avatar','thumb')}}"  loading="lazy" alt="{{$post->author->name}}" class="h-10 w-10 rounded-full bg-gray-50">
                                            <div class="text-sm leading-6">
                                                <p class="font-semibold text-gray-900">
                                                    {{$post->author->name}}
                                                </p>
                                                @if($post->author->title)
                                                    <p class="text-gray-600 text-sm">{{$post->author->title}} @if($post->author->company) - {{$post->author->company->name}} @endif</p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    @else
                        <p class="text-gray-500">There are no content in this page yet.</p>
                    @endif
                    <div class="flex justify-start items-center gap-10">
                        {{--simple pagination--}}
                        {{$posts->links()}}
                    </div>
                </div>

    </div>
@endsection