@extends('layouts.main-app')

@section('title')

    <style>
        .swiper-wrapper {
            width: 100%;
            height: max-content !important;
            padding-bottom: 64px !important;
            -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
            position: relative;
        }

        .swiper-pagination-bullet {
            background: #4f46e5;
        }
    </style>

@section('content')
    @include('layouts.navbar')

    <div>
        <div class="w-full relative ">
            <!-- Swiper container -->
            <div class="swiper default-carousel swiper-container">
                <div class="swiper-wrapper">
                    <!-- Loop through banners dynamically -->
                    @foreach ($banners as $banner)
                        <div class="swiper-slide">
                            <img class="absolute w-full h-full object-cover" src="{{ asset($banner->image) }}"
                                alt="{{ $banner->alt_text }}">
                            <div class="relative py-24 sm:py-32 lg:py-40">
                                <h4
                                    class="text-white poppins-regular text-center text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
                                    {!! $banner->title !!}
                                </h4>
                                <h1
                                    class="font-bold text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-anton-regular text-white ">
                                    {!! $banner->subtitle !!}
                                    <span class="text-[#ef5400]">{{ $banner->highlighted_word }}</span>
                                </h1>
                                <div class=" text-white w-full text-center flex justify-center py-4 px-4 sm:px-8">
                                    <p class=" text-white max-w-3xl text-sm sm:text-base">
                                        {!! $banner->content !!}
                                    </p>
                                </div>
                                <div class="flex justify-center">
                                    <a href="{{ url('/about-us') }}"
                                        class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex items-center justify-center transition duration-300 gap-4 w-60 sm:w-64 md:w-72 lg:w-72 hover:shadow-[-4px_4px_6px_#ef5400]">
                                        <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]">Discover More</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <img src="{{ asset('images/images/about-us-background.png') }}" alt="Steel Icon"
            class="absolute object-cover hidden lg:block">

       
            <div class=" px-4 relative">     
                <img src="{{ asset('images/images/about-us-background.png') }}" alt="Steel Icon"
                    class="absolute object-fill hidden lg:block">
                <div class="  ml-auto  relative">
                <div class="grid grid-cols-1 xl:grid-cols-3 relative container mx-auto">
                    <div class="col-span-2 lg:px-32">
                        <div class="py-14 px-4" data-aos="zoom-in">
                            <!-- About Us Header -->
                            <div class="flex flex-col sm:flex-row items-center py-2 mb-4">
                                <img src="{{ asset('images/icons/icon-steel.png') }}" alt="Steel Icon"
                                    class="w-5 h-5 mb-2 sm:mb-0 sm:mr-4">
                                <h2 class="text-[#ef5400] italic text-xl sm:text-2xl md:text-3xl">About us</h2>
                            </div>
        
                            <!-- Main Heading -->
                            <div class="text-black  anton-regular text-4xl sm:text-5xl md:text-6xl lg:text-7xl mb-4 ">
                                <h1 class="normal-case">STEEL SUPPLIER IN THE <br>
                                     <span class="text-[#ef5400]">PHILIPPINES</span>
                                </h1>
                            </div>
        
                            <!-- Description Text -->
                            <p class="py-4 px-4 text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed mb-4">
                                TDT Powersteel Corporation is one of the most reliable and trusted brands in the Philippine
                                steel supply and distribution industry.
                                <br> <br>
                                It has continuously proven its commitment to provide premium quality construction solutions with
                                its over 1,000 steel products, tailored-fit professional services, and nationwide distribution
                                hubs – making TDT Powersteel Corporation the preferred partner of many contractors, architects,
                                and developers of major landmark projects in the country today.
                                <br> <br>
                                The knowledge and expertise in the steel and construction distribution business has earned TDT
                                Powersteel Corporation the recognition of being a frontrunner in the industry.
                            </p>
        
                            <!-- Read More Button -->
                            <!--<div class="py-8 w-full flex justify-center items-cente">-->
                            <!--    <a href=""-->
                            <!--        class="bg-[#ef5400] text-white text-center p-4 py-4 text-lg sm:text-xl rounded-lg hover:bg-orange-700 transition duration-300">-->
                            <!--        Read More About Us-->
                            <!--    </a>-->
                            <!--</div>-->
        
                            <!-- Horizontal Line -->
                            <hr class="border-t-2 border-black mb-4">
                            <!-- Vision and Mission Section -->
                            <div class="grid grid-cols-1  md:text-left text-center sm:grid-cols-2 gap-8 py-4 ">
                                <!-- Vision Column -->
                                <div>
                                    <h1 class="anton-regular text-4xl sm:text-5xl lg:text-7xl text-[#292929] mb-4">VISION</h1>
                                    <p class="text-sm sm:text-base lg:text-lg text-left ">
                                        Our vision is to be the most trusted and
                                        we develop trusted, premium quality and
                                        preferred steel and construction solutions
                                        innovative construction solutions at
                                        partner in South East Asia and the Pacific.
                                        
                                    </p>
                                </div>
        
                                <!-- Mission Column -->
                                <div>
                                    <h1 class="anton-regular text-4xl sm:text-5xl lg:text-7xl text-[#292929] mb-4">MISSION</h1>
                                    <p class="text-sm sm:text-base lg:text-lg text-left ">
                                        We developed trusted, premium quality and innovative construction solutions at reasonable prices, under flexible terms and fastest delivery period that best suit our clients needs.
                                    </p>
                                </div>
                            </div>
                        </div>
        
                    </div>
                    <div class="relative w-full h-full hidden xl:block">
                        <div class=" mt-20">
                            <!-- Video image as background -->
                            <img src="{{ asset('images/images/about-us-video.png') }}" alt="Steel Icon"
                                class="w-full  object-cover ">
        
                            <!-- Play button positioned on top of the video image -->
                            {{-- <img src="{{ asset('images/icons/play-button.png') }}" alt="Play Button"
                                class="absolute top-1/2  transform -translate-x-1/2 -translate-y-1/2"> --}}
                        </div>
                    </div>
                </div>
                </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="container mx-auto max-w-screen-xl " ">
                        <div class="flex justify-center pt-8 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-10 py-4 px-4">
                                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 ">
            <a href="{{ route('products') }}"
                class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex group items-center justify-center  hover:bg-orange-700 hover:text-white transition duration-300 gap-4 w-72 md:w-80 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]  group-hover:text-white">Discover More</p>
            </a>
        </div>
    </div>

    </div>

    @include('layouts.footer')

    <script>
        var swiper = new Swiper(".default-carousel", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

    <script>
        var swiper = new Swiper(".default-carousel", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // Add autoplay configuration
            autoplay: {
                delay: 5000, // 5 seconds delay between slides
                disableOnInteraction: false, // Continue autoplay after user interaction
            },
            speed: 1000, // Transition speed in milliseconds
        });
    </script>


@endsection