@extends('layouts.public')

@section('content')
<main class="py-12">
     <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 text-center mb-4">
            Real Reviews from Real Users of Booking Agent Info
        </h1>
        <div class="text-lg text-gray-600 text-center max-w-4xl mx-auto">
            See why businesses and professionals worldwide trust Booking Agent Info (bookingagentinfo.com) — read our legit customer reviews and testimonials.
        </div>
    </section>

    <!-- Company Logos Section -->
    <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 items-center justify-items-center">
            <img src="{{secure_url('homes/brands')}}/coca-cola-logo.svg" alt="Coca-Cola" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/skims-logo.svg" alt="Skims" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/apple-tv-logo.svg" alt="Apple TV" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/c3-presents-logo.png" alt="C3 presents" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/tiffany-logo.svg" alt="Tiffany&Co" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/chanel-logo.svg" alt="Chanel" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/ogilvy-logo.svg" alt="Ogilvy" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/ritz-carlton-logo.svg" alt="Ritz Carlton" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/instagram-logo.svg" alt="Instagram" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/ted-logo.svg" alt="Ted" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/stubhub-logo.svg" alt="Stubhub" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/publicis-logo.svg" alt="Publicis" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/spotify-logo.svg" alt="Spotify" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/edelman-logo.svg" alt="Edelman" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/new-balance-logo.svg" alt="New Balance" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/nfl-logo.svg" alt="NFL" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/defected-logo.svg" alt="Defected" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/madison-square-garden.svg" alt="Madison Square Garden" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/espn-logo.svg" alt="ESPN" class="h-12 w-auto grayscale hover:grayscale-0 transition">
            <img src="{{secure_url('homes/brands')}}/vanity-fair-logo.svg" alt="Vanity Fair" class="h-12 w-auto grayscale hover:grayscale-0 transition">
        </div>
    </section>

     <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <header class="mb-8">
            <div class="text-2xl font-semibold text-gray-900">{{$reviewCount}} Review{{$reviewCount > 1 ? 's' : ''}}</div>
        </header>
        @if(!blank($reviews))
        <div id="reviews-container" class="grid md:grid-cols-2 gap-6">
            
            @include('public.partials.reviews-list', ['reviews' => $reviews])
           
          
        </div>
         @endif
        <div id="loader" class="text-center py-6 hidden">
            Loading more reviews...
       </div>
    </section>
      
 </div>   
@endsection

@push('javascript')
<script>
let page = 2;
let loading = false;

const loader = document.getElementById('loader');
const reviewsContainer = document.getElementById('reviews-container');

async function loadMoreReviews() {
    if (loading) return;
    loading = true;
    loader.classList.remove('hidden');

    const response = await fetch(`?page=${page}`);
    const html = await response.text();

    if (html.trim() !== '') {
        reviewsContainer.insertAdjacentHTML('beforeend', html);
        page++;
        loading = false;
        loader.classList.add('hidden');
    } else {
        observer.disconnect();
        loader.innerText = 'No more reviews';
    }
}

const observer = new IntersectionObserver(entries => {
    console.log(entries[0].isIntersecting)
    if (entries[0].isIntersecting) {
        loadMoreReviews();
    }
}, { root: null,                 // viewport
    rootMargin: '0px 0px 200px 0px',  // trigger 200px before bottom
    threshold: 0    });

observer.observe(loader);
</script>

@endpush