@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Home | Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection" />
<meta property="og:description" content="Experience the unmatched quality of Bonfire Charcoal Briquets, crafted since 1991 for grill enthusiasts and culinary businesses. Immerse yourself in the warmth and reliability of Bonfire, fostering togetherness and sustainable grilling practices. Elevate your BBQ with our premium charcoal and create unforgettable moments around the grill." />
<meta property="og:site_name" content="Bonfire Charcoal: Ignite Culinary Excellence with Premium Briquets for Grilling Perfection" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:keywords" content="Bonfire Charcoal, Premium Charcoal Briquets, Grilling Excellence, Culinary Businesses, Sustainable Grilling, Quality BBQ Fuel, Family Togetherness, Grill Enthusiasts, Unforgettable BBQ Moments, Bonfire Legacy" />
@endsection

@section('content')
<div id="bannerCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @foreach($banner as $index => $banners)
        <div class="carousel-item @if($index === 0) active @endif">
            <img src="{{ asset('uploads/banner/' . $banners->image) }}" class="w-100 img-fluid" alt="...">
        </div>
        @endforeach
    </div>
    <div class="text-center w-100 text-container">
        <div class="row">
            <div class="col">
                <img src="{{ asset('images/text-welcome-to-bonfire.png') }}" class="img-fluid mb-3" alt="Welcome to Bonfire">
            </div>
        </div>
        <a href="{{ url('shop') }}" class="btn btn-1 fs-4 px-5">EXPLORE OUR PRODUCTS</a>
    </div>
</div>

<style>
    .carousel-inner img {
        height: 100vh;
        /* Make the banner full height */
        object-fit: cover;
    }

    .text-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        height: auto;
    }

    .banner-text {
        font-size: 95px;
        line-height: 0.8;
    }

    .banner-text-2 {
        font-size: 100px;
    }

    @media (max-width: 1440px) {
        .banner-text {
            font-size: 80px;
        }

        .banner-text-2 {
            font-size: 85px;
        }
    }

    @media (max-width: 1024px) {
        .banner-text {
            font-size: 70px;
        }

        .banner-text-2 {
            font-size: 80px;
        }
    }

    @media (max-width: 768px) {
        .banner-text {
            font-size: 50px;
        }

        .banner-text-2 {
            font-size: 60px;
        }
    }

    @media (max-width: 430px) {
        .banner-text {
            font-size: 30px;
        }

        .banner-text-2 {
            font-size: 40px;
        }
    }
</style>

<!-- FEATURES -->
<div class="position-absolute d-flex justify-content-center w-100" style="transform: translateY(-50%);">
    <div class="d-flex flex-nowrap justify-content-center overflow-auto">
        <div class="feature-item p-2">
            <div class="card p-4" style="border-radius: 20px; box-shadow: 2px 5px #f6b024; background-color: #f83600; height: 100%;">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="{{ asset('images/icon-benefit-1a.png') }}" class="img-fluid" alt="...">
                    </div>
                    <div class="col-8">
                        <p class="text-white mb-0">SUSTAINABLE AND RENEWABLE</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-item p-2">
            <div class="card p-4" style="border-radius: 20px; box-shadow: 2px 5px #f6b024; background-color: white; height: 100%;">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="{{ asset('images/icon-benefit-2.png') }}" class="img-fluid" alt="...">
                    </div>
                    <div class="col-8">
                        <p class="darkblue mb-0">HOTTER AND LONGER BURN</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-item p-2">
            <div class="card p-4" style="border-radius: 20px; box-shadow: 2px 5px #f6b024; background-color: #f83600; height: 100%;">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="{{ asset('images/icon-benefit-3.png') }}" class="img-fluid" alt="...">
                    </div>
                    <div class="col-8">
                        <p class="text-white mb-0">LESS ASH PRODUCTION</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-item p-2">
            <div class="card p-4" style="border-radius: 20px; box-shadow: 2px 5px #f6b024; background-color: white; height: 100%;">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="{{ asset('images/icon-benefit-4.png') }}" class="img-fluid" alt="...">
                    </div>
                    <div class="col-8">
                        <p class="darkblue mb-0">ODORLESS AND TASTELESS</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-item p-2">
            <div class="card p-4" style="border-radius: 20px; box-shadow: 2px 5px #f6b024; background-color: #f83600; height: 100%;">
                <div class="row align-items-center">
                    <div class="col-4">
                        <img src="{{ asset('images/icon-benefit-5.png') }}" class="img-fluid" alt="...">
                    </div>
                    <div class="col-8">
                        <p class="text-white mb-0">CHEMICAL - FREE</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        margin-bottom: 10px;
        /* Adjust margin as needed */
    }

    .darkblue {
        color: #003366;
        /* Replace with your preferred dark blue color */
    }

    .feature-item {
        flex: 0 0 auto;
        width: calc(100% / 5);
        /* Adjust based on the number of items */
    }

    @media (max-width: 1199.98px) {
        .feature-item {
            width: calc(100% / 5);

            font-size: 0.875rem;
        }
    }

    @media (max-width: 991.98px) {
        .feature-item {
            width: calc(100% / 3);
            /* Adjust based on the number of items */
        }
    }

    @media (max-width: 768px) {
        .feature-item {
            width: calc(100% / 5);
            /* Adjust based on the number of items */
            margin-top: 5rem;
            font-size: 0.75rem;
        }
    }

    @media (max-width: 575.98px) {
        .feature-item {
            width: 60%;
        }
    }
</style>




<style>
    .card-background {
        background-color: #fde047;
        opacity: 0.7;
        border-radius: 0.5rem;
        padding: 20px;
    }

    .card-background:hover {
        background-color: #fde047;
        opacity: 1;
        border-radius: 0.5rem;
        padding: 20px;
    }

    .position-relative {
        position: relative;
    }

    .image-container {
        overflow: hidden;
        /* Ensure image doesn't overflow parent */
    }

    .image-container img {
        width: 100%;
        height: auto;
        display: block;
    }

    .card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: -1;
        /* Ensure overlay is behind image by default */
    }

    .position-relative:hover .card-overlay {
        opacity: 1;
        z-index: 1;
        /* Bring overlay to front when hovered */
    }

    .featured-section {
        background-image: url("{{ asset('images/img-bg.jpg') }}");
        background-size: cover;
        background-position: center;
        padding: 80px 0;
    }

    .product-card .btn {
        display: none;
    }

    .product-card:hover .btn {
        display: block;

    }
</style>

<!-- FEATURED PRODUCTS -->
<div class="featured-section">

    <div class="container my-5">
        <h1 class="red text-center my-5 dancing-script font-bold" style="font-weight: 700;">Featured Products</h1>
        <br>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="text-center card card-background product-card" style="box-shadow: 0px 5px #f6b024; height: 400px;">
                        <div class="rounded text-center" style="height: 220px; background-color: white;">
                            <img src="{{ asset('images/img-product-1.png') }}" class="img-fluid" alt="...">
                        </div>
                        <div class="mt-3 text-start">
                            <h5>Charcoal Briquets</h5>
                            <h5>₱680.00</h5>

                        </div>
                        <a href="{{ url('shop') }}" class="btn btn-1 fs-4 px-4">
                            <img src="{{ asset('images/icon-addtocart-white.png') }}" class="img-fluid" alt="...">
                            ADD TO CART
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="text-center card card-background product-card" style="box-shadow: 0px 5px #f6b024;height: 400px;">
                        <div class="rounded text-center" style="height: 220px; background-color: white;">
                            <img src="{{ asset('images/img-product-2.png') }}" class="img-fluid" alt="...">
                        </div>
                        <div class="mt-3 text-start">
                            <h5>Charcoal Briquets</h5>
                            <h5>₱680.00</h5>

                        </div>
                        <a href="{{ url('shop') }}" class="btn btn-1 fs-4 px-4">
                            <img src="{{ asset('images/icon-addtocart-white.png') }}" class="img-fluid" alt="...">
                            ADD TO CART
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="text-center card card-background product-card" style="box-shadow: 0px 5px #f6b024;height: 400px;">
                        <div class="rounded text-center" style="height: 220px; background-color: white;">
                            <img src="{{ asset('images/img-product-3a.png') }}" class="img-fluid" alt="...">
                        </div>
                        <div class="mt-3 text-start">
                            <h5>Charcoal Briquets</h5>
                            <h5>₱680.00</h5>

                        </div>
                        <a href="{{ url('shop') }}" class="btn btn-1 fs-4 px-4">
                            <img src="{{ asset('images/icon-addtocart-white.png') }}" class="img-fluid" alt="...">
                            ADD TO CART
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="text-center card card-background product-card" style="box-shadow: 0px 5px #f6b024;height: 400px;">
                        <div class="rounded text-center" style="height: 220px; background-color: white;">
                            <img src="{{ asset('images/img-product-4.png') }}" class="img-fluid" alt="...">
                        </div>
                        <div class="mt-3 text-start">
                            <h5>Charcoal Briquets</h5>
                            <h5>₱680.00</h5>

                        </div>
                        <a href="{{ url('shop') }}" class="btn btn-1 fs-4 px-4">
                            <img src="{{ asset('images/icon-addtocart-white.png') }}" class="img-fluid" alt="...">
                            ADD TO CART
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="text-center">
            <a href="{{ url('shop') }}" class="btn btn-outline-1 fs-4 px-5 mt-3"> VIEW ALL PRODUCTS </a>
        </div>
    </div>
</div>


<div class="my-5">
    <h3 class="text-center red my-5 dancing-script" style="font-weight: 700;">A delightful Culinary & Leisure Barbeque Experience</h3>

    <div class="row justify-content-center">
        <div class="col-12 col-sm-6 col-md-3">
            <img src="{{asset('images/img-food1.png')}}" class="img-fluid" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <img src="{{asset('images/img-food2.png')}}" class="img-fluid" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <img src="{{asset('images/img-food3.png')}}" class="img-fluid" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <img src="{{asset('images/img-food4.png')}}" class="img-fluid" alt="">
        </div>
    </div>
</div>

<!-- ABOUT -->
<div class="my-5">
    <div class="about-bg">
        <div class="container">
            <div class="row py-5">
                <div class="col-lg-6 col-12 text-center">
                    <img src="{{asset('images/obj-products.png')}}" class="img-fluid" alt="">
                    <h4 class="red dancing-script" style="font-weight: 700;">"Transforming local products to global standards"</h4>
                    <br>
                    <p class="text-black">At Bonfire, we produce high-quality charcoal briquettes from coconut shells, with the aim of reaching the global market. Our goal is to establish Philippine-made charcoal briquettes as a top choice worldwide, delivering exceptional grilling experiences to homes and businesses.</p>
                    <br>
                    <a href="{{ url('about') }}" class="btn btn-2 fs-4 px-5 mt-3">FIND OUT MORE</a>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="modal-bg">
                        <!-- TESTIMONIALS -->
                        <button id="btnPrev" class="arrow-button"><i class="fa-solid fa-arrow-left-long red"></i></button>

                        <div class="testimonial-bg p-2s">
                            <div class="container">
                                <div class="row align-items-center obj-quote">
                                    <div class="col">
                                        <img src="{{ asset('images/obj-quote.png') }}" class="img-fluid me-4" alt="..." style="height: 75px;">
                                    </div>
                                    <div class="col">
                                        <h1 class="red dancing-script" style="font-weight: 700;">Testimonials</h1>
                                    </div>
                                    <div class="col"></div>
                                </div>
                                <div class="splide" id="splide3">
                                    <div class="splide__track">
                                        <ul class="splide__list">
                                            @foreach($testimonials as $item)
                                            <li class="splide__slide">
                                                <div class="row py-5 gy-3">
                                                    <div class="col text-center">
                                                        <div style="position: relative;">
                                                            <p class="">{{$item->content}}</p>
                                                            <p class="red fw-bold">{{$item->name}}</p>
                                                            <img src="{{ asset('uploads/testimonials/' . $item->image) }}" class="img-fluid" alt="Testimonial" style="height: 100px; width: 100px; position: relative; z-index: 2; border-radius: 20rem;">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="splide__pagination" id="customPagination"></div>
                        <button id="btnNext" class="arrow-button">
                            <i class="fa-solid fa-arrow-right-long"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TESTIMONIALS -->
<style>
    /* Existing CSS */
    .arrow-button {

        opacity: 0.5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #ff0000;
        border-color: transparent;
        cursor: pointer;
        padding: 0;
        margin: 1rem;
    }

    .arrow-button i {
        color: #ff0000;
        font-size: 24px;
    }

    .testimonial-bg {
        background-color: white;
        width: 50vh;
        border-radius: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .about-bg {
        background-image: url("{{ asset('images/img-bg-yellow.jpg') }}");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 50vh;
        display: flex;
        justify-content: start;
        align-items: start;
    }

    .modal-bg {
        background-image: url("{{ asset('images/img-bg-testimonial.jpg') }}");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 80vh;
        width: 80vh;
        padding: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .splide__pagination {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .splide__pagination__page {
        border: 2px solid white;
        background-color: transparent;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0 5px;
        display: inline-block;
    }

    .splide__pagination__page.is-active {
        background-color: yellow;
    }


    @media (max-width: 768px) {
        .about-bg {
            height: auto;
            min-height: 50vh;
        }

        .modal-bg {
            height: 100%;
            width: 100%;
            padding: 1rem;
        }

        .obj-quote {
            margin-top: 2rem;
        }

        .testimonial-bg {
            height: 80%;
            width: 50%;
            padding: 1rem;
            border-radius: 1rem;
            /* Reduce border radius for smaller screens */
            box-shadow: none;
            /* Remove box shadow for a simpler design */
        }

        .arrow-button {
            width: 40px;
            height: 40px;
            margin: -2rem;
        }

        .splide__slide img {
            height: 80px;
            /* Adjusted to fit smaller screens */
            width: 80px;
            /* Adjusted to fit smaller screens */
        }

        .splide__slide p {
            font-size: 14px;
        }

        .splide__slide .red {
            font-size: 16px;
        }

        .splide__slide {
            text-align: center;
        }

        .testimonial-bg .row {
            align-items: center;
            justify-content: center;
        }
    }

    @media (max-width: 425px) {
        .testimonial-bg {
            height: 80%;
            width: 100%;
            padding: 1rem;
            border-radius: 1rem;
            /* Reduce border radius for smaller screens */
            box-shadow: none;
            /* Remove box shadow for a simpler design */
        }

        .splide__slide img {
            height: 60px;
            /* Further adjusted for smaller screens */
            width: 60px;
            /* Further adjusted for smaller screens */
        }

        .obj-quote {
            margin-top: 2rem;
        }

        .splide__slide p {
            font-size: 12px;
        }

        .splide__slide .red {
            font-size: 14px;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var splide2 = new Splide('#splide3', {
            type: 'loop',
            perPage: 1,
            perMove: 1,
            arrows: false,
            autoplay: true,
            pagination: true,
            breakpoints: {
                768: {
                    perPage: 1,
                    gap: '.7rem',
                    height: 'auto',
                },
                1024: {
                    perPage: 1,
                    gap: '.7rem',
                    height: 'auto',
                },
            },
        });

        splide2.on('pagination:mounted', function(data) {
            // Move the pagination inside the modal
            document.getElementById('customPagination').appendChild(data.list);
        });

        splide2.mount();

        var btnNext = document.getElementById('btnNext');
        var btnPrev = document.getElementById('btnPrev');

        // Attach events to custom buttons
        btnNext.addEventListener('click', function() {
            splide2.go('+1'); // Go to the next slide
        });

        btnPrev.addEventListener('click', function() {
            splide2.go('-1'); // Go to the previous slide
        });
    });
</script>
<!-- LOGOS -->

<div class="bg-logos  margin-logos">

    <div class="slider">
        <div class="slide-track">
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-kosher.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-dccci.png') }}" class="img-fluid" width="200" alt="img" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-eccp.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-idcp.png') }}" class="img-fluid" width="200" alt="" />
            </div>

            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-philexport.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-iqnet.png') }}" class="img-fluid" width="200" alt="img" />
            </div>


            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-kosher.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-dccci.png') }}" class="img-fluid" width="200" alt="img" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-eccp.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-idcp.png') }}" class="img-fluid" width="200" alt="" />
            </div>

            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-philexport.png') }}" class="img-fluid" width="200" alt="" />
            </div>
            <div class="slides d-flex align-items-center mx-4">
                <img src="{{ asset('images/logo-iqnet.png') }}" class="img-fluid" width="200" alt="img" />
            </div>
        </div>
    </div>
</div>

<!-- GO TO SHOP -->
<div class="mt-5 shop-margin">
    <div class="shop-bg">
        <div class="container">
            <div class="row py-5">
                <div class="col-md-8 col-lg-6 py-5 px-4">
                    <h1 class="text-white">FOR INQUIRIES</h1>
                    
                    <h3 class="text-white">
                    For inquiries about our high-quality Bonfire Charcoal Briquettes or to place an order, please contact us! We’re ready to assist and answer all your questions.
                    </h3>
                   
                    <a href="{{ url('about') }}" class="btn btn-2 fs-4 px-5 mt-3">CONTACT US TODAY</a>
                </div>
                <div class="col-lg-6">

                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .shop-margin {
        margin: 4rem;
    }

    .shop-bg {
        background-image: url("{{ asset('images/banner-body.png') }}");
        /* height: auto; */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 70vh;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .margin-logos {
        margin-top: 30rem;
    }

    @media (max-width: 768px) {
        .shop-bg {
            background-image: url("{{ asset('images/banner-body.png') }}");
            /* height: auto; */
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 80vh;
    
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .margin-logos {
            margin-top: 1rem;
        }

        .shop-margin {
            margin: 0rem;
            margin-bottom: 4rem;
        }
    }
</style>

@endsection