@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">Lorem ipsum odor amet, consectetuer adipiscing elit. Donec
                magna facilisi
                adipiscing
                lacinia vitae est sapien. Laoreet ligula ridiculus curabitur vivamus sociosqu non elit. Nisl malesuada
                primis nec porttitor dis vulputate. Mollis nam curabitur maecenas mollis metus scelerisque venenatis
                fusce phasellus.</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-2 right-2 bg-white bg-opacity-90 p-4 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 CKEditor 'items' field content -->
                        <div class="text-center text-gray-700 transition-opacity duration-500 ease-out">
                           {!! $category->items !!}
                        </div>
                    </div>
                    </div>
                @endforeach
            </div>
         
      


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

        </div>
    </div>
    {{-- <div class="relative w-full">
        <img src="{{ asset('images/images/background-apply-now.png') }}" alt="Background Image"
            class="w-full absolute h-full object-cover hidden xl:block">
        <div class="relative flex items-center justify-center w-full gap-96 px-8">
            <img src="{{ asset('images/images/apply-now.png') }}"
                alt="Two Asian men and a woman, equipped with hard hats and safety glasses, engage with a laptop in a construction environment."
                class="-mt-52 hidden xl:block" data-aos="fade-up">
            <div class="bg-[#ef5400] bg-opacity-90 p-8 rounded-md text-white max-w-lg" data-aos="fade-up">
                <p>Join our growing family here at TDT Powersteel Corporation! Here at TDT Powersteel, we promote the values
                    of hard work, honesty, and integrity while maintaining the highest level of professionalism in
                    everything we do.</p> <br>
                <p>If you think you have what we are looking for, click Apply Now. We look forward to hearing from you!</p>
                <button class="mt-4 bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded">APPLY
                    NOW</button>
            </div>
        </div>
    </div> --}}

    {{-- <div>
        <div class="pt-14 relative">
            <!-- Background Image, visible only on large screens -->
            <img class="w-full hidden lg:block object-cover absolute top-0 left-0 z-0"
                src="{{ asset('images/images/tdt-newsletter-background.png') }}"
                alt="A striking visual of an orange backdrop paired with a white surface, creating a bold color contrast.">

            <!-- Content Wrapper, positioned over the background -->
            <div
                class="relative flex flex-col lg:flex-row items-center lg:items-start py-8 pb-24 gap-4 justify-center z-10 px-4 text-center lg:text-left">
                <!-- Sign-up Title -->
                <h1 class="text-black lg:text-white flex items-center text-xl lg:text-2xl mb-4 lg:mb-0">
                    Sign up for the news and deals
                </h1>

                <!-- Newsletter Heading -->
                <h1 class="text-black lg:text-white anton-regular text-3xl lg:text-5xl mb-4 lg:mb-0">
                    NEWS<span class="lg:text-black text-[#ef5400]">LETTER</span>
                </h1>

                <!-- Email Input -->
                <input type="email" name="email" placeholder="Enter your email"
                    class="w-full sm:w-64 lg:w-72 lg:h-16 rounded-lg py-2 px-4 text-gray-700 mb-4 lg:mb-0">

                <!-- Discover More Button -->
                <div class="flex justify-center lg:justify-start w-full sm:w-64 lg:w-auto">
                    <a href="#discover-more"
                        class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex items-center justify-center transition duration-300 gap-4 w-full lg:w-96 shadow-lg"
                        style="box-shadow: 0 4px 6px rgba(239, 84, 0, 0.4);">
                        <!-- Custom shadow color with rgba for a softer shadow -->
                        <div class="rounded-full bg-[#ef5400] p-2">
                            <img src="{{ asset('images/icons/icon-button-white.png') }}" alt="Discover More Icon"
                                class="w-6 h-6">
                        </div>
                        <p class="text-[#ef5400] hover:text-white">Discover More</p>
                    </a>
                </div>
            </div>
        </div>

        <div class="container mx-auto flex items-center pb-4">
            <div class="flex-1">
                <img src="{{ asset('images/logo/tdt-powersteel-logo.png') }}" alt="tdt powersteel logo">
                <p class="py-2">is one of the most reliable and trusted brands in the Philippine steel supply and
                    distribution industry. Our goal is to provide premium quality and innovative solutions.</p>
            </div>
            <img src="{{ asset('images/icons/grid-line.png') }}" alt="grid line" class="px-4 h-44">
            <div class="flex-1">
                <h1 class="text-3xl"><span class="text-[#ef5400] py-2">Get</span> Connected</h1>
                <p class="py-2 w-full">Address: 1017 Vicente Cruz St. Sampaloc Manila, Philippines <br>
                    Tel/Fax: (02) 8831 - 0000 / (02) 8230 - 2906 <br>
                    Mobile: 0932 888 7777 <br>
                    Email: TT</p>
            </div>
            <img src="{{ asset('images/icons/grid-line.png') }}" alt="grid line" class="px-4 h-44">
            <div class="flex-1">
                <h1 class="text-3xl"><span class="text-[#ef5400] py-2">Business</span> Hours</h1>
                <p class="py-2">TDT Powersteel Corporation <br>
                    Monday to Friday: 8:00am to 5:30pm <br>
                    Saturday: Closed <br>
                    Sunday: Closed</p>
            </div>
        </div>
        <div class="relative">
            <img class="w-full h-full object-cover absolute" src="{{ asset('images/images/background-socials.png') }}"
                alt="">
            <div class="relative anton-regular pt-6">
                <h1 class="text-white text-3xl text-center">FOLLOW ON <span class="text-[#ef5400]">SOCIAL MEDIA</span>
                </h1>
                <div class="flex justify-center gap-4 py-4">
                    <img class="w-10 h-10" src="{{ asset('images/icons/icon-facebook.png') }}" alt="icon-facebook">
                    <img class="w-10 h-10" src="{{ asset('images/icons/icon-linkedin.png') }}" alt="icon-linkedin">
                    <img class="w-10 h-10" src="{{ asset('images/icons/icon-instagram.png') }}" alt="icon-instagram">
                    <img class="w-10 h-10" src="{{ asset('images/icons/icon-pinterest.png') }}" alt="icon-pinterest">
                </div>
            </div>
        </div>
        <div class="container mx-auto flex justify-between py-4">
            <div class="flex gap-4">
                <a href="{{ url('/about-us') }}" class="text-sm lg:text-base">ABOUT</a>
                <a href="{{ url('/products') }}" class="text-sm lg:text-base">PRODUCT</a>
                <a href="{{ url('/blogs') }}" class="text-sm lg:text-base">BLOGS</a>
            </div>

            <div>
                Copyright TDT Powersteel Corporation 2024, Designed & Developed by R Web Solutions
            </div>
        </div>
    </div> --}}

    @include('layouts.footer')
@endsection