@extends('frontend.theme1.index', ['title' => 'Tentang Kami - Fitness Plus Indonesia', 'count' => $count ?? 0])
@section('css')
    <link rel="stylesheet" href="{{ asset('themes1/css/leaflet.css') }}" />
    <link rel="stylesheet" href="{{ asset('themes1/css/markercluster.css') }}" />
    <style>
        .tentang-members-counter {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            letter-spacing: inherit;
            color: inherit;
        }

        .members-scroll-hidden {
            opacity: 0;
            transform: translate3d(0, 22px, 0);
            filter: blur(2px);
            transition:
                opacity 520ms ease,
                transform 640ms cubic-bezier(0.2, 0.75, 0.2, 1),
                filter 520ms ease;
            transition-delay: var(--members-delay, 0ms);
            will-change: opacity, transform, filter;
        }

        .members-scroll-hidden.is-inview {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            filter: blur(0);
        }

        @media (prefers-reduced-motion: reduce) {
            .members-scroll-hidden {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }
        }
    </style>
@endsection
@section('js')
    <script src="{{ asset('themes1/js/leaflet.js') }}"></script>
    <script src="{{ asset('themes1/js/leaflet.markercluster.js') }}"></script>
    <script>
        window.fitnessPlusLocations = @json($locations ?? []);
    </script>
    <script src="{{ asset('themes1/js/maps.js') }}"></script>
    <script>
        (function () {
            function initMembersCounter() {
                var counterElement = document.querySelector('[data-members-counter]');
                var membersSection = document.querySelector('.tentang-members');

                if (!counterElement) {
                    return;
                }

                if (!membersSection) {
                    membersSection = counterElement;
                }

                if (counterElement.getAttribute('data-counter-initialized') === 'true') {
                    return;
                }

                counterElement.setAttribute('data-counter-initialized', 'true');

                var rawTarget = String(counterElement.getAttribute('data-target') || '0');
                var targetValue = parseInt(rawTarget.replace(/[^0-9]/g, ''), 10);

                if (isNaN(targetValue) || targetValue < 0) {
                    targetValue = 0;
                }

                var hasAnimated = false;
                var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                var revealElements = membersSection ? membersSection.querySelectorAll('[data-members-reveal]') : [];
                var numberFormatter = typeof Intl !== 'undefined' ? new Intl.NumberFormat('id-ID') : null;

                Array.prototype.forEach.call(revealElements, function (element, index) {
                    element.classList.add('members-scroll-hidden');
                    element.style.setProperty('--members-delay', String(index * 120) + 'ms');
                });

                function formatNumber(value) {
                    if (!numberFormatter) {
                        return String(value);
                    }

                    return numberFormatter.format(value);
                }

                function revealMembersContent() {
                    Array.prototype.forEach.call(revealElements, function (element) {
                        element.classList.add('is-inview');
                    });
                }

                function runAnimation() {
                    if (hasAnimated) {
                        return;
                    }

                    hasAnimated = true;
                    revealMembersContent();

                    if (prefersReducedMotion || targetValue < 1) {
                        counterElement.textContent = formatNumber(targetValue);
                        return;
                    }

                    counterElement.textContent = formatNumber(0);

                    var animationDuration = 1800;
                    var animationStart = null;

                    function step(timestamp) {
                        if (animationStart === null) {
                            animationStart = timestamp;
                        }

                        var progress = Math.min((timestamp - animationStart) / animationDuration, 1);
                        var easedProgress = 1 - Math.pow(1 - progress, 3);
                        var currentValue = Math.round(targetValue * easedProgress);

                        counterElement.textContent = formatNumber(currentValue);

                        if (progress < 1) {
                            window.requestAnimationFrame(step);
                        }
                    }

                    window.requestAnimationFrame(step);
                }

                function isInViewport(element) {
                    var rect = element.getBoundingClientRect();
                    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                    var triggerPoint = viewportHeight * 0.9;

                    return rect.top <= triggerPoint && rect.bottom >= 0;
                }

                function handleViewportCheck() {
                    if (!isInViewport(membersSection)) {
                        return;
                    }

                    cleanupViewportListeners();
                    runAnimation();
                }

                function cleanupViewportListeners() {
                    window.removeEventListener('scroll', handleViewportCheck);
                    window.removeEventListener('resize', handleViewportCheck);
                }

                if (typeof window.IntersectionObserver === 'undefined') {
                    window.addEventListener('scroll', handleViewportCheck, {
                        passive: true,
                    });
                    window.addEventListener('resize', handleViewportCheck);
                    handleViewportCheck();
                    return;
                }

                var observer = new IntersectionObserver(function (entries) {
                    entries.forEach(function (entry) {
                        if (!entry.isIntersecting) {
                            return;
                        }

                        runAnimation();
                        observer.disconnect();
                    });
                }, {
                    threshold: 0.2,
                    rootMargin: '0px 0px -10% 0px',
                });

                observer.observe(membersSection);
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initMembersCounter);
                return;
            }

            initMembersCounter();
        })();
    </script>
@endsection
@section('content')
    <div class="tentang-page-root">
        <section class="tentang-hero">
            <div class="container tentang-location-inner">
                <h1 class="hero-title-profile" data-text="Profil&#10;Perusahaan">Profil<br>Perusahaan</h1>
                <a class="tentang-scroll-indicator tentang-scroll-indicator--hint" href="#profil" aria-label="Scroll for more">
                    <span class="tentang-scroll-indicator-badge" aria-hidden="true">&#8595;</span>
                    <span class="tentang-scroll-indicator-text">Scroll for more</span>
                </a>
            </div>
        </section>

        <section id="profil" class="tentang-story" style="margin-top: 100px;">
            <div class="container">
                <h2 class="tentang-section-title">OUR STORY</h2>
                <div class="tentang-story-copy">
                    <p>
                        Lahir di Pulau Bali yang memukau, Fitness Plus Indonesia mempelopori standar baru kebugaran di Tanah
                        Air dan kini
                        hadir di Pulau Jawa hingga Nusa Tenggara Barat. Kami membawa konsep gaya hidup sehat yang segar,
                        menghadirkan
                        ruang latihan yang nyaman, memotivasi, dan penuh energi positif untuk membantu setiap individu
                        mencapai tujuan
                        kebugarannya. Dengan konsep mega gym, kami memadukan peralatan modern, fasilitas berkelas dunia, dan
                        pilihan
                        keanggotaan yang terjangkau, sehingga siapapun dapat menikmati pengalaman latihan terbaik di setiap
                        level.
                    </p>
                    <p>
                        Di Fitness Plus Indonesia, kami berkomitmen memberikan pengalaman kebugaran yang unggul dan sesuai
                        dengan beragam
                        kebutuhan. Setiap anggota mendapat dukungan penuh dari Group Fitness Instructor dan Personal Trainer
                        berpengalaman,
                        profesional, dan berdedikasi untuk memastikan hasil terbaik. Baik berlatih sendiri maupun mengikuti
                        kelas, instruktur
                        kami selalu menghadirkan sesi yang penuh energi dan berkualitas tinggi. Program kami mencakup kelas
                        Les Mills
                        Internasional seperti Body Combat, Body Pump, RPM, dan kelas signature eksklusif dari Fitness Plus
                        yang dirancang
                        untuk memaksimalkan setiap sesi latihan.
                    </p>
                    <p>
                        Sebagai pionir gaya hidup kebugaran, Fitness Plus Indonesia menggabungkan inovasi, standar kualitas
                        tinggi, dan
                        kemudahan akses untuk menciptakan pengalaman yang bukan hanya memotivasi, tetapi juga memberikan
                        dampak positif
                        nyata bagi setiap anggota.
                    </p>
                </div>
            </div>
        </section>

        <section class="tentang-founder">
            <div class="container tentang-founder-grid">
                <div class="tentang-founder-copy">
                    <h3 class="tentang-section-subtitle tentang-left-title" style="margin-bottom: 50px;">CEO
                        &amp;<br>FOUNDER<br>PROFILE</h3>
                    <p>
                        Fitness Plus Indonesia didirikan oleh Dith Satyawan, seorang Atlet Nasional yang visioner, pencipta
                        mega gym,
                        sekaligus juara binaraga dengan berbagai gelar. Semangatnya terhadap kebugaran dan inovasi inilah
                        yang melahirkan
                        Fitness Plus Indonesia, menghadirkan gaya hidup sehat berkelas dunia di Bali dan kini menjangkau
                        berbagai daerah di
                        Indonesia.
                    </p>
                    <p>
                        Berawal dari satu mega gym, Fitness Plus Indonesia telah berkembang menjadi jaringan yang solid.
                        Saat ini kami hadir
                        di 15 kota, baik di Bali, Pulau Jawa, maupun Lombok, Nusa Tenggara Barat. Setiap lokasi dirancang
                        untuk memenuhi
                        kebutuhan para pecinta kebugaran, dilengkapi dengan peralatan latihan beban berstandar
                        internasional, serta didukung
                        oleh pelatih profesional yang berpengalaman dan penuh energi di setiap sesi latihan.
                    </p>
                    <div class="tentang-founder-achievement">
                        <h3 class="tentang-section-subtitle tentang-left-title" style="margin-bottom: 20px;">ACHIEVEMENT</h3>
                        <p class="tentang-achievement-subtitle" style="margin-bottom: 50px;">NATIONAL ATHLETE AND
                            PRACTITIONER</p>

                        <div class="tentang-timeline" aria-label="Pencapaian nasional Dith Satyawan">
                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2011</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Gold Medal Finalist</strong>
                                        <span>PORProv</span>
                                    </li>
                                    <li>
                                        <strong>Finalist</strong>
                                        <span>Bodyku Competition</span>
                                    </li>
                                </ul>
                            </article>

                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2012</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Gold Medal</strong>
                                        <span>PON (Qualification Phase)</span>
                                    </li>
                                    <li>
                                        <strong>Gold Medal</strong>
                                        <span>INBA (Novice Class 170 and above)</span>
                                    </li>
                                    <li>
                                        <strong>Runner Up</strong>
                                        <span>INBA (Professional Class)</span>
                                    </li>
                                    <li>
                                        <strong>2nd Place</strong>
                                        <span>Muscle Mania Indonesia</span>
                                    </li>
                                </ul>
                            </article>

                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2013</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Gold Medal</strong>
                                        <span>PORProv</span>
                                    </li>
                                </ul>
                            </article>

                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2014</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Athlete - Bali Representative</strong>
                                        <span>PON (Qualification Phase)</span>
                                    </li>
                                </ul>
                            </article>

                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2015</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Athlete - Bali Representative</strong>
                                        <span>PON</span>
                                    </li>
                                </ul>
                            </article>

                            <article class="tentang-timeline-item">
                                <span class="tentang-timeline-year">2019</span>
                                <ul class="tentang-timeline-points">
                                    <li>
                                        <strong>Athlete - DKI Representative</strong>
                                        <span>PON (Qualification Phase)</span>
                                    </li>
                                </ul>
                            </article>
                        </div>
                    </div>
                </div>

                <figure class="tentang-founder-media">
                    <img src="{{ asset('themes1/images/dith-satyawan-fp-desktop.png') }}"
                        alt="Dith Satyawan - CEO Fitness Plus Indonesia">
                </figure>
            </div>
        </section>

        @include('frontend.theme1.partials.marker')

        <section class="tentang-members">
            <div class="container">
                <h2 class="tentang-section-title" style="margin-bottom: 50px;" data-members-reveal><span class="tentang-members-counter" data-members-counter data-target="{{ $activemembers }}">0</span><br>MEMBER DAN TERUS BERTAMBAH</h2>
                <p data-members-reveal>
                    Dengan komunitas pecinta kebugaran yang terus berkembang pesat, setiap cabang Fitness Plus di seluruh Indonesia dengan bangga menjadi rumah bagi hingga 60.000 anggota aktif. Basis keanggotaan yang kuat dan dinamis ini mencerminkan komitmen kami untuk memberikan pengalaman kebugaran terbaik bagi semua orang. Mulai dari atlet berpengalaman hingga pemula, komunitas kami dipenuhi oleh individu yang saling menginspirasi dalam perjalanan menuju gaya hidup yang lebih sehat dan aktif.
                    Setiap lokasi membangun semangat kebersamaan ini, menciptakan lingkungan di mana para anggota dapat berkembang, terhubung satu sama lain, dan mencapai tujuan kebugaran pribadi mereka.
                </p>
                <p data-members-reveal>
                    Bergabunglah dengan Fitness Plus terdekat dan jadilah bagian dari jaringan yang berkembang pesat yang berdedikasi pada kesehatan, kebugaran, dan perubahan positif.
                </p>
            </div>
        </section>
    </div>
@endsection