@extends('layouts.app')

@section('content')

{{-- HERO SECTION --}}
<section class="relative text-white overflow-hidden py-24 md:py-32" 
         style="background: radial-gradient(circle at 30% 50%, #1e293b 0%, #0f172a 70%, #000 100%);">
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute w-[400px] h-[400px] bg-blue-600/20 blur-3xl rounded-full -top-40 -left-40"></div>
    <div class="absolute w-[350px] h-[350px] bg-indigo-500/20 blur-3xl rounded-full bottom-0 right-0"></div>
  </div>
  
  <div class="relative z-10 container mx-auto px-4 md:px-6 lg:px-12 text-center">
    <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 text-white break-words">
      Shop
    </h1>
    <p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto break-words">
      Programs and guides to elevate your performance
    </p>
  </div>
</section>

{{-- PRODUCTS GRID --}}
<section class="py-16 md:py-24 bg-gradient-to-b from-[#1e293b] to-[#0f172a]">
  <div class="container mx-auto px-4 md:px-6 lg:px-12">
    
    @php 
      // Get WooCommerce products directly
      $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
        'orderby' => 'menu_order',
        'order' => 'ASC'
      );
      $products = new WP_Query($args);
    @endphp
    
    @if($products->have_posts())
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
        
        @while($products->have_posts())
          @php 
            $products->the_post();
            global $product;
            
            // Skip if not a product object
            if(!$product) continue;
          @endphp
          
          <a href="{{ get_permalink() }}" class="block group">
            <article class="bg-gradient-to-br from-gray-900/80 to-gray-800/80 rounded-2xl overflow-hidden border border-blue-500/30 hover:border-blue-500/60 transition-all duration-300 hover:transform hover:scale-105 cursor-pointer h-full flex flex-col">
              
              {{-- Product Image --}}
              <div class="relative h-64 sm:h-72 md:h-80 overflow-hidden flex-shrink-0">
                @if(has_post_thumbnail())
                  {!! get_the_post_thumbnail($product->get_id(), 'large', ['class' => 'w-full h-full object-cover group-hover:scale-110 transition-transform duration-500']) !!}
                @else
                  <div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-slate-800/40 flex items-center justify-center">
                    <span class="text-gray-500 text-lg">No image</span>
                  </div>
                @endif
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
                
                {{-- Sale badge if applicable --}}
                @if($product->is_on_sale())
                  <span class="absolute top-4 left-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold">
                    Sale
                  </span>
                @endif
              </div>
              
              {{-- Product Info --}}
              <div class="p-4 sm:p-6 flex-grow flex flex-col">
                <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors break-words hyphens-auto">
                  {{ get_the_title() }}
                </h3>
                
                <div class="text-blue-400 text-lg sm:text-xl font-bold mb-4 break-words">
                  {!! $product->get_price_html() !!}
                </div>
                
                @if($product->get_short_description())
                  <p class="text-gray-400 text-sm sm:text-base leading-relaxed line-clamp-3 flex-grow break-words">
                    {{ wp_strip_all_tags($product->get_short_description()) }}
                  </p>
                @endif
                
                <div class="mt-4">
                  <span class="inline-block px-4 py-2 text-sm sm:text-base bg-blue-600 text-white font-semibold rounded-full group-hover:bg-blue-700 transition-colors">
                    View Details
                  </span>
                </div>
              </div>
              
            </article>
          </a>
          
        @endwhile
        
        @php wp_reset_postdata(); @endphp
        
      </div>
      
      {{-- Custom Pagination --}}
      @if($products->max_num_pages > 1)
        <div class="mt-12 flex flex-wrap justify-center gap-2">
          @php
            $paged = get_query_var('paged') ? get_query_var('paged') : 1;
            $pages = $products->max_num_pages;
          @endphp
          
          @if($paged > 1)
            <a href="{{ get_pagenum_link($paged - 1) }}" 
               class="px-3 sm:px-4 py-2 text-sm sm:text-base bg-gray-800 text-white rounded hover:bg-gray-700 transition">
              Previous
            </a>
          @endif
          
          @for($i = 1; $i <= $pages; $i++)
            <a href="{{ get_pagenum_link($i) }}" 
               class="px-3 sm:px-4 py-2 text-sm sm:text-base {{ $i == $paged ? 'bg-blue-600' : 'bg-gray-800' }} text-white rounded hover:bg-blue-700 transition">
              {{ $i }}
            </a>
          @endfor
          
          @if($paged < $pages)
            <a href="{{ get_pagenum_link($paged + 1) }}" 
               class="px-3 sm:px-4 py-2 text-sm sm:text-base bg-gray-800 text-white rounded hover:bg-gray-700 transition">
              Next
            </a>
          @endif
        </div>
      @endif
      
    @else
      <div class="text-center py-16">
        <p class="text-gray-400 text-xl">No products found</p>
      </div>
    @endif
    
  </div>
</section>

<style>
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .hyphens-auto {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }
  
  .break-words {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* Override WooCommerce default styles that might cause spacing issues */
  .woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .woocommerce ul.products::before,
  .woocommerce ul.products::after {
    display: none !important;
  }
</style>

@endsection