@extends('layouts.app')

@section('content')
<section class="relative pt-32 pb-24 bg-gradient-to-br from-blue-950 via-slate-900 to-black overflow-hidden text-white">
  {{-- Animated gradient glows --}}
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute w-[600px] h-[600px] bg-blue-600/20 blur-3xl rounded-full top-0 right-0 animate-pulse"></div>
    <div class="absolute w-[400px] h-[400px] bg-purple-600/20 blur-3xl rounded-full bottom-0 left-0 animate-pulse"></div>
  </div>

  <div class="container mx-auto px-4 sm:px-6 relative z-10">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-center mb-12 sm:mb-16 leading-tight">
      Shop Our
      <span class="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">Programs & Guides</span>
    </h1>

    @if (woocommerce_product_loop())
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
  @while (have_posts()) @php the_post() @endphp
    @php wc_get_template_part('content', 'product') @endphp
  @endwhile
</ul>

      <div class="mt-16 flex justify-center">
        @php do_action('woocommerce_after_shop_loop'); @endphp
      </div>
    @else
      <p class="text-center text-gray-400 text-lg">No products found.</p>
    @endif
  </div>
</section>

{{-- WooCommerce Cleanup Styles --}}
<style>
/* Typography & color fixes */
.woocommerce, .woocommerce-page {
  color: #e2e8f0 !important;
  font-family: inherit;
}
.woocommerce a, .woocommerce-page a {
  color: #3b82f6;
  transition: color 0.2s ease;
}
.woocommerce a:hover {
  color: #60a5fa;
}

/* Product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  color: #fff !important;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

/* Product prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #93c5fd !important;
  font-weight: 500;
  display: block;
  text-align: center;
}

/* Buttons */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff !important;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  transition: all 0.25s ease;
  border: none;
}
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

/* Forms and labels */
.woocommerce form .form-row label {
  color: #e2e8f0 !important;
}
.woocommerce form .input-text {
  background-color: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(59,130,246,0.3);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.woocommerce form .input-text:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Notices / messages */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
  background-color: rgba(30,41,59,0.8);
  color: #fff !important;
  border-left: 4px solid #3b82f6;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: #93c5fd;
  background: transparent;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: transparent;
}

/* Mobile spacing fixes */
@media (max-width: 640px) {
  .woocommerce ul.products li.product {
    padding: 1rem;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
  }
}
</style>
@endsection