@extends('layouts.master')

@section('title', 'Trew India Pvt Ltd')

@section('content')

    <main class="main">
        <!-- Slider: drop this into your Blade view -->
        <style>
            /* Slider container */
            .custom-slider {
                position: relative;
                overflow: hidden;
                border-radius: 12px;
                max-height: 650px;
                width: 100%;
                background: #f5f6f7;
            }

            /* Track that translates */
            .custom-slider .track {
                display: flex;
                transition: transform 450ms cubic-bezier(.2, .9, .2, 1);
                will-change: transform;
            }

            /* Each slide = full viewport of the slider */
            .custom-slider .slide {
                flex: 0 0 100%;
                min-width: 100%;
                box-sizing: border-box;
                position: relative;
            }

            /* media inside slides */
            .custom-slider img,
            .custom-slider video {
                width: 100%;
                height: 100%;
                max-height: 600px;
                /* object-fit: cover; */
                display: block;
            }



            /* Arrows */
            .custom-slider .arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 20;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                background: rgba(255, 255, 255, 0.9);
                border: none;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
                cursor: pointer;
            }

            .custom-slider .arrow:active {
                transform: translateY(-50%) scale(.98);
            }

            .custom-slider .arrow-left {
                left: 12px;
            }

            .custom-slider .arrow-right {
                right: 12px;
            }

            /* Dots */
            .custom-slider .dots {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 12px;
                display: flex;
                gap: 8px;
                z-index: 30;
            }

            .custom-slider .dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.7);
                border: 1px solid rgba(0, 0, 0, 0.08);
                cursor: pointer;
            }

            .custom-slider .dot.active {
                background: rgba(0, 0, 0, 0.75);
            }

            /* Hide arrows on small screens if you want */
            @media (max-width: 767px) {
                .custom-slider .arrow {
                    display: none;
                }
            }
        </style>

        <div class="custom-slider" id="customBannerSlider" aria-roledescription="carousel">
            <div class="track" role="list">
                {{-- Blade loop: each slide --}}
                @foreach ($banners as $banner)
                    <div class="slide" role="listitem" aria-label="Slide {{ $loop->iteration }}">
                        {{-- Desktop (show on md and up) --}}
                        @if (Str::endsWith($banner->desktop_banner, ['.mp4', '.webm', '.ogg']))
                            <video class="d-none d-md-block" autoplay muted loop playsinline preload="metadata">
                                <source src="{{ asset('uploads/banner/' . $banner->desktop_banner) }}" type="video/mp4">
                            </video>
                        @else
                            <img src="{{ asset('uploads/banner/' . $banner->desktop_banner) }}" class="d-none d-md-block"
                                alt="Desktop banner {{ $loop->iteration }}">
                        @endif

                        {{-- Mobile (show on small screens) --}}
                        @if (Str::endsWith($banner->mobile_banner, ['.mp4', '.webm', '.ogg']))
                            <video class="d-md-none" autoplay muted loop playsinline preload="metadata">
                                <source src="{{ asset('uploads/banner/' . $banner->mobile_banner) }}" type="video/mp4">
                            </video>
                        @else
                            <img src="{{ asset('uploads/banner/' . $banner->mobile_banner) }}" class="d-md-none"
                                alt="Mobile banner {{ $loop->iteration }}">
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- arrows -->
            <button class="arrow arrow-left" id="customPrevBtn" aria-label="Previous slide">‹</button>
            <button class="arrow arrow-right" id="customNextBtn" aria-label="Next slide">›</button>

            <!-- dots -->
            <div class="dots" id="customDots" aria-hidden="false"></div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const slider = document.getElementById('customBannerSlider');
                const track = slider.querySelector('.track');
                const slides = Array.from(track.children);
                const prevBtn = document.getElementById('customPrevBtn');
                const nextBtn = document.getElementById('customNextBtn');
                const dotsContainer = document.getElementById('customDots');

                let index = 0;
                let slideCount = slides.length;
                let autoPlayInterval = 5000;
                let autoPlayTimer = null;
                let isDragging = false;
                let startX = 0;
                let currentTranslate = 0;

                if (slideCount === 0) return; // nothing to show

                // Build dots
                slides.forEach((s, i) => {
                    const dot = document.createElement('button');
                    dot.className = 'dot' + (i === 0 ? ' active' : '');
                    dot.setAttribute('aria-label', `Go to slide ${i+1}`);
                    dot.addEventListener('click', () => {
                        index = i;
                        update();
                        restartAutoPlay();
                    });
                    dotsContainer.appendChild(dot);
                });

                const dots = Array.from(dotsContainer.children);

                // Helper: update transform and active states
                function update() {
                    // Translate to -index * 100%
                    track.style.transform = `translateX(-${index * 100}%)`;
                    dots.forEach((d, i) => d.classList.toggle('active', i === index));
                    // Pause/play video when changing slides
                    slides.forEach((slide, i) => {
                        const videos = slide.querySelectorAll('video');
                        videos.forEach(v => {
                            if (i === index) {
                                // ensure playing
                                v.play().catch(() => {
                                    /* autoplay may be blocked */
                                });
                            } else {
                                v.pause();
                                v.currentTime = 0;
                            }
                        });
                    });
                }

                // Next/Prev
                nextBtn.addEventListener('click', () => {
                    index = (index + 1) % slideCount;
                    update();
                    restartAutoPlay();
                });
                prevBtn.addEventListener('click', () => {
                    index = (index - 1 + slideCount) % slideCount;
                    update();
                    restartAutoPlay();
                });

                // Keyboard
                slider.tabIndex = 0;
                slider.addEventListener('keydown', (e) => {
                    if (e.key === 'ArrowLeft') prevBtn.click();
                    if (e.key === 'ArrowRight') nextBtn.click();
                });

                // Touch / swipe
                track.addEventListener('touchstart', (e) => {
                    if (e.touches.length !== 1) return;
                    isDragging = true;
                    startX = e.touches[0].clientX;
                }, {
                    passive: true
                });

                track.addEventListener('touchend', (e) => {
                    if (!isDragging) return;
                    isDragging = false;
                    const endX = e.changedTouches[0].clientX;
                    const diff = startX - endX;
                    if (diff > 50) {
                        index = (index + 1) % slideCount;
                    } else if (diff < -50) {
                        index = (index - 1 + slideCount) % slideCount;
                    }
                    update();
                    restartAutoPlay();
                });

                // Pause on hover / focus
                slider.addEventListener('mouseenter', stopAutoPlay);
                slider.addEventListener('mouseleave', restartAutoPlay);
                slider.addEventListener('focusin', stopAutoPlay);
                slider.addEventListener('focusout', restartAutoPlay);

                // Auto play
                function startAutoPlay() {
                    if (slideCount <= 1) return;
                    autoPlayTimer = setInterval(() => {
                        index = (index + 1) % slideCount;
                        update();
                    }, autoPlayInterval);
                }

                function stopAutoPlay() {
                    if (autoPlayTimer) {
                        clearInterval(autoPlayTimer);
                        autoPlayTimer = null;
                    }
                }

                function restartAutoPlay() {
                    stopAutoPlay();
                    startAutoPlay();
                }

                // Recalculate on resize — important if container width changes
                let resizeTimeout = null;
                window.addEventListener('resize', () => {
                    // no per-slide pixel calculations needed because we use percentages,
                    // but if any CSS change happens, ensure update runs
                    if (resizeTimeout) clearTimeout(resizeTimeout);
                    resizeTimeout = setTimeout(() => {
                        update();
                    }, 120);
                });

                // Hide arrows if single slide
                if (slideCount <= 1) {
                    prevBtn.style.display = 'none';
                    nextBtn.style.display = 'none';
                    dotsContainer.style.display = 'none';
                }

                // Kick off
                update();
                startAutoPlay();
            });
        </script>


        <!-- ✅ Extra Mobile Optimization -->
        <style>
            /*@media (max-width: 768px) {*/
            /*    #bannerSlider {*/
            /*        margin-top: 25px;*/
            /*        max-height: 400px !important;*/
            /*        border-radius: 8px;*/
            /*    }*/
            /*    #bannerSlider img, */
            /*    #bannerSlider video {*/
            /*        max-height: 400px !important;*/
            /*    }*/
            /*}*/
            /*@media (max-width: 480px) {*/
            /*    margin-top: 25px;*/
            /*    #bannerSlider {*/
            /*        max-height: 300px !important;*/
            /*    }*/
            /*    #bannerSlider img, */
            /*    #bannerSlider video {*/
            /*        max-height: 300px !important;*/
            /*    }*/
            /*}*/
        </style>
        <!-- hero slider end -->


        <!-- category area -->
        <div class="category-area mt-50 mb-50">
            <div class="container">
                <div class="row">
                    <div class="col-12 wow fadeInDown" data-wow-delay=".25s">
                        <div class="site-heading-inline">
                            <h3 class="site-title">
                                Housekeeping, Kitchen Care Chemicals, Fabric Care Chemicals & Other Products Manufacturer
                            </h3>
                        </div>
                    </div>
                </div>

                <div class="category-slider owl-carousel owl-theme wow fadeInUp" data-wow-delay=".25s">
                    @isset($midCategories)
                        @forelse ($midCategories as $mid)
                            @php
                                
                                 
                                // derive top slug safely
                                $topSlug =
                                    optional($mid->topCategory)->slug ??
                                    (\App\Models\TopCategory::find($mid->top_category_id)?->slug ?? 'top');

                                // ✅ build clean SEO URL like /product/house-keeping/floor-care
                                $midUrl = url('/product/' . rawurlencode($topSlug) . '/' . rawurlencode($mid->slug));
                            @endphp

                            <div class="category-item">
                                <a href="{{ $midUrl }}" title="{{ $mid->name }}">
                                    <div class="category-info">
                                        <div class="icon">
                                            <img src="{{ $mid->image_url }}" alt="{{ $mid->name }}">
                                        </div>
                                        <div class="content">
                                            <h4>{{ $mid->name }}</h4>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @empty
                            <div class="p-4 w-100 text-center">
                                <p class="mb-0">No categories found.</p>
                            </div>
                        @endforelse
                    @else
                        <div class="p-4 w-100 text-center">
                            <p class="mb-0">Categories not loaded. Check the controller.</p>
                        </div>
                    @endisset
                </div>

            </div>
        </div>
        <!-- category area end -->




        <!-- About Area -->
        <div class="about-area mt-50 mb-50">
            <div class="container">
                <div class="row align-items-center flex-row-reverse">

                    <!-- About Content -->
                    <div class="col-lg-6">
                        <div class="about-right wow fadeInRight" data-wow-delay=".25s">
                            <div class="site-heading mb-3">
                                {{-- <span class="site-title-tagline justify-content-start">
                            <i class="flaticon-drive"></i>  
                        </span> --}}
                                <h2 class="site-title">
                                    About <span>Us</span>
                                </h2>
                                <h5 class="mt-10 fw-semibold">(Housekeeping & Industrial Cleaning Chemical Manufacturer)
                                </h5>
                            </div>

                            <p style="font-size: 16px; line-height: 1.8; ">
                                <strong>TREW INDIA</strong> is a leading Indian company headquartered in Noida (India) –
                                201301.
                                With decades of expertise in manufacturing and supplying high-performance cleaning and
                                hygiene
                                solutions, we cater to both industrial and commercial sectors across India and abroad.
                                Our team combines innovation, technology, and sustainable practices to deliver
                                world-class products designed for modern cleaning challenges.
                            </p>

                            <div class="about-list mt-4">
                                <p><b style="color:#f27127;">Message :</b> We embrace competition with passion and
                                    determination,
                                    believing in the courage to dream big while maintaining the highest standards of
                                    quality.</p>

                                <p><b style="color:#f27127;">Mission :</b> To exceed client expectations by providing
                                    superior
                                    cleaning and hygiene solutions that combine quality, effectiveness, and cost-efficiency.
                                </p>

                                <p><b style="color:#f27127;">Vision :</b> To position <strong>TREW INDIA</strong> as a
                                    globally
                                    trusted name through continuous innovation, advanced technology, and expansion of our
                                    product portfolio.</p>

                                <p><b style="color:#f27127;">Research & Development :</b> Our R&D division focuses on
                                    advancing
                                    formulations and developing new-age cleaning solutions to meet the evolving needs of
                                    industries and specialized sectors. We aim to solve real-world challenges with
                                    sustainable
                                    chemistry and practical innovation.</p>
                            </div>


                        </div>
                    </div>

                    <!-- About Image -->
                    <div class="col-lg-6">
                        <div class="about-image wow fadeInLeft" data-wow-delay=".25s">
                            <img src="assets/img/about/about-banner.jpg" alt="TREW India - Cleaning Chemical Manufacturer"
                                class="img-fluid shadow-lg"
                                style="border-radius: 20px; height: 600px; width: 100%; transition: transform 0.3s ease;">
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- About Area End -->

        <!-- Additional CSS for hover and animation (optional) -->
        <style>
            .about-image img:hover {
                transform: scale(1.03);
            }

            .site-title span {
                color: #f27127;
            }

            .btn-primary:hover {
                background-color: #d85b1c !important;
                transform: translateY(-2px);
            }
        </style>





        {{-- Product Sections from Top Categories --}}
        @foreach ($topSections as $section)
            <div class="product-area py-120">
                <div class="container">
                    <div class="row">
                        <div class="col-12 wow fadeInDown" data-wow-delay=".25s">
                            <div class="site-heading-inline">
                                <h2 class="site-title">{{ $section->name }}</h2>
                                <a href="#">View More <i class="fas fa-angle-double-right"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="product-wrap wow fadeInUp" data-wow-delay=".25s">
                        <div class="product-slider owl-carousel owl-theme">
                            @foreach ($section->products as $product)
                                <div class="product-item">
                                    <div class="product-img">
                                        <a href="{{ route('products.details', [$section->slug, $product->slug]) }}">
                                            <img src="{{ asset($product->main_image_url) }}" alt="{{ $product->product_name }}">

                                        </a>
                                    </div>
                                    <div class="product-content">
                                        <h3 class="product-title">
                                            <a href="{{ route('products.details', [$section->slug, $product->slug]) }}">
                                                {{ $product->product_name }}
                                            </a>
                                        </h3>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        {{-- Other Product Manufacturers --}}
        <div class="product-area py-120">
            <div class="container">
                <div class="row">
                    <div class="col-12 wow fadeInDown" data-wow-delay=".25s">
                        <div class="site-heading-inline">
                            <h2 class="site-title">Other Product Manufacturers</h2>
                            <a href="#">View More <i class="fas fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>

                <div class="product-wrap wow fadeInUp" data-wow-delay=".25s">
                    <div class="product-slider owl-carousel owl-theme">
                        @foreach ($otherProducts as $product)
                            @php
                                $topSlug = optional(optional($product->midCategory)->topCategory)->slug ?? 'top';
                            @endphp
                            <div class="product-item">
                                <div class="product-img">
                                    <a href="{{ route('products.details', [$topSlug, $product->slug]) }}">
                                        <img src="{{ asset($product->main_image_url) }}" alt="{{ $product->product_name }}">
                                    </a>
                                </div>
                                <div class="product-content">
                                    <h3 class="product-title">
                                        <a href="{{ route('products.details', [$topSlug, $product->slug]) }}">
                                            {{ $product->product_name }}
                                        </a>
                                    </h3>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>



        <!-- feature area
                                                <div class="feature-area py-120">
                                                    <div class="container wow fadeInUp" data-wow-delay=".25s">
                                                        <div class="feature-wrap">
                                                            <div class="row g-0">
                                                                <div class="col-12 col-md-6 col-lg-3">
                                                                    <div class="feature-item">
                                                                        <div class="feature-icon">
                                                                            <img src="assets/img/icon/delivery-2.svg" alt="">
                                                                        </div>
                                                                        <div class="feature-content">
                                                                            <h4>Free Delivery</h4>
                                                                            <p>Orders Over ₹120</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12 col-md-6 col-lg-3">
                                                                    <div class="feature-item">
                                                                        <div class="feature-icon">
                                                                            <img src="assets/img/icon/refund.svg" alt="">
                                                                        </div>
                                                                        <div class="feature-content">
                                                                            <h4>Get Refund</h4>
                                                                            <p>Within 30 Days Returns</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12 col-md-6 col-lg-3">
                                                                    <div class="feature-item">
                                                                        <div class="feature-icon">
                                                                            <img src="assets/img/icon/payment.svg" alt="">
                                                                        </div>
                                                                        <div class="feature-content">
                                                                            <h4>Safe Payment</h4>
                                                                            <p>100% Secure Payment</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12 col-md-6 col-lg-3">
                                                                    <div class="feature-item">
                                                                        <div class="feature-icon">
                                                                            <img src="assets/img/icon/support.svg" alt="">
                                                                        </div>
                                                                        <div class="feature-content">
                                                                            <h4>24/7 Support</h4>
                                                                            <p>Feel Free To Call Us</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                              feature area end -->


        <!-- gallery-area
                                                <div class="gallery-area py-120">
                                                    <div class="container">
                                                        <div class="row">
                                                            <div class="col-lg-6 mx-auto wow fadeInDown" data-wow-delay=".25s">
                                                                <div class="site-heading text-center">
                                                                    <span class="site-title-tagline">Our Gallery</span>
                                                                    <h2 class="site-title">Let's Check Our Photo <span>Gallery</span></h2>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row g-4 popup-gallery">
                                                            <div class="col-md-4 col-lg-3">
                                                                <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/02.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/02.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 col-lg-3">
                                                                <div class="gallery-item wow fadeInDown" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/03.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/03.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 col-lg-6">
                                                                <div class="gallery-item gallery-btn-active wow fadeInDown" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/01.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/01.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-8 col-lg-6">
                                                                <div class="gallery-item wow fadeInUp" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/06.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/06.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 col-lg-3">
                                                                <div class="gallery-item wow fadeInUp" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/04.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/04.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 col-lg-3">
                                                                <div class="gallery-item wow fadeInUp" data-wow-delay=".25s">
                                                                    <div class="gallery-img">
                                                                        <img src="assets/img/gallery/05.jpg" alt="">
                                                                        <a class="popup-img gallery-link" href="assets/img/gallery/05.jpg"><i
                                                                                class="fal fa-plus"></i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                             gallery-area end -->



        <!-- choose-area -->
        <div class="choose-area bg py-120">
            <div class="container">
                <div class="row g-4 align-items-center wow fadeInDown" data-wow-delay=".25s">
                    <div class="col-lg-4">
                        <span class="site-title-tagline">Why Choose Us</span>
                        <h2 class="site-title">We Provide Premium Quality Products For You</h2>
                    </div>
                    <div class="col-lg-8">
                        <p>There are many variations of passages available but the majority have suffered you are going
                            to use a passage you need to be sure alteration in some form by injected humour randomised
                            words even slightly believable.</p>
                    </div>

                </div>
                <div class="choose-content wow fadeInUp" data-wow-delay=".25s">
                    <div class="row g-4">
                        <div class="col-lg-4">
                            <div class="choose-item">
                                <div class="choose-icon">
                                    <img src="assets/img/icon/warranty.svg" alt="">
                                </div>
                                <div class="choose-info">
                                    <h4>Original Products</h4>
                                    <p>It is a long established fact that a reader will be distracted by the readable
                                        content of a page when looking at its layout.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="choose-item">
                                <div class="choose-icon">
                                    <img src="assets/img/icon/price.svg" alt="">
                                </div>
                                <div class="choose-info">
                                    <h4>Affordable Price</h4>
                                    <p>It is a long established fact that a reader will be distracted by the readable
                                        content of a page when looking at its layout.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="choose-item">
                                <div class="choose-icon">
                                    <img src="assets/img/icon/delivery.svg" alt="">
                                </div>
                                <div class="choose-info">
                                    <h4>Free Shipping</h4>
                                    <p>It is a long established fact that a reader will be distracted by the readable
                                        content of a page when looking at its layout.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- choose-area end-->


        <!-- testimonial area -->
        <div class="testimonial-area ts-bg py-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mx-auto wow fadeInDown" data-wow-delay=".25s">
                        <div class="site-heading text-center">
                            <span class="site-title-tagline">Testimonials</span>
                            <h2 class="site-title text-white">What Our Client Say's ??</h2>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slider owl-carousel owl-theme wow fadeInUp" data-wow-delay=".25s">
                    @foreach ($testimonials as $testimonial)
                        <div class="testimonial-item">
                            <div class="testimonial-quote">
                                <p>{{ $testimonial->message }}</p>
                            </div>
                            <div class="testimonial-rate">
                                @for ($i = 0; $i < $testimonial->rating; $i++)
                                    <i class="fas fa-star"></i>
                                @endfor
                                @for ($i = $testimonial->rating; $i < 5; $i++)
                                    <i class="far fa-star"></i>
                                @endfor
                            </div>
                            <div class="testimonial-author-info">
                                <h4>{{ $testimonial->name }}</h4>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <!-- testimonial area end -->



        <!-- blog area -->
        <div class="blog-area2 py-120">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mx-auto wow fadeInDown" data-wow-delay=".25s">
                        <div class="site-heading text-center">
                            <span class="site-title-tagline">Our Blog</span>
                            <h2 class="site-title">Our Latest News & <span>Blog</span></h2>
                        </div>
                    </div>
                </div>

                <div class="row g-4">
                    @forelse($blogs as $blog)
                        <div class="col-md-6 col-lg-4">
                            <div class="blog-item wow fadeInUp" data-wow-delay=".25s">
                                <div class="blog-item-img">
                                    @if ($blog->image && file_exists(public_path('storage/blogs/' . $blog->image)))
                                        <img src="{{ asset('storage/blogs/' . $blog->image) }}"
                                            alt="{{ $blog->title }}">
                                    @else
                                        <img src="{{ asset('assets/img/blog/default.jpg') }}" alt="Blog Image">
                                    @endif
                                </div>

                                <div class="blog-item-info">
                                    <h4 class="blog-title">
                                        <a href="{{ route('blogs.show', $blog->slug) }}">
                                            {{ $blog->title }}
                                        </a>
                                    </h4>
                                    <p>{!! Str::limit(strip_tags(html_entity_decode($blog->content)), 92) !!}</p>


                                    <a class="theme-btn" href="{{ route('blogs.show', $blog->slug) }}">
                                        Read More <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center">
                            <p>No blogs available at the moment.</p>
                        </div>
                    @endforelse
                </div>

                <!-- Optional “View All” button -->
                <div class="text-center mt-4">
                    <a href="{{ route('blogs.list') }}" class="theme-btn">
                        View All Blogs <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <!-- blog area end -->





    </main>


@endsection