@extends('user.layout.unauth-app')

@section('content')
<section id="hero">
    <div class="container mt-5">
        <div class="row justify-content-between align-items-start">
            <div class="col-md-6 pt-5 order-2 order-md-1 d-flex align-items-center">
                <div data-aos="zoom-out">
                    {!! __('home.opening_text') !!}
                    <div class="">
                        <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#joinUsModal"
                            class="btn-join mb-1">{{ __('home.join_us_btn') }}</a>
                        <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#loginModal"
                            class="btn-join">{{ __('home.login_btn') }}</a>
                        <p class="joinus-text">{!! __('home.join_us_text') !!}</p>
                        <div class="download-applications">
                            <span>{!! __('home.get_app') !!}</span>
                            <a href="https://play.google.com/store/apps" target="_blank">
                                <img src="{{ asset('assets/user/images/home/google-play.webp') }}" alt="google apps">
                            </a>
                            <a href="https://www.apple.com/app-store/" target="_blank">
                                <img src="{{ asset('assets/user/images/home/apple-logo-black.webp') }}"
                                    alt="google play-store">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 order-1 order-md-2 hero-img" data-aos="zoom-out" data-aos-delay="300">
                <img src="{{ asset('assets/user/images/home/banner-circle-graphic-c.webp') }}"
                    class="img-fluid animated" alt="banner">
            </div>
        </div>
    </div>
    <svg class="hero-waves" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28 " preserveAspectRatio="none">
        <defs>
            <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
        </defs>
        <g class="wave1">
            <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
        </g>
        <g class="wave2">
            <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
        </g>
        <g class="wave3">
            <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
        </g>
    </svg>
</section>

<main id="main">
    <section id="about" class="about">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-5 col-lg-6 about-box d-flex justify-content-center align-items-stretch d-lg-block d-none"
                    data-aos="fade-right">
                </div>
                <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5"
                    data-aos="fade-left">
                    <h3 class="text-center text-md-left">{!! __('home.why_us') !!}</h3>
                    <p class="text-center text-md-left">{!! __('home.why_us_paragraph') !!}
                    </p>
                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="100">
                        <div class="icon"><i class="fa-solid fa-heart"></i></div>
                        <h4 class="title"><a href="">{!! __('home.why_us_link1') !!}</a></h4>
                        <p class="description">{!! __('home.why_us_link1_des') !!}</p>
                    </div>
                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="200">
                        <div class="icon"><i class="fa-solid fa-heart"></i></div>
                        <h4 class="title"><a href="">{!! __('home.why_us_link2') !!}</a></h4>
                        <p class="description">{!! __('home.why_us_link2_des') !!}</p>
                    </div>
                    <div class="icon-box" data-aos="zoom-in" data-aos-delay="300">
                        <div class="icon"><i class="fa-solid fa-heart"></i></div>
                        <h4 class="title"><a href="">{!! __('home.why_us_link2') !!}</a></h4>
                        <p class="description">{!! __('home.why_us_link3_des') !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="benefits" class="benefits">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6 align-self-center" data-aos="fade-left">
                    <div class="mb-md-5">
                        {!! __('home.tools_to_save_time') !!}
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-right">
                    <img src="{{ asset('assets/user/images/home/tools-to-save-time-c.webp') }}" class="img-fluid"
                        alt="tools">
                </div>
            </div>

            <div class="row mb-5">
                <div class="col-lg-6 order-2 order-lg-1" data-aos="fade-right">
                    <img src="{{ asset('assets/user/images/home/find-soul-mate-c.webp') }}" class="img-fluid"
                        alt="soul mates">
                </div>
                <div class="col-lg-6 order-1 order-lg-2 align-self-center" data-aos="fade-left">
                    <div class="pl-md-5 mb-md-5">
                        {!! __('home.find_soulmate') !!}
                    </div>
                </div>
            </div>

            <div class="row mb-5">
                <div class="col-lg-6 align-self-center" data-aos="fade-left">
                    <div class="mb-md-5">
                        {!! __('home.ideal_profiles_section') !!}
                    </div>
                </div>
                <div class="col-lg-6 text-center" data-aos="fade-right">
                    <img src="{{ asset('assets/user/images/home/ideal-profile-c.webp') }}" loading="lazy"
                        class="img-fluid ideal-profile-img" alt="ideal profile">
                </div>
            </div>
        </div>
    </section>

    <section id="reconnect-black" class="reconnect-black">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="{{ asset('assets/user/images/home/girl-left-side-c.webp') }}" class="img-fluid"
                        loading="lazy" alt="left side">
                </div>
                <div class="col-md-6 align-self-center">
                    <div class="text-center">
                        {!! $meetingTypeDescription !!}
                        {{-- {!! __('home.are_you_single_text') !!} --}}
                    </div>
                </div>
                <div class="col-md-3">
                    <img src="{{ asset('assets/user/images/home/boy-right-shadow-c.webp') }}" class="img-fluid"
                        loading="lazy" alt="right side">
                </div>
            </div>
        </div>
    </section>




    <section class="dating-text">
        {!! __('home.why_us_link2') !!}
    </section>

    <section class="column-links">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-4" data-aos="fade-left">
                    <ul>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Antilles'])}}">{!!
                                __('home.footer_link1') !!}</a></li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Guyane'])}}">{!!
                                __('home.guyane_link') !!}</a></li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Mayotte'])}}">{!!
                                __('home.mayotte_link') !!}</a></li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Ile_Maurice'])}}">{!!
                                __('home.mauritius_link') !!}</a></li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'rencontre-femme-noire'])}}">{!!
                                __('home.black_women_meeting_link') !!}</a></li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'site-rencontre-afro'])}}">{!!
                                __('home.afro_link') !!}</a>
                        </li>
                        {{-- <li><a href="#">{!! __('home.footer_link1') !!}</a></li> --}}
                    </ul>
                </div>
                <div class="col-md-4" data-aos="fade-left">
                    <ul>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Dom_Tom'])}}">{!!
                                __('home.dom_tom_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Reunion'])}}">{!!
                                __('home.reunion_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Cap_Vert'])}}">{!!
                                __('home.cape_verde_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'site-rencontre-noir'])}}">{!!
                                __('home.black_meeting_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'black-pour-femme'])}}">{!!
                                __('home.black_for_women_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'site-rencontre-black-and-white'])}}">{!!
                                __('home.b-n-w_meeting_link') !!}</a>
                        </li>
                        {{-- <li><a href="#">Rencontre Antilles</a></li> --}}
                    </ul>
                </div>
                <div class="col-md-4" data-aos="fade-left">
                    <ul>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Martinique'])}}">{!!
                                __('home.martinique_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Nouvelle_Caledonie'])}}">{!!
                                __('home.new_caledonia_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre_Guadeloupe'])}}">{!!
                                __('home.guandeloupe_meeting_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'Rencontre-Haiti'])}}">{!!
                                __('home.haiti_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'site-rencontre-mixte'])}}">{!!
                                __('home.mix_link') !!}</a>
                        </li>
                        <li><a href="{{route('tibo-meetings',['meeting_type'=>'site-rencontre-metisse'])}}">{!!
                                __('home.metisse_link') !!}</a>
                        </li>
                        {{-- <li><a href="{{route('tibo-meetings',['meeting_type'=>'b-n-w'])}}">Black And White Dating
                                Site</a>
                        </li> --}}
                    </ul>
                </div>
            </div>
        </div>
    </section>

    @if (count($testimonials) > 0)
    <section id="testimonials" class="testimonials">
        <div class="container">
            <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
                <div class="swiper-wrapper">
                    @foreach ($testimonials as $testimonial)
                    <div class="swiper-slide">
                        <div class="testimonial-item">
                            @if (!empty($testimonial->user->profile->image))
                            <img src="{{ setImagePath($testimonial->user->profile->image) }}" class="testimonial-img"
                                alt="user profile">
                            @else
                            <img src="{{ asset('assets/user/images/placeholder.webp') }}" class="testimonial-img"
                                alt="user profile">
                            @endif
                            <h3>{{ ucwords($testimonial->user->username) }}</h3>
                            <p class="mt-3"> <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                                {{ $testimonial->testimonial }}
                                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    @endif
</main>
@endsection