@extends('layouts.app')

@section('title', 'Welcome to JSP Limited | Real Estate, Construction, Machines, Logistics.')

@section('content')
<main class="gateway">
    <section class="gateway-intro">
        <h1>Choose your<br><span>direction.</span></h1>
        <p class="intro-copy">Professional services, profitable assets, and a team dedicated to your growth.</p>
        <nav class="quick-menu" aria-label="Company quick menu">
            <span class="quick-menu-label">Quick menu</span>
            <a href="{{ route('about') }}">About <b aria-hidden="true">↗</b></a>
            <a href="{{ route('why') }}">Why JSP Limited <b aria-hidden="true">↗</b></a>
            <a href="{{ route('solutions') }}">Our Solutions <b aria-hidden="true">↗</b></a>
            <a href="{{ route('contact') }}">Contact <b aria-hidden="true">↗</b></a>
        </nav>
    </section>
    <section class="division-grid" aria-label="Choose a business division">
        @foreach ([
            ['number' => '01', 'name' => 'Real Estate', 'route' => 'real_estate.index', 'copy' => 'Find ground for your next chapter.', 'image' => 'https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1400&q=85', 'class' => 'properties'],
            ['number' => '02', 'name' => 'Construction', 'route' => 'construction.index', 'copy' => 'Build boldly. Build to last.', 'image' => 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1400&q=85', 'class' => 'construction'],
            ['number' => '03', 'name' => 'Heavy Duty Machines', 'route' => 'heavy_machines.index', 'copy' => 'Power for the work ahead.', 'image' => 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1400&q=85', 'class' => 'machinery'],
            ['number' => '04', 'name' => 'Logistics', 'route' => 'logistics.index', 'copy' => 'Move materials. Keep projects moving.', 'image' => 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1400&q=85', 'class' => 'logistics'],
        ] as $division)
            <a class="division-panel {{ $division['class'] }}" href="{{ route($division['route']) }}">
                <img src="{{ $division['image'] }}" alt="{{ $division['name'] }}" loading="{{ $loop->first ? 'eager' : 'lazy' }}">
                <span class="panel-shade"></span>
                <span class="panel-top"><span>{{ $division['number'] }}</span><span>Enter division <b aria-hidden="true">↗</b></span></span>
                <span class="panel-content"><span class="panel-kicker">JSP / {{ $division['number'] }}</span><strong>{{ $division['name'] }}</strong><span>{{ $division['copy'] }}</span></span>
            </a>
        @endforeach
    </section>
</main>
@endsection