@extends('layouts.app')
<style>
    .pbg-accordion .white-accordion .accordion-button {
        background-color: white !important;
        font-size: 16px !important;
        color: black !important;
        font-weight: bold;
        box-shadow: none;
        padding: 0px !important;
    }

    .pbg-accordion .white-accordion .accordion-body p {
        color: black !important;
        font-weight: 400;
        font-size: 12px;
    }

    .about-us-container {
        background: url('images/about-pbg/about_perp.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .white-accordion {
        background-color: white !important;
        font-size: 16px !important;
        color: black !important;
        font-weight: bold;
        box-shadow: none;
    }
</style>
@section('content')
    <div class="page-blue">
        <div class="about-banner bg-image"
            style="background-image: url({{ asset('images/about-pbg/about-banner-24.png') }})">
        </div>
        <div class="page-title-container">
            <h4>ABOUT US</h4>
            <span class="text-primary">Securing the Future</span>
        </div>


        <div class="container landing-section">
            <div class="header center">
                <h2>The Foundation of <br>Phoenix Beverages Group</h2>
            </div>
            <div class="row mx-auto" style="width:80%">
                <div class="col-12 col-lg-6 column-padding" data-aos="fade-down" data-aos-duration="1000"
                    data-aos-easing="linear">
                    Phoenix Beverages Group boasts a rich legacy in the beverage industry, tracing its roots back to 1931.
                    Over the decades, it has grown into a leading FMCG company in Mauritius, with aspirations to become
                    a market leader in the region. Since 1993, the Group has been listed on the official market of the
                    Mauritius Stock Exchange.
                </div>
                <div class="col-12 col-lg-6 column-padding" data-aos="fade-down" data-aos-duration="1000"
                    data-aos-easing="linear">
                    We aim to lead the commercial beverage industry in the Indian Ocean region by ensuring the availability
                    and affordability of our products locally and internationally. Our mission is to build meaningful,
                    valuable brands through sustainable and profitable operations aligned with five key Sustainable
                    Development Goals (SDGs).
                </div>
            </div>
            <div class="row mx-auto" style="width:80%">
                <div class="col-12 col-lg-6 column-padding" data-aos="fade-down" data-aos-duration="1000"
                    data-aos-easing="linear">
                    Our portfolio features a diverse range of alcoholic and non-alcoholic beverages, including beers, wines,
                    spirits, soft drinks, table water, juices, and more. In addition to producing and selling our own
                    products,
                    we are the authorised bottler for The Coca-Cola Company and Diageo products in Mauritius.
                </div>
                <div class="col-12 col-lg-6 column-padding" data-aos="fade-down" data-aos-duration="1000"
                    data-aos-easing="linear">
                    Our progress is driven by a dedicated team of over 1,650 collaborators, whose efforts have earned
                    Phoenix Beverages Group numerous international accolades. Together, they enable us to operate
                    four state-of-the-art production plants in Mauritius and Réunion Island.
                </div>
            </div>
        </div>
    </div>

    <div class="container landing-section">
        <div class="header center">
            <h2>Phoenix Beverages Group <br>at a Glance</h2>
        </div>
        <div class="row glance-container">
            @foreach ($stats as $stat)
                <div class="col-6 col-lg-3">
                    <div class="glance-box center">
                        <div class="glance-box-image">
                            <img src="{{ asset('images/' . $stat['image']) }}">
                        </div>
                        <div class="glance-box-figure text-primary countUpElement"
                            data-to="{{ preg_replace('/[^0-9.]/', '', $stat['value']) }}" data-speed="10000"
                            data-symbol="{{ $stat['figure'] }}">

                            <span class="count">{{ $stat['value'] }}</span><span
                                class="count">{{ $stat['figure'] }}</span>
                        </div>
                        <div class="glance-box-title">{{ $stat['title'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="landing-section">
        <div class="px-6 about-us-container">
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4" style="margin-top:120px;">
                </div>
            </div>
            {{-- <div class="header">
            <div class="row">
                <div class="col-8">
                    <h2>Our Brands through the Years</h2>
                </div>
                <div class="col-4 text-right text-primary">
                    <h4 class="text-primary">2024 - 1931</h4>
                </div>
            </div>
        </div>
        <div class="row brands-over-years" id="brands-over-years">
        </div>
        <div class="row brands-over-years-btn">
            <div class="col-12 center">
                <button class="btn btn-default btn-pbg" id="load-more-button" onclick="loadBrands()">Load More</button>
            </div>
        </div> --}}
        </div>
    </div>

    <script>
        var current_page = 1;
        var image_base_path = "{{ asset('images/brands') }}" + "/";
        console.log(image_base_path);

        function loadBrands() {
            $("#load-more-button").html("<div class='loader'></div>");
            $.ajax({
                url: "