@extends('layouts.website')

@section('inline-style')
<style>
 

  
</style>
@endsection
@section('content')
    <section class="page-header">
      <div class="bg-image" style="background-image: url('/images/about/main-banner.jpg')"></div>
    	<div class="container">
    		<div class="banner-description">
    			<h1>Corridor/Global maps testing</h1>
    			<div class="banner-copy">
	    			<p>
	    				Through tenacity, courage and vision, Grindrod grew from humble beginnings into a global powerhouse that is listed on the JSE and is represented by subsidiaries, joint ventures and associated companies in 23 countries. We work hard everyday to earn our customer's trust. We are passionate about understanding their unique requirements and collaborating with them to create the most cost effective and efficient solution to move cargo across trade corridors - by road, rail, sea and air.
	    				<br><br>
	    				We operate with insight and agility, and lead with grit. It is this determination that is at the core of our success. 
	    			</p>	
    			</div>    			
    		</div>
    	</div>
    </section>
    <section>

      <isometrics-mobile-mining>
        {{-- @include('pages.website.solutions.partials.customer.mobile.import-process') --}}
        {{-- @include('pages.website.solutions.partials.customer.mobile.export-mining') --}}
        @include('pages.website.solutions.partials.customer.mobile.export-agriculture')
      </isometrics-mobile-mining>
      
      <!-- <isometrics-drawing>
        {{-- @include('pages.website.solutions.partials.customer.isometric.import-process-svg') --}}
        {{-- @include('pages.website.solutions.partials.customer.isometric.export-agriculturep-svg') --}}
        {{-- @include('pages.website.solutions.partials.customer.isometric.export-mining-svg') --}}
        {{-- @include('pages.website.solutions.partials.customer.isometric.industry-mining-svg') --}}
        @include('pages.website.solutions.partials.customer.isometric.industry-agriculture-svg')
      </isometrics-drawing> -->

      <!-- <isometrics-mobile-mining>
        @include('pages.website.solutions.partials.customer.mobile.agriculture')
      </isometrics-mobile-mining>
      <isometrics-mobile-mining>
        @include('pages.website.solutions.partials.customer.mobile.mining')
      </isometrics-mobile-mining> -->
    </section>
    <section class="about-footprint">
    	<corridor-map inline-template>
        <div class="corridor-map-wrapper">
          <div class="container">
            <div class="corridor-red-block">
              <div class="inner-red-block">
                We operate on numerous corridors throughout southern Africa. Our highly experienced teams are on the ground. They understand the complexities of operating across borders and understand the infrastructural challenges in southern Africa.
                <br/><br/>
                <a href="/contact-us">Contact us to assist you in developing a multimode and multiport logistics model</a>
              </div>            
            </div>
          </div>
          
          <!-- <svg-pan-zoom class="svg-pan-zoom"
            :zoomEnabled="false"
            :controlIconsEnabled="false" 
            :mouseWheelZoomEnabled="false" 
            :fit="false" 
            :center="false"
          > -->
          <div class="svg-map-zoom">
            @include('pages.website.partials.corridor-map')
          </div>
            
          <!-- </svg-pan-zoom> -->
          <div class="container">
            <div class="corridor-legends">
              <h5>Click below for <br>more detail on each route</h5>
              <a href="#" 
                v-for="(item, index) in corridorRoutes" 
                :key="index" 
                @click.prevent="drawLines(item.slug, index)"
                :class="{ 'active': activeIndex === index }"
                >@{{ item.route }}</a>
            </div>
            <div class="corridor-info" >
              <div v-if="bodyContent">
                <h3>@{{ bodyContent.title }} Hello</h3>
                <div class="cori-content" v-html="bodyContent.description"></div>
                <a href="/about#global-footprint" class="map-interlink">
                  Explore our global footprint
                </a>
              
            </div>  
          </div>          
        </div>
      </corridor-map>
    </section>
    <page-news></page-news>
    
@endsection

@section('js')

<!-- Chart code -->
<script>
</script>
@endsection