@extends('layouts.app')

@section('title','The employee wellbeing perk transforming hybrid working')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="The employee wellbeing perk transforming hybrid working">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  
  <meta property="og:description" content="Reef is a mobile app which allows freelancers and business to access 100s of third workspaces to help with their mental health & wellbeing.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="The employee wellbeing perk transforming hybrid working">
  <meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <meta property="og:image:width" content="600"/>
  <meta property="og:image:height" content="315"/>

  <meta name="description" content="Reef is a mobile app which allows freelancers and business to access 100s of third workspaces to help with their mental health & wellbeing.">
  @endsection

  @section('header')
  @include('front.partials.header')
@endsection

@section('content')
<div class="page-wrapper ambassador-page-block">

    <section class="top-block">
        <div class="container bigger-z-index">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <h1 class="mb-4">Looking to become part of something <span>BIG?</span></h1>
                    <p class="mb-0">At Reef, we like to think we are the best remote working app out there & we would love to have you join us on our mission of eradicating poor employee mental health & wellbeing whilst remote/hybrid working.</p>
                </div>
                <div class="col-lg-6 position-relative">
                    <div class="image">
                        <img src="{{asset('images/ambassador-top-bg.webp')}}" alt="" class="image-auto" width="690" height="641">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="image-text-block">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-12 col-lg-6 order-last order-lg-first">
                    <div class="px-0 px-sm-5">
                        <div class="image-slider">
                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/how-does-it-work-slider.png')}}" alt="#" width="660" height="377" class="image-auto d-inline-block">
                                </div>
                            </div>

                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/how-does-it-work-slider.png')}}" alt="#" width="660" height="377" class="image-auto d-inline-block">
                                </div>
                            </div>

                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/how-does-it-work-slider.png')}}" alt="#" width="660" height="377" class="image-auto d-inline-block">         
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 offset-0 col-sm-10 offset-sm-1 col-lg-6 offset-lg-0 col-xl-5 offset-xl-1 order-first order-lg-last text-center text-lg-start">
                    <h2 class="with-title d-inline-block d-lg-block">So how does it work?</h2>
                    <ul class="list-unstyled with-triangle mb-0 d-inline-block d-md-block">
                        <li class="text-start">Fill out the form below</li>
                        <li class="text-start">We’ll reach out to you for next steps</li>
                        <li class="text-start">You post engaging content tagging Reef</li>
                        <li class="text-start">We pay you commissions monthly</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="image-text-block bg-bluelight">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-12 offset-0 col-sm-10 offset-sm-1 col-lg-6 offset-lg-0 col-xl-5 offset-xl-1 text-center text-lg-start">
                    <h2 class="with-title orange d-inline-block d-lg-block">What do I get?</h2>
                    <ul class="list-unstyled with-triangle orange mb-0 d-inline-block d-md-block">
                        <li class="text-start">Fill out the form below</li>
                        <li class="text-start">We’ll reach out to you for next steps</li>
                        <li class="text-start">You post engaging content tagging Reef</li>
                        <li class="text-start">We pay you commissions monthly</li>
                    </ul>
                </div>
                <div class="col-12 offset-0 col-lg-6 offset-lg-0 col-xl-6 offset-xl-0">
                    <div class="px-0 px-sm-5">
                        <div class="image-slider with-red-arrows">
                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/what-do-i-get-slider.png')}}" alt="#" width="660" height="370" class="image-auto d-inline-block">
                                </div>
                            </div>

                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/what-do-i-get-slider.png')}}" alt="#" width="660" height="370" class="image-auto d-inline-block">
                                </div>
                            </div>

                            <div class="item text-center">
                                <div class="image-wrapper">
                                    <img src="{{asset('images/what-do-i-get-slider.png')}}" alt="#" width="660" height="370" class="image-auto d-inline-block">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

     <section class="standard-block py-4 py-md-5">
        <div class="container">
            <div class="row g-5 align-items-start">
                <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-7 offset-lg-0 order-last order-md-first">
                    <img src="{{asset('images/contact-bg.png')}}" alt="#" class="image-auto">
                </div>
                <div class="col-12 col-md-6 col-lg-5 order-first order-mg-last">
                    <h1 class="h2 mb-2 text-uppercase f-35">Send us a message</h1>
                    <div class="text-center pt-2">
                        {{-- @if(session()->has('success'))
                            <small class="success-msg text-success text-center">Thank you for your message</small>
                        @endif --}}
                        @if(session()->has('error'))
                        <small class="error-msg text-error-bigger text-center">Something went wrong. Please try again</small>
                        @endif
                    </div>
                    <form method="POST" action="{{route('ambassador_submit_form')}}" id="contact_form">
                        @csrf 
                        <div class="mb-2">
                            <label for="input1" class="form-label">First name*</label>
                            <input type="text" name="firstname" value="{{old('firstname')}}" class="form-control formInputs" id="input1" required>
                            <span class="text-error pl-2 ">
                                @if($errors->has('firstname')) 
                                    {{ $errors->first('firstname') }} 
                                @endif 
                            </span>
                        </div>
                        <div class="mb-2">
                            <label for="input1" class="form-label">Surname*</label>
                            <input type="text" name="lastname" value="{{old('lastname')}}"class="form-control formInputs" id="input1" required>
                            <span class="text-error pl-2 ">
                                @if($errors->has('lastname')) 
                                    {{ $errors->first('lastname') }} 
                                @endif 
                            </span>
                        </div>
    
                        <div class="mb-2">
                            <label for="input2" class="form-label">Email*</label>
                            <input type="email" name="email" value="{{old('email')}}" class="form-control formInputs" id="input2" required>
                            <span class="text-error pl-2 ">
                                @if($errors->has('email')) 
                                    {{ $errors->first('email') }} 
                                @endif 
                            </span>
                        </div>
    
                        <div class="mb-2">
                            <label for="input3" class="form-label">City</label>
                            <input type="text" name="city" value="{{old('city')}}"  class="form-control formInputs" id="input3">
                            <span class="text-error pl-2 ">
                                @if($errors->has('city')) 
                                    {{ $errors->first('city') }} 
                                @endif 
                            </span>
                        </div>
    
                        <p class="f-12 mb-2">*Required fields.</p>
                  
                        @if(env('GOOGLE_RECAPTCHA_KEY'))
                        <div class="g-recaptcha pt-3"
                            data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                        </div>
                        <p class="text-error-bigger d-flex justify-content-center">
                            @if($errors->has('g-recaptcha-response')) 
                                {{ $errors->first('g-recaptcha-response') }} 
                            @endif 
                        </p>
                         @endif
    
                        <button type="submit" class="btn green w160 contact_form_submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
    @include('front.partials.free_trial_black_bar')


    @endsection
    
    @section('footer')
        @include('front.partials.footer')
    </div>
    @endsection