@extends('layouts.public')

@push('css')
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>

<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
  /* ---------- Existing + new visual rules ---------- */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 30s linear infinite;
  }

  .bg-home { background: #fffae8; }

  .home-image{
     border-radius: 24px;
     box-shadow: 15px 15px 0 0 #fdcd1c;
     overflow: hidden;
  }

  .home-image img{
     width: 640px;
     margin-right: 20px;
     display:block;
  }

  /* AOS overrides for bold feel (Option C) */
  [data-aos] { will-change: transform, opacity; }
  .aos-animate[data-aos^="zoom"] { transform-origin: center; }

  /* make AOS stronger by default — durations & easing */
  .aos-animate { transition-duration: 700ms !important; transition-timing-function: cubic-bezier(.22,.9,.32,1) !important; }

  /* Card hover */
  .card-hover { transition: transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s; }
  .card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 40px rgba(3,7,18,0.12); }

  /* Swiper arrows (BookingAgentInfo style) */
  .swiper-button-prev, .swiper-button-next {
    background: rgba(17,24,39,0.12);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(3,7,18,0.08);
  }
  .swiper-button-prev:hover, .swiper-button-next:hover {
    background: rgba(17,24,39,0.18);
    transform: scale(1.05);
  }

  /* Parallax helpers */
  .parallax { will-change: transform; transform: translate3d(0,0,0); }
  .hero-bg { position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; }
  .map-bg  { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }

  /* Accessibility helper */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* Respect reduced motion: we'll disable animations via JS too, but include a CSS fallback */
  @media (prefers-reduced-motion: reduce) {
    .animate-marquee { animation-play-state: paused !important; }
    .aos-animate, [data-aos] { transition: none !important; transform: none !important; opacity: 1 !important; }
  }
</style>
@endpush

@section('content')
<div id="homePage" class="page-content">

    <!-- HERO SECTION (with parallax background) -->
    <section class="relative text-gray-900 py-20 bg-[#F4F4F4] overflow-hidden">
      <!-- parallax hero background -->
      <div class="hero-bg parallax" id="heroBg" style="background-image:url('https://images.unsplash.com/photo-1526772662000-3f88f10405ff?q=80&w=1600&auto=format&fit=crop'); opacity:.98;"></div>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-4xl mx-auto">
          <h1 class="text-xl md:text-xl font-medium mb-6 text-[#003366]" data-aos="flip-up" data-aos-duration="900" data-aos-once="true">
              Connect with Top Talent Worldwide
          </h1>

          <p class="text-3xl font-bold mb-2 text-[#003366]" data-aos="zoom-in" data-aos-duration="900" data-aos-delay="120" data-aos-once="true">
              Access verified contact information for celebrities, athletes, speakers, and influencers. Over 200,000+ verified contacts.
          </p>

          <div class="text-center max-w-xl mx-auto">
              <p class="text-sm mb-8 text-[#333333]" data-aos="fade-up" data-aos-delay="220" data-aos-once="true">
                  Access data on talent in music, sports, film/TV, comedy, and influencers. Get contact info and data on their endorsements, event bookings, social media stats, and charitable involvements.
              </p>
          </div>

          <!-- Search Bar -->
          <div class="relative max-w-2xl mx-auto" data-aos="zoom-in-up" data-aos-delay="340" data-aos-duration="800" data-aos-once="true">
              <input type="text" placeholder="Search for celebrities, athletes, speakers..." class="search-glow w-full px-6 py-4 pr-32 rounded-full text-[#333333] text-lg border focus:outline-none border-[#003366] bg-white" aria-label="Search for talent">
              <button class="absolute right-2 top-2 bg-[#00B3B3] hover:bg-[#003366] text-white px-8 py-2 rounded-full font-semibold transition" aria-label="Search">
                  <i class="fas fa-search mr-2" aria-hidden="true"></i>Search
              </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Client Logos Carousel (marquee) -->
    <section class="bg-[#F4F4F4] py-6" data-aos="fade-left" data-aos-duration="1200" data-aos-once="true">
        <div class="container mx-auto px-4">
            <div class="relative overflow-hidden">
                <div class="flex animate-marquee whitespace-nowrap space-x-12">
                    <img src="{{secure_url('homes/brands')}}/coca-cola-logo.svg" alt="Coca-Cola" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/skims-logo.svg" alt="Skims" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/apple-tv-logo.svg" alt="Apple TV" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/c3-presents-logo.png" alt="C3 presents" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/tiffany-logo.svg" alt="Tiffany&Co" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/chanel-logo.svg" alt="Chanel" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/ogilvy-logo.svg" alt="Ogilvy" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/ritz-carlton-logo.svg" alt="Ritz Carlton" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/instagram-logo.svg" alt="Instagram" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/ted-logo.svg" alt="Ted" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/stubhub-logo.svg" alt="Stubhub" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/publicis-logo.svg" alt="Publicis" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/spotify-logo.svg" alt="Spotify" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/edelman-logo.svg" alt="Edelman" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/new-balance-logo.svg" alt="New Balance" class="h-8 object-contain">
                    <!-- repeat logos to enable continuous loop -->
                    <img src="{{secure_url('homes/brands')}}/coca-cola-logo.svg" alt="" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/skims-logo.svg" alt="" class="h-8 object-contain">
                    <img src="{{secure_url('homes/brands')}}/apple-tv-logo.svg" alt="" class="h-8 object-contain">
                </div>
            </div>
        </div>
    </section>

    <!-- Verified Celebrity Contact List -->
    <section class="py-16 bg-[#fffae8]" data-aos="zoom-in" data-aos-duration="900" data-aos-once="true">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold text-[#003366] mb-4" data-aos="flip-left" data-aos-delay="80" data-aos-once="true">Verified Celebrity Contact List</h2>
                <p class="text-xl text-[#333333]" data-aos="fade-up" data-aos-delay="160" data-aos-once="true">See how we've helped brands connect with talent</p>
            </div>

            <div class="flex items-center justify-center">
                <div class="home-image" data-aos="zoom-in-up" data-aos-delay="240" data-aos-once="true">
                    <img src="{{secure_url('homes')}}/step-1.jpg" alt="Verified celebrity contact list" />
                </div>
            </div>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="relative w-full h-[320px] flex items-center justify-center bg-cover bg-center" style="" data-aos="fade-up" data-aos-duration="900" data-aos-once="true">
        <div class="text-center flex flex-col items-center justify-center space-y-4 px-4">
            <h2 class="text-4xl font-bold text-[#003366]" data-aos="zoom-in" data-aos-delay="80" data-aos-once="true">About Us</h2>
            <h2 class="text-xl font-semibold text-[#333333]" data-aos="fade-up" data-aos-delay="160" data-aos-once="true">
                HERE’S HOW WE CONCEIVED THE IDEA
            </h2>
            <a href="{{route('home')}}" 
               class="mt-4 px-6 py-3 bg-[#00B3B3] hover:bg-[#003366] text-white font-semibold rounded transition" data-aos="zoom-in" data-aos-delay="300" data-aos-once="true">
                Learn MORE
            </a>
        </div>
    </section>

    <!-- Recent Success Stories (replacing with Swiper carousel integrated earlier) -->
    <section class="py-16 bg-[#fffae8]" aria-label="Recent success stories" data-aos="fade-up" data-aos-duration="900" data-aos-once="true">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold text-[#003366] mb-4">Recent Success Stories</h2>
          <p class="text-xl text-[#333333]">See how we've helped brands connect with talent</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <div class="card-hover bg-white rounded-xl p-6 shadow-lg" data-aos="flip-left" data-aos-delay="120" data-aos-once="true">
            <div class="badge-verified bg-[#003366] text-white px-3 py-1 rounded-full text-sm inline-block mb-4">
              <i class="fas fa-check-circle mr-1" aria-hidden="true"></i>Verified
            </div>
            <h3 class="font-bold text-xl text-[#003366] mb-2">Tech Conference 2025</h3>
            <p class="text-[#333333] mb-4">Connected Silicon Valley startup with renowned tech innovator for keynote speech</p>
          </div>

          <div class="card-hover bg-white rounded-xl p-6 shadow-lg" data-aos="flip-left" data-aos-delay="240" data-aos-once="true">
            <div class="badge-verified  bg-blue-800  text-white px-3 py-1 rounded-full text-sm inline-block mb-4">
              <i class="fas fa-check-circle mr-1" aria-hidden="true"></i>Verified
            </div>
            <h3 class="font-bold text-xl text-gray-900 mb-2">Sports Brand Campaign</h3>
            <p class="text-gray-600 mb-4">Matched global athletic brand with Olympic champion for endorsement deal</p>
          </div>

          <div class="card-hover bg-white rounded-xl  p-6 shadow-lg" data-aos="flip-left" data-aos-delay="360" data-aos-once="true">
            <div class="badge-verified text-white px-3 py-1 rounded-full text-sm inline-block mb-4  bg-blue-800 ">
              <i class="fas fa-check-circle mr-1" aria-hidden="true"></i>Verified
            </div>
            <h3 class="font-bold text-xl text-gray-900 mb-2">Music Festival Booking</h3>
            <p class="text-gray-600 mb-4">Helped festival organizer secure Grammy-winning artist as headliner</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials Swiper (kept as separate section but with AOS entry) -->
    @if(!blank($reviews))
    <section class="py-16" data-aos="fade-up" data-aos-duration="900" data-aos-once="true">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center mb-6">What Our Customers Say</h2>

        <div class="relative">
          <div class="swiper mySwiper" aria-label="Customer testimonials slider">
            <div class="swiper-wrapper">
              
            @foreach($reviews as $review)
              <div class="swiper-slide">
                <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition card-hover">
                  <div class="flex items-start mb-4">
                    <img src="{{avatar_exists(secure_url('user_img'."/".$review->pics))}}" alt="{{$review->name}}" class="w-16 h-16 rounded-full mr-4">
                    <div>
                      <div class="font-semibold text-gray-900">{{$review->name}}</div>
                      <div class="text-sm text-gray-600">{{$review->role}}</div>
                    </div>
                  </div>
                  <div class="text-gray-700">{{$review->message}}</div>
                </div>
              </div>
            @endforeach

            </div>
          </div>

          <!-- Navigation Arrows -->
          <div class="swiper-button-prev" aria-label="Previous testimonial"></div>
          <div class="swiper-button-next" aria-label="Next testimonial"></div>
        </div>
      </div>
    </section>
    @endif

    <!-- Global Database Section (map background with parallax) -->
    <section 
        class="relative pt-16 pb-16 bg-black bg-cover bg-center overflow-hidden"
        style=""
        data-aos="fade-up" data-aos-duration="900" data-aos-once="true"
    >
        <div id="mapBg" class="map-bg parallax" style="background-image: url('{{secure_url('homes')}}/map.png'); opacity:.95;"></div>

        <div class="absolute left-0 top-1/4 w-32 h-32 bg-white rounded-full opacity-20 -translate-x-1/2 parallax" data-depth="0.08"></div>
        <div class="absolute right-0 top-1/3 w-40 h-40 bg-white rounded-full opacity-20 translate-x-1/2 parallax" data-depth="0.12"></div>

        <div class="relative max-w-6xl mx-auto px-4 text-center text-white flex flex-col items-center space-y-6">
            <div class="text-lg font-medium tracking-wide uppercase">A Global Database</div>
            <h2 class="text-4xl md:text-5xl font-bold">
                Your Gateway to <span class="font-extrabold text-[#003366]">The World's Stars</span>
            </h2>
            <p class="text-base md:text-lg max-w-3xl leading-relaxed">
                From Hollywood's A-listers lighting up the silver screen to captivating local sensations across Asia's bustling cities and Africa's vibrant landscapes...
            </p>
            <a href="{{route('auth.signup')}}" 
               class="mt-4 px-8 py-3 bg-[#00B3B3] hover:bg-[#003366] rounded-full text-white font-semibold transition"
               data-aos="zoom-in" data-aos-delay="180" data-aos-once="true"
            >
                Sign Up for Free
            </a>
        </div>
    </section>

</div>   <!-- /#homePage -->
@endsection

@push('javascript')
<!-- Swiper JS CDN -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- AOS JS CDN -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

<script>
  (function () {
    // Respect user motion preference
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Initialize Swiper (keeps your previously defined config)
    const swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 20,
      loop: true,
      autoplay: prefersReduced ? false : {
        delay: 3000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        1024: { slidesPerView: 3 },
      },
    });

    // Initialize AOS if motion not reduced
    if (!prefersReduced) {
      AOS.init({
        duration: 800,
        easing: 'cubic-bezier(.22,.9,.32,1)',
        once: true,
        offset: 120,
        mirror: false
      });
    } else {
      // If reduced motion: mark all AOS elements visible
      document.querySelectorAll('[data-aos]').forEach(el => {
        el.style.opacity = 1;
        el.removeAttribute('data-aos');
      });
    }

    /* ---------- lightweight parallax for hero + map + decor ---------- */
    const parallaxEls = Array.from(document.querySelectorAll('.parallax'));
    // For more control, data-depth attribute supported on some elements
    parallaxEls.forEach(el => {
      if (!el.dataset.depth) el.dataset.depth = el.classList.contains('map-bg') ? '0.04' : '0.06';
    });

    function shouldDisableParallax() {
      return prefersReduced || window.innerWidth < 768;
    }

    let latestScroll = 0;
    let ticking = false;
    function onScroll() {
      latestScroll = window.scrollY || window.pageYOffset;
      requestTick();
    }
    function requestTick() {
      if (!ticking) {
        requestAnimationFrame(updateParallax);
        ticking = true;
      }
    }

    function updateParallax() {
      const scrollY = latestScroll;
      const globalMultiplier = 0.85;
      parallaxEls.forEach(el => {
        if (shouldDisableParallax()) {
          el.style.transform = 'translate3d(0,0,0)';
          return;
        }
        const depth = parseFloat(el.dataset.depth) || 0.05;
        const moveY = - (scrollY * depth * globalMultiplier);
        const moveX = (scrollY * depth * 0.001); // tiny lateral shift
        el.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
      });
      ticking = false;
    }

    // Attach only if not reduced motion
    if (!shouldDisableParallax()) {
      window.addEventListener('scroll', onScroll, { passive: true });
      // initial update
      latestScroll = window.scrollY || window.pageYOffset;
      requestTick();
    } else {
      parallaxEls.forEach(el => el.style.transform = 'none');
    }

    // Improve marquee performance by pausing on hover/focus
    document.querySelectorAll('.animate-marquee').forEach(m => {
      m.addEventListener('mouseenter', () => { m.style.animationPlayState = 'paused'; });
      m.addEventListener('mouseleave', () => { if (!prefersReduced) m.style.animationPlayState = 'running'; });
      m.addEventListener('focusin', () => { m.style.animationPlayState = 'paused'; });
      m.addEventListener('focusout', () => { if (!prefersReduced) m.style.animationPlayState = 'running'; });
    });

    // Optional: refresh AOS after images or swiper updates
    window.addEventListener('load', () => { if (!prefersReduced && window.AOS) AOS.refresh(); });
    // Also refresh AOS after swiper images load (if lazy loaded)
    swiper.on && swiper.on('imagesReady', () => { if (!prefersReduced && window.AOS) AOS.refresh(); });

  })();
</script>
@endpush