@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar');
    <div class="w-full relative">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/about-us-banner.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">PRODUCT</h1>
            <p class=" text-white py-2">
                <a href="{{ url('/') }}" class="text-white hover:text-orange-500">HOME</a> / PRODUCTS</p>
        </div>
    </div>
    <img src="{{ asset('images/images/product-mesh-background.png') }}" alt="product mesh background"
        class="absolute object-cover w-full hidden lg:block">
    <div class="mb-24">
        <div class="flex justify-center pt-8 mt-6 lg:pt-32">
            <img src="{{ asset('images/icons/icon-steel.png') }}" alt="Steel Icon" class="w-5 h-5">
            <h2 class="text-[#ef5400] italic">About Our Products</h2>
        </div>
        <div>
            <h1 class="anton-regular text-6xl text-center">PRODUCTS <span class="text-[#ef5400]">CATEGORY</span></h1>
            <p class="text-center lg:px-96 py-4 text-xl">Explore our wide range of high-quality steel products, designed to meet all your construction and industrial needs.
            </p>
        </div>
      
            <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-6 md:px-14">
                @foreach ($productCategories as $category)
                    <div class="relative group w-full  max-w-xl mx-auto overflow-hidden mt-4">
                        <!-- Image -->
                        <a href="{{ route('products.show', $category->slug) }}">
                        <img src="{{ asset($category->image) }}" alt="{{ $category->name }}"
                            class="w-full h-64 object-fit rounded-lg m-2">
                        </a>
                        <!-- Initial label (shown by default) -->
                        <div
                            class="absolute  bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-orange-500 text-white font-bold rounded-full text-center group-hover:hidden">
                            {{ strtoupper($category->name) }}
                        </div>
    
                        <!-- Hover content (scroll-up effect) -->
                    <div class="absolute bottom-4 left-4 right-2 bg-white bg-opacity-90 p-4 px-2 rounded-3xl opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-4 transition-all duration-500 ease-out">
                        <div class="text-center">
                            <a href="{{ route('products.show', $category->slug) }}">
                                <div
                                    class="border border-white px-4 py-2 text-center bg-orange-500 text-white font-bold rounded-full mb-4 -mt-8 transform group-hover:scale-105 transition-transform duration-500 ease-out">
                                    {!! strtoupper($category->name) !!}
                                </div>
                            </a>
                        </div>
    
                        <!-- Display product items -->
                        <div class="text-center text-gray-700 transition-opacity duration-500 ease-out">
                            <ul class="list-disc list-inside">
                                @foreach ($category->products as $product)
                                    <li>
                                        <a href="{{ route('item.display', $product->slug) }}" class="text-gray-700 hover:underline">
                                            {!! $product->name !!}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    </div>
                @endforeach
            </div>
         
      


        <div class="flex justify-center relative py-24">

        </div>
    </div>

    @include('layouts.footer')
@endsection