@extends('layouts.basic')

@section('content')
  <main class="homepage-build-wrap">

    <div class="video-popup" id="video-popup">
        <div class="popup-content">
            <span class="popup-close">&times;</span>
            <div id="player"></div>
        </div>
    </div>

    <section class="introduction-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="introduction-content">
                        <div class="introduction__text-wrap">
                            <h1 class="introduction__heading">
                                Food Security Is The
                                Responsibility Of Everyone
                            </h1>
                            <p class="introduction__text">
                                Farmsponsor is an agric-tech business with the mandate to promote food security
                                in Africa with a host of our products.
                            </p>
                            <a href="{{route('farmlist')}}" class="homepage__btn">
                                Sponsor Now
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="getting-started-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-heading">
                        <span class="rule"></span>
                        <h2>Getting started on</h2>
                        <h2>Farmsponsor is as simple as ABC.</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="section-content" id="how-it-works">
                        <div class="text container-fluid">
                            <div class="row row-mod">
                                <div class="col-12 mb-5">
                                    <div class="content-wrap">
                                    <span class="icon"><img src="{{asset('img/gs-icon-01.svg')}}" alt=""></span>
                                        <div class="text-content">
                                            <h3>
                                                <span class="test-number">1</span>
                                                Create <br>
                                                A User Account
                                            </h3>
                                            <p>
                                                Create an account using your email address then proceed to complete your profile.
                                                Creating an account takes just a few seconds.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-5">
                                    <div class="content-wrap">
                                        <span class="icon"><img src="{{asset('img/gs-icon-02.svg')}}" alt=""></span>
                                        <div class="text-content">
                                            <h3>
                                                <span class="test-number">2</span>
                                                Choose <br>
                                                Sponsorship Method
                                            </h3>
                                            <p>
                                                Select a farm from our list of available farms ready for sponsorship on the current farm cycle, buy a specific number of units at N100,000.00 per unit by clicking “sponsor now” or “sponsor via vestbanking” and that’s it.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="content-wrap">
                                        <span class="icon"><img src="{{asset('img/gs-icon-03.svg')}}" alt=""></span>
                                        <div class="text-content">
                                            <h3>
                                                <span class="test-number">3</span>
                                                Add Funds To <br>
                                                Vestbanking (Optional)
                                            </h3>
                                            <p>
                                                Add the fund you want to sponsor a farm with to your personal vest bank wallet and proceed to sponsor a farm via vestbanking.
                                            </p>
                                            <div class="cta-wrap">
                                                <a href="{{route('register')}}" class="get-started-btn">Get Started</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-12">
                    <div class="section-content">
                      <div class="gs-img-wrap">
                        <img src="{{asset('img/fs-home-dashboard.png')}}" alt="">
                      </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="choose-farmsponsor-section" id="choose-farmsponsor">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Why you should choose Farmsponsor</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="section-content">
                        <div class="choose-fs__card-wrap">
                            <div class="card-img">
                                <img src="{{asset('img/farmer-fs.svg')}}" alt="" class="introduction__image">
                            </div>
                            <h3>
                                We Empower Farmers
                            </h3>
                            <p>
                                We empower local farmers with funds from individuals and skills to produce at capacity or more and in return, you will get back your initial capital and a certain percentage of your initial capital (usually 15%) after harvest (Usually 12 weeks)
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="section-content">
                        <div class="choose-fs__card-wrap">
                            <div class="card-img">
                                <img src="{{asset('img/returns-fs.svg')}}" alt="" class="introduction__image">
                            </div>
                            <h3>
                                High Returns For Our Sponsors
                            </h3>
                            <p>
                                At a return of 15% on your capital investment over the farming season, Farmsponsor has the highest return on investment in the industry
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="section-content">
                        <div class="choose-fs__card-wrap">
                            <div class="card-img">
                                <img src="{{asset('img/cycles-fs.svg')}}" alt="" class="introduction__image">
                            </div>
                            <h3>
                                Multiple Farming Cycles
                            </h3>
                            <p>
                                We've had over 32 farming cycles. This means that you have the potential to keep earning as much and as often as possible. This is residual income at it's finest.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="statistics-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="content-wrap text-center">
                        <h3 class="statistics__heading">
                            We’ve been making progress
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--stats counter -->
                <div class="col-md-2 col-sm-2 col-12 offset-md-1 offset-sm-1">
                    <div class="stats-card content-wrap">
                        <div class="stats-img">
                            <img src="{{asset('img/reviews-fs.png')}}" alt="a group of people illustration" class="homepage__icon">
                        </div>

                        <div class="stats-figure">
                            <span class="stat-update__figure"><span class="reviews">0</span>&#43; &nbsp;Reviews</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-2 col-12">
                    <div class="stats-card content-wrap">
                        <div class="stats-img">
                            <img src="{{asset('img/farmers.svg')}}" alt="a group of people illustration" class="homepage__icon">
                        </div>

                        <div class="stats-figure">
                            <span class="stat-update__figure"><span class="farmers">0</span>&#43; &nbsp;Farmers</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-2 col-12 ">
                    <div class="stats-card content-wrap">
                        <div class="stats-img">
                            <img src="{{asset('img/sponsors-fs.svg')}}" alt="a group of people illustration" class="homepage__icon">
                        </div>

                        <div class="stats-figure">
                            <span class="stat-update__figure"><span class="sponsor">0</span>&#43; &nbsp;Sponsors</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-2 col-12">
                    <div class="stats-card content-wrap">
                        <div class="stats-img">
                            <img src="{{asset('img/farms-fs.svg')}}" alt="a group of people illustration" class="homepage__icon">
                        </div>

                        <div class="stats-figure">
                            <span class="stat-update__figure"><span class="farms">0</span>&#43; &nbsp;Farms</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-2 col-12">
                    <div class="stats-card content-wrap">
                        <div class="stats-img">
                            <img src="{{asset('img/cycles.svg')}}" alt="a group of people illustration" class="homepage__icon">
                        </div>

                        <div class="stats-figure">
                            <span class="stat-update__figure"><span class="cycle"></span> &nbspCycles</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonials-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                          {{-- <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> --}}
                        </ol>
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <div class="img-wrap">
                                <img src="{{asset('img/sponsor-01.png')}}" class="carousel-img" alt="...">
                            </div>
                            <div class="carousel-caption d-none d-md-block">
                              <h5>
                                Farmsponsor is amazing I increased my sponsorship after the first cycle and I don't have any regrets. well done guys.
                              </h5>
                              <p>
                                <span class="dash"></span>
                                Robert Martins, Port Harcourt, Nigeria
                              </p>
                            </div>
                          </div>
                          <div class="carousel-item">
                            <div class="img-wrap">
                                <img src="{{asset('img/sponsor-02.svg')}}" class="carousel-img" alt="...">
                            </div>
                            <div class="carousel-caption d-none d-md-block">
                              <h5>
                                Farmsponsor is changing the narrative, both for sponsors, farmers, customers and the agricultural tech space. I am a proud sponsor.
                              </h5>
                              <p>
                                <span class="dash"></span>
                                Bala Gana, Abuja, Nigeria
                              </p>
                            </div>
                          </div>
                          {{-- <div class="carousel-item">
                            <div class="img-wrap">
                                <img src="{{asset('img/sponsor-03.png')}}" class="carousel-img" alt="...">
                            </div>
                            <div class="carousel-caption d-none d-md-block">
                              <h5>
                                When I heard about farmsponsor, I gave it a try skeptically, but I'm amazed by the brain behind this initiative.
                              </h5>
                              <p>
                                <span class="dash"></span>
                                Olaitan R, Lagos, Nigeria
                              </p>
                            </div>
                          </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="strides-section" id="strides-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-content">
                        <h2>Making Giant <br/>
                            Strides
                        </h2>
                        <p>
                            We have been making giant strides in the last 22 months since we started this jouney.
                            Our resolve to ending hunger and ensuring food security in africa is the driving force behind this initiative.
                        </p>
                        <!-- To disable popup add 'FS' to the 'videoPopupTrigger' variable selector in the iframeApi.blade.php file found in 'includes' folder -->
                       <div class="video-popup-btn"> watch the clip <span class="play-btn"><img src="{{asset('img/play-btn-img.svg')}}" alt=""></span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="farms-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-content">
                        <h2>
                            Select a Farm
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-md-4 col-sm-6 col-12">
                    <div class="section-content">
                        @include('includes.agrospons-farmcard')
                        {{-- @include('includes.privspons-farmcard') --}}

                    </div>
                </div>
                @foreach($farms as $farm)
                    <div class="col-md-4 col-sm-6 col-12">
                        <div class="section-content">
                            @include('includes.new-farmcard')
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="insurance-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-content text">
                        <h2>
                            Insurance
                        </h2>
                        <p>
                            Farmsponsor has your investment covered with a robust
                            insurance policy. Our farms are comprehensively insured
                            by reputable insurance companies in Nigeria
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6">
                    <div class="section-content">
                        <div class="img-wrap ml-md-auto ml-sm-auto">
                            <img src="{{asset('img/naic-logo.svg')}}" alt="" class="insurance__image">
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6">
                    <div class="section-content">
                        <div class="img-wrap aiico mr-md-auto mr-sm-auto">
                            <img src="{{asset('img/leadway-logo.svg')}}" alt="" class="partners__image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="partners-section">
        <div class="container">
            <div class="section-content text">
                <h2>Partners</h2>
                <p>
                    Our partners are one of our greatest assets in farmsponsor, 
                    as we work together in fostering food security and ending hunger in africa
                </p>
            </div>
            @include('includes.partners')
        </div>
    </section>

    <section class="fs-awards-section">
        @include('includes.awards')
    </section>
  </main>
  @include('includes.iframeAPI')

@endsection