@extends('front.include.app')
@section('content')
    <style>
        .event-container {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f8f8f8;
        }

        .event-icon {
            margin-right: 10px;
        }

        .event-bullet-event {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ff5733;
        }

        .loader {
            display: none;
        }

        .loader.display-block {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, .3);
            border-top: 4px solid #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        .heading_box {
            padding: 20px;
            border: 2px solid #fff;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 22px;
            color: #fff;
            border-radius: 16px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <div class="preLoader black">
        <img src="{{ asset('front/images/logo.png') }}" class="pre-img" alt="img">
    </div>
    <div class="preLoader white"></div>

    {{-- =====================================================================
         HERO SLIDER
    ====================================================================== --}}
    @php
        $bannerUrl = optional($content)->getFirstMediaUrl('banner_image') ?: asset('front/images/mainBnnr.webp');
        $sliders = $content->sliders ?? [];
    @endphp
    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse($sliders as $slide)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $bannerUrl }}">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <div class="slideOne text-center">
                                            <h3 data-swiper-parallax="-200">{{ $slide['subtitle'] }}</h3>
                                            <h1 data-swiper-parallax="-200">{{ $slide['title'] ?? '' }}</h1>
                                            {{-- @if (!empty($slide['subtitle']))
                                                <p data-swiper-parallax="-200">{{ $slide['subtitle'] }}</p>
                                            @endif --}}
                                            @if (!empty($slide['description']))
                                                <p data-swiper-parallax="-200">{{ $slide['description'] }}</p>
                                            @endif
                                            <a href="#" class="themeBtn slide-cal">Join Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $bannerUrl }}">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <div class="slideOne text-center">
                                            <h3>Welcome to Proactive Peers</h3>
                                            <h1 data-swiper-parallax="-200">A Safe Space for Healing</h1>
                                            <p data-swiper-parallax="-200">We provide a compassionate online community where
                                                you can share your story, find support, and begin the journey toward
                                                recovery.</p>
                                            <a href="#" class="themeBtn slide-cal">Join Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

    {{-- =====================================================================
         ABOUT SECTION
    ====================================================================== --}}
    @php
        $aboutImg = optional($content)->getFirstMediaUrl('about_image') ?: asset('front/images/about-imag.webp');
    @endphp
    <section class="abbut-sec">
        <div class="container">
            <div class="row align-items-center" data-aos="fade-up">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="about-content">
                        <h3 class="subHead">{{ $content->about_subhead ?? 'company overview' }}</h3>
                        <h2 class="mainHead">{{ $content->about_heading ?? 'About Proactive Peers' }}</h2>
                        <p>{{ $content->about_description ?? '' }}</p>
                        <a href="{{ route('front.about') }}" class="themeBtn">Read More About Our Mission</a>
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{ $aboutImg }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    {{-- =====================================================================
         SERVICES SECTION
    ====================================================================== --}}
    <section class="services-sec">
        <div class="container">
            <div class="services-main text-center" data-aos="fade-up">
                 <h3 class="subHead">{{ $serviceCMS->services_subhead ?? 'our services' }}</h3>
                <h2 class="mainHead">{{ $serviceCMS->services_heading ?? 'How We Support Your Journey' }}</h2>
            </div>
            <div class="row" data-aos="fade-up">
                <div class="swiper services-slider">
                    <div class="swiper-wrapper">
                        @forelse($services as $service)
                            <div class="swiper-slide">
                                <div class="services-wrapp">
                                    <figure class="services-img">
                                        @if ($service->getMedia('service_image')->isNotEmpty())
                                            <img src="{{ $service->getFirstMediaUrl('service_image') }}" class="img-fluid"
                                                alt="{{ $service->title }}">
                                        @else
                                            <img src="{{ asset('front/images/s-1.webp') }}" class="img-fluid"
                                                alt="{{ $service->title }}">
                                        @endif
                                    </figure>
                                    <h3>{{ $service->title }}</h3>
                                    <p>{{ $service->description }}</p>
                                </div>
                            </div>
                        @empty
                            {{-- Static fallback --}}
                            <div class="swiper-slide">
                                <div class="services-wrapp">
                                    <figure class="services-img"><img src="{{ asset('front/images/s-5.webp') }}"
                                            class="img-fluid" alt=""></figure>
                                    <h3>Community Support</h3>
                                    <p>Join a vibrant and secure community.</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="services-wrapp">
                                    <figure class="services-img"><img src="{{ asset('front/images/s-1.webp') }}"
                                            class="img-fluid" alt=""></figure>
                                    <h3>Online Audio Groups</h3>
                                    <p>Connect with peers anytime.</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="services-wrapp">
                                    <figure class="services-img"><img src="{{ asset('front/images/s-2.webp') }}"
                                            class="img-fluid" alt=""></figure>
                                    <h3>Guest Presentations</h3>
                                    <p>Exclusive monthly events.</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="services-wrapp">
                                    <figure class="services-img"><img src="{{ asset('front/images/s-3.webp') }}"
                                            class="img-fluid" alt=""></figure>
                                    <h3>One-on-One Consultations</h3>
                                    <p>Personalized support for your needs.</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="row text-center" data-aos="fade-up">
                <div class="col-md-12">
                    <a href="{{ route('front.services') }}" class="themeBtn">Explore Our Services</a>
                </div>
            </div>
        </div>
        <div class="swiper-button-next"><i class="fal fa-long-arrow-right"></i></div>
        <div class="swiper-button-prev"><i class="fal fa-long-arrow-left"></i></div>
    </section>

    {{-- =====================================================================
         PLAY SECTION
    ====================================================================== --}}
    @php
        $playImg = optional($content)->getFirstMediaUrl('play_image') ?: asset('front/images/play-bg.webp');
    @endphp
    <section class="play-sec">
        <figure class="play-Imag" data-aos="fade-up">
            <img src="{{ $playImg }}" class="img-fluid" alt="">
        </figure>
    </section>

    {{-- =====================================================================
         LATERAL PROGRAM SECTION
    ====================================================================== --}}
    @php
        $lateralPoints = $content->lateral_points ?? [
            'Find strength in what remains.',
            'Build positivity and joy in the present.',
            'Create new goals and a purpose for the future.',
        ];
        $groupBoxes = $content->group_boxes ?? [
            'Safety and Containment Training',
            'Trauma Action Planning',
            'Anxiety Control Exercises',
            '"Who am I?" – a deep journey of exploration into who, where, and how our addictions came to be.',
            'Mending Relationships. Physical pain controls our lives and shapes the Relationships with others.',
        ];
    @endphp
    <section class="lateral-program">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="lateral-program--content text-center">
                        <h2 class="mainHead mb-4">
                            {{ $content->lateral_heading ?? 'The LATERAL Program Life-Altering Trauma Emotional Recovery And Learning' }}
                        </h2>
                        @if ($content->lateral_description ?? false)
                            <p>{!! nl2br(e($content->lateral_description)) !!}</p>
                        @else
                            <p>Healing after trauma is not just about the physical; it's about facing grief, acceptance, and
                                rebuilding a sense of self. Through the LATERAL Program, we shift the focus from "what was
                                lost" to "what is possible."<br>We cannot change the past, but together we can:</p>
                        @endif
                        @if (count($lateralPoints))
                            <ul>
                                @foreach ($lateralPoints as $point)
                                    @if ($point)
                                        <li>{{ $point }}</li>
                                    @endif
                                @endforeach
                            </ul>
                        @endif
                        @if ($content->lateral_footer_text ?? false)
                            <p>{{ $content->lateral_footer_text }}</p>
                        @else
                            <p>Your loss does not erase your worth; it can lead to new resilience, deeper understanding, and
                                a renewed vision for life.</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-5">
                <div class="col-md-10">
                    <div class="lateral-program--content lateral-program--text">
                        <h2 class="mainHead mb-4 text-center">
                            {{ $content->groups_heading ?? 'Groups at Proactive Peers Tools' }}
                        </h2>
                        <div class="row d-flex justify-content-center mt-5">
                            @foreach ($groupBoxes as $box)
                                @if ($box)
                                    <div class="col-lg-4">
                                        <h2 class="heading_box">{{ $box }}</h2>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- =====================================================================
         SUBSCRIPTION SECTION
    ====================================================================== --}}
    @php
        $plans = $content->plans ?? [
            [
                'name' => 'Basic Plan',
                'price' => '20',
                'duration' => 'for 20 mins',
                'description' =>
                    'Quick, focused check-ins when you need reassurance. A safe space to release heavy thoughts and emotions.',
            ],
            [
                'name' => 'Advance',
                'price' => '45',
                'duration' => 'per group for 1 hour',
                'description' =>
                    'Guided group discussions with peers who truly understand. Build strength, resilience, and hope through community support.',
            ],
            [
                'name' => 'Premium',
                'price' => '60',
                'duration' => 'per month 15 mins',
                'description' =>
                    'Consistent check-ins that keep you grounded and accountable. Personalized guidance to help you navigate challenges.',
            ],
        ];
    @endphp
    <section class="subscribe-sec">
        <div class="container">
            <div class="text-center" data-aos="fade-up">
                <h3 class="subHead">{{ $content->subscription_subhead ?? 'subscription' }}</h3>
                <h2 class="mainHead">{{ $content->subscription_heading ?? 'Affordable Plans for Your Recovery Journey' }}
                </h2>
            </div>
            <div class="row" data-aos="fade-up">
                @foreach ($plans as $plan)
                    <div class="col-md-4">
                        <div class="subscribe-wrapp">
                            <div class="subscribe-main">
                                <div class="subs-top">
                                    <h2>{{ $plan['name'] ?? '' }}</h2>
                                    <h5><sup>$</sup><strong>{{ $plan['price'] ?? '' }}</strong><small>{{ $plan['duration'] ?? '' }}</small>
                                    </h5>
                                </div>
                                <div class="subscribe-content">
                                    <p>{{ $plan['description'] ?? '' }}</p>
                                    <a href="" class="themeBtn slide-cal">Pay Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('front.partials.calendar')

    {{-- =====================================================================
         COMMUNITY SECTION
    ====================================================================== --}}
    <section class="community-sec">
        <div class="container">
            <div class="text-center" data-aos="fade-up">
                <h3 class="subHead">{{ $content->community_subhead ?? 'Community' }}</h3>
                <h2 class="mainHead">{{ $content->community_heading ?? 'Connect with Others in Recovery' }}</h2>
                <a href="{{ route('front.community') }}" class="themeBtn">Join Our Community</a>
            </div>
        </div>
    </section>

    {{-- =====================================================================
         TESTIMONIALS SECTION
    ====================================================================== --}}
    <section class="testmonial-sec">
        <div class="container">
            <div class="text-center" data-aos="fade-up">
                <h3 class="subHead">{{ $content->testimonials_subhead ?? 'Testimonials' }}</h3>
                <h2 class="mainHead">{{ $content->testimonials_heading ?? 'Stories of Strength and Recovery' }}</h2>
            </div>
            <div class="row" data-aos="fade-up">
                <div class="swiper testi-slider">
                    <div class="swiper-wrapper">
                        @forelse($testimonials as $t)
                            <div class="swiper-slide">
                                <div class="test-main">
                                    <ul class="test-stars">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <li><a href=""><i
                                                        class="fas fa-star{{ $i <= $t->stars ? '' : '-o' }}"></i></a></li>
                                        @endfor
                                    </ul>
                                    <p>{{ $t->message }}</p>
                                    <h5>{{ $t->name }}</h5>
                                    <figure class="testi-imag">
                                        <img src="{{ asset('front/images/test-3.webp') }}" class="img-fluid"
                                            alt="">
                                    </figure>
                                </div>
                            </div>
                        @empty
                            {{-- Static fallback --}}
                            <div class="swiper-slide">
                                <div class="test-main">
                                    <ul class="test-stars">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                        @endfor
                                    </ul>
                                    <p>Before joining Proactive Peers, I felt trapped in my own struggles. The online audio
                                        groups gave me a safe place to finally speak without judgment.</p>
                                    <h5>Michael R.</h5>
                                    <figure class="testi-imag"><img src="{{ asset('front/images/test-3.webp') }}"
                                            class="img-fluid" alt=""></figure>
                                </div>
                            </div>
                        @endforelse
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="swiper-button-next"><i class="fal fa-long-arrow-right"></i></div>
                <div class="swiper-button-prev"><i class="fal fa-long-arrow-left"></i></div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).on("click", ".slide-cal", function(e) {
            e.preventDefault();
            document.getElementById("calender-cal")?.scrollIntoView({
                behavior: "smooth",
                block: "start"
            });
        });
    </script>
@endsection