@extends('front-end.layout')

@section('content')
    <!-- ========== Start Hero Section ========== -->
    <section class="hero-section">
        <div class="row m-0">
            <div class="col-md-6 sec">
                <div class="overlay"></div>
                <div class="hero-cont">
                    <h2 class="common-title">Verified Sports Credentials</h2>
                    <a href="{{ url('sign-up') }}" class="common-btn red">Get Started</a>
                </div>
            </div>
            <div class="col-md-6 sec comp">
                <div class="overlay"></div>
                <div class="hero-cont">
                    <h2 class="common-title">Competition Management System</h2>
                    <a href="{{ url('sign-up') }}" class="common-btn red">Get Started</a>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== End Hero Section ========== -->

    
    <!-- ========== Start Stats Section ========== -->
    <section class=" section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div style="text-align: center;">
                        <p style="font-weight: 700; font-size: 48px; margin-bottom: 6px; line-weight: normal;">{{$no_of_comp_registered}}</p>
                        <p style="color: #555; font-weight : 600; font-size: 18px;">Competitions Registered</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="text-align: center;">
                        <p style="font-weight: 700; font-size: 48px; margin-bottom: 6px; line-weight: normal;">{{$no_of_clubs_registered}}</p>
                        <p style="color: #555; font-weight : 600; font-size: 18px;">Teams Registered</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="text-align: center;">
                        <p style="font-weight: 700; font-size: 48px; margin-bottom: 6px; line-weight: normal;">{{$no_of_players_registered}}</p>
                        <p style="color: #555; font-weight : 600; font-size: 18px;">Players Registered</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== End Stats Section ========== -->

    <!-- ========== Start Our Mission Section ========== -->
    <section class="our-mission--section section-padding">
        <div class="container">
            <h2 class="common-title">Our Mission</h2>
            <p>Sports ID’s mission is to create a comprehensive sporting passport for young athletes and coaches, serving as
                an all-encompassing record of their sporting history, achievements, and credentials. By consolidating
                essential information into a single, easily accessible platform, we streamline the verification process,
                enhance transparency through age verification measures, and ensure the integrity of competitions. Our goal
                is to support the development of athletes and coaches throughout their sporting journey while fostering a
                fair and equitable sporting environment.</p>
        </div>
    </section>

    <!-- ========== End Our Mission Section ========== -->

    <!-- ========== Start Our Services Section ========== -->
    <section class="our-services--section section-padding">
        <div class="container">
            <h2 class="common-title text-center">Our Services</h2>
            <div class="row">
                <div class="col-md-12 col-lg-6 p-2">
                    <div class="service-box">
                        <h3>Age<br>Verification</h3>
                        <p>Ensure fair play with our trusted age verification service. Players can securely upload their
                            identification documents for validation, ensuring compliance with competition requirements and
                            safeguarding the integrity of the game.</p>
                        <div class="icon">
                            <img src="{{ url('assets/images/icons/coach_verification.png') }}" alt="verification icon">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 p-2">
                    <div class="service-box">
                        <h3>Player<br>Passport</h3>
                        <p>Track and showcase your sporting journey with the Sports ID Player Passport. From school
                            tournaments to club competitions, your passport links your performance metrics, achievements,
                            and milestones across every team and event you participate in. This is your verified record,
                            ready to be presented to scouts and clubs.</p>
                        <div class="icon">
                            <img src="{{ url('assets/images/icons/card.png') }}" alt="verification icon">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 p-2">
                    <div class="service-box">
                        <h3>Coach<br>Verification</h3>
                        <p>Coaches can also benefit from Sports ID by creating verified profiles. Our platform allows
                            coaches to showcase their credentials, experience, and certifications, making it easier for
                            clubs, teams, and organizations to assess and recruit verified, qualified professionals.</p>
                        <div class="icon">
                            <img src="{{ url('assets/images/icons/verification.png') }}" alt="verification icon">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 p-2">
                    <div class="service-box">
                        <h3>Competition<br>Management System</h3>
                        <p>For organizations and event coordinators, our Competition Management System streamlines the
                            organization of tournaments and leagues. From team registrations and schedules to tracking
                            results, this system ensures smooth operations while integrating seamlessly with Sports ID
                            profiles for both players and coaches.</p>
                        <div class="icon">
                            <img src="{{ url('assets/images/icons/quality.png') }}" alt="verification icon">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== End Our Services Section ========== -->

        <!-- ========== Start How To Sign Up Section ========== -->
    <section class="how-sinup--section section-padding">
        <div class="container">
            <h2 class="common-title text-center">How It Works</h2>
            <p class="section-para text-center">A brief, step-by-step breakdown of the age verification and sports ID
                creation process.
            </p>
            <!-- <p>Creating your Sports ID is easy! Follow these simple steps to get started on your verified journey:</p> -->
            <div class="row">
                @foreach ($steps as $key => $step)
                    <div class="col-md-6 col-lg-3">
                        <div class="step-box">
                            <div class="icon">
                                <img src="{{ url($step['icon']) }}" alt="icon">
                            </div>
                            <p style="min-height: 50px"><strong></strong></p>
                            <p style=""></p>
                        </div>
                    </div>
                @endforeach;

            </div>
        </div>
    </section>
    <!-- ========== End How To Sign Up Section ========== -->

    <!-- ========== Start Testimonials Section ========== -->
    <section class="testimonials-section section-padding d-none">
        <div class="container">
            <h2 class="common-title">Testimonials</h2>
            <p class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea adipisci ab recusandae delectus
                quasi vitae
                labore beatae! Blanditiis, dolor est.</p>
        </div>
        <div class="container">
            <div class="row">
                                <div class="col-lg-3 col-md-6">
                    <div class="testimonial-box">
                        <div class="quote-box ">
                            <img src="{{ url('assets/images/random_people.jpg') }}">
                            <p><q>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas vero corporis voluptate
                                    iure dignissimos provident? Sint, quis magni?</q></p>

                        </div>
                        <div class="name-box">
                            <p>Jack Smith</p>
                            <p>Software Developer</p>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="testimonial-box">
                        <div class="quote-box order-last">
                            <img src="{{ url('assets/images/random_people.jpg') }}">
                            <p><q>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas vero corporis voluptate
                                    iure dignissimos provident? Sint, quis magni?</q></p>

                        </div>
                        <div class="name-box">
                            <p>Jack Smith</p>
                            <p>Software Developer</p>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="testimonial-box">
                        <div class="quote-box ">
                            <img src="{{ url('assets/images/random_people.jpg') }}">
                            <p><q>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas vero corporis voluptate
                                    iure dignissimos provident? Sint, quis magni?</q></p>

                        </div>
                        <div class="name-box">
                            <p>Jack Smith</p>
                            <p>Software Developer</p>
                        </div>
                    </div>
                </div>
                                <div class="col-lg-3 col-md-6">
                    <div class="testimonial-box">
                        <div class="quote-box order-last">
                            <img src="{{ url('assets/images/random_people.jpg') }}">
                            <p><q>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas vero corporis voluptate
                                    iure dignissimos provident? Sint, quis magni?</q></p>

                        </div>
                        <div class="name-box">
                            <p>Jack Smith</p>
                            <p>Software Developer</p>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>
    <!-- ========== End Testimonials Section ========== -->

    <!-- ========== Start Trusted By Section ========== -->
    <section class="trusted-by--section section-padding d-none">
        <div class="container">
            <h4>Trusted by</h4>
            <div class="trusted-div">
                                <div class="image-box">
                    <img src="{{ url('assets/images/test_logo.png') }}">
                </div>
                                <div class="image-box">
                    <img src="{{ url('assets/images/test_logo.png') }}">
                </div>
                                <div class="image-box">
                    <img src="{{ url('assets/images/test_logo.png') }}">
                </div>
                                <div class="image-box">
                    <img src="{{ url('assets/images/test_logo.png') }}">
                </div>
                                <div class="image-box">
                    <img src="{{ url('assets/images/test_logo.png') }}">
                </div>
                            </div>
        </div>
    </section>
    <!-- ========== End Trusted By Section ========== -->
@endsection

@section('footer_scripts')
@endsection