@extends('layouts.app')
@section('content')
    <div class="page-blue">
        <div class="about-banner contact-banner bg-image"
            style="background-image: url({{ asset('images/our-reach/our-reach-cover.png') }});">
        </div>
        <div class="page-title-container">
            <h4>OUR REACH</h4>
            <span class="text-primary">An Enriching Journey</span>
        </div>
    </div>

    <div class="container landing-section">
        <div class="text-wrap mx-auto" style="width: 80%">
            <h2 class="text-lg text-center">
                Dedicated and Passionate to Reach <br>
                New Horizons
            </h2>
            <br>
            <div class="row">
                <div class="col-lg-6 col-md-12" data-aos="zoom-in-left" data-aos-duration="1000">
                    <p class="text-justify" style="padding-right: 20px">
                        It has been 22 years since Phoenix Beverages Group exported its first container of beer, and our journey continues with a bright future ahead.
                        Our beers have firmly established themselves in international markets, building a strong presence. The passion and dedication of
                        our International Business Units have propelled the freshness and quality of our products to exciting new horizons.
                    </p>
                </div>

                <div class="col-lg-6 col-md-12" data-aos="zoom-in-right" data-aos-duration="1000">
                    <p class="text-justify"  style="padding-left: 20px">
                        Our export strategy is built on mutual trust and long-term partnerships to achieve meaningful and successful outcomes.
                        We focus on delivering optimal market execution, world-class service, and a steadfast commitment to strengthening brand equity in each market.
                        To ensure sustainable growth, we have established clear metrics for evaluating supply chain performance and implemented key parameters for continuous improvement.
                    </p>
                </div>
            </div>

        </div>

        <br>
        <div class="col-md-12 py-6 text-center w-100 mx-auto">
            <div id="chartdiv"></div>
        </div>
    </div>


    <div class="key-features py-5">
        <div class="container">
            <div class="row mt-6">
                <h2>Our Key <br> Features</h2>
                <div class="col-lg-6 col-md-12 left-grid">
                    <div class="grid-container">
                        <div class="col-4 grid-item custom-color-1"></div>
                        <div class="col-4 grid-item custom-color-4 p-5">
                            <div>Team Member</div>
                            <div class="pt-4"><span class="fs-3">+</span> <span class="ourReachCountUp fs-2" data-to="1750"
                                    data-speed="1000">0</span>
                            </div>
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                        <div class="col-4 grid-item custom-color-4">
                            <div class="p-4">
                                PhoenixBev: Serving over
                                <span class="ourReachCountUp fs-4" data-to="10000" data-speed="1000">0</span>
                                customers with a diverse portfolio of
                                <span class="ourReachCountUp fs-5" data-to="50" data-speed="1000">0</span>+ brands across
                                <span class="ourReachCountUp fs-5" data-to="7" data-speed="1000">0</span>
                                beverage categories.
                            </div>
                        </div>
                        <div class="col-4 grid-item custom-bg-left-5"></div>
                        <div class="col-4 grid-item custom-color-3">
                            <div class="px-3 pt-4">
                                Our operations span over 4 production plants and 16 bottling lines which is supported by a
                                dedicated team of
                                <span class="ourReachCountUp fs-5" data-to="1750" data-speed="1000">0</span>
                                <br>members in
                                <span class="ourReachCountUp fs-5" data-to="2" data-speed="1000">0</span>
                                countries and
                                <span class="ourReachCountUp fs-5" data-to="9" data-speed="1000">0</span>
                                export markets

                            </div>
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                        <div class="col-4 grid-item custom-color-2 p-4">
                            <div class="p-4">
                                Brands in our portfolio
                            </div>
                            <div class="px-4">+
                                <span class="ourReachCountUp fs-1" data-to="50" data-speed="1000">0</span>
                            </div>
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 right-grid">
                    <div class="grid-container">
                        <div class="col-4 grid-item transparent"></div>
                        <div class="col-4 grid-item custom-color-2 p-4">
                            <div class="pt-5">
                                Export countries
                            </div>
                            <div class="fs-3">
                                <span class="ourReachCountUp fs-3" data-to="9" data-speed="1000">0</span>
                            </div>
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                        <div class="col-4 grid-item custom-color-1">
                            <div class="px-4 py-5">
                                <span class="ourReachCountUp fs-3" data-to="4" data-speed="1000">0</span>
                                Production Plants <br>
                                <span class="ourReachCountUp fs-3" data-to="2" data-speed="1000">0</span>
                                Operating countries
                            </div>
                        </div>
                        <div class="col-4 grid-item custom-bg-right-5"></div>
                        <div class="col-4 grid-item custom-color-1 text-light">
                            {{-- <div class="pt-5 px-5">
                                Customers
                            </div>
                            <div class="fs-3 p-4">
                                +
                                <span class="ourReachCountUp fs-1" data-to="1000" data-speed="40000">0</span>
                            </div> --}}
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                        <div class="col-4 grid-item custom-color-4 text-dark">
                            <div class="p-4 text-smaller">
                                Three production sites in Mauritius and one in Réunion Island, with a combined total of
                                <span class="ourReachCountUp fs-4" data-to="16" data-speed="1000">0</span>
                                bottling lines, including a robust glass recycling operation.
                            </div>
                        </div>
                        <div class="col-4 grid-item transparent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>



    <script>
        // Create root element
        var root = am5.Root.new("chartdiv");

        // Set themes
        root.setThemes([
            am5themes_Animated.new(root)
        ]);

        // Create the map chart
        var chart = root.container.children.push(
            am5map.MapChart.new(root, {
                panX: "rotateX",
                panY: "translateY",
                projection: am5map.geoMercator(),
                wheelY: "none"
            })
        );

        var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));

        zoomControl.homeButton.set("visible", true);

        // Create main polygon series for countries
        var polygonSeries = chart.series.push(
            am5map.MapPolygonSeries.new(root, {
                geoJSON: am5geodata_worldLow,
                exclude: ["AQ"]
            })
        );

        polygonSeries.mapPolygons.template.setAll({
            fill: am5.color("#ABABAB")
        });

        // Create point series for markers
        var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {}));

        // Create regular bullets
        pointSeries.bullets.push(function() {
            var circle = am5.Circle.new(root, {
                radius: 4,
                tooltipY: 0,
                fill: am5.color("#08BABB"),
                tooltipText: "{title}"
            });

            var bullet = am5.Bullet.new(root, {
                sprite: circle
            });

            // Animate circle
            circle.animate({
                key: "scale",
                from: 0.5,
                to: 1.5,
                duration: 800,
                easing: am5.ease.out(am5.ease.cubic),
                loops: Infinity,
                keyframes: [{
                        value: 1,
                        time: 0
                    },
                    {
                        value: 1.5,
                        time: 0.5
                    },
                    {
                        value: 1,
                        time: 1
                    }
                ]
            });


            circle.animate({
                key: "opacity",
                from: 0.5,
                to: 1,
                duration: 600,
                easing: am5.ease.out(am5.ease.cubic),
                loops: Infinity,
                keyframes: [{
                        value: 0.5,
                        time: 0
                    },
                    {
                        value: 1,
                        time: 0.5
                    },
                    {
                        value: 0.5,
                        time: 1
                    }
                ]
            });

            return bullet;
        });

        // Set data
        var cities = [{
                title: "United Kingdom",
                latitude: 51.5074,
                longitude: -0.1278
            },
            {
                title: "France",
                latitude: 48.8566,
                longitude: 2.3522
            },
            {
                title: "Djibouti",
                latitude: 11.8251,
                longitude: 42.5903
            },
            {
                title: "China",
                latitude: 39.9042,
                longitude: 116.4074
            },
            {
                title: "Kenya",
                latitude: -1.2864,
                longitude: 36.8172
            },
            {
                title: "Seychelles",
                latitude: -4.6141,
                longitude: 55.4510
            },
            {
                title: "Mayotte",
                latitude: -12.7800,
                longitude: 45.2275
            },
            {
                title: "Comoros",
                latitude: -11.7020,
                longitude: 43.2551
            },
            {
                title: "Madagascar",
                latitude: -18.8792,
                longitude: 47.5079
            },
            {
                title: "Mauritius",
                latitude: -20.1667,
                longitude: 57.5000
            },
            {
                title: "Rodrigues",
                latitude: -19.7000,
                longitude: 63.4167
            },
            {
                title: "Australia",
                latitude: -33.8688,
                longitude: 151.2093
            },
            {
                title: "Reunion Island",
                latitude: -20.878901,
                longitude: 55.448101
            }
        ];

        for (var i = 0; i < cities.length; i++) {
            var city = cities[i];
            addCity(city.longitude, city.latitude, city.title);
        }

        function addCity(longitude, latitude, title) {
            pointSeries.data.push({
                geometry: {
                    type: "Point",
                    coordinates: [longitude, latitude]
                },
                title: title
            });
        }

        chart.appear(1000, 100);
    </script>

@stop