@extends('layouts.main')

@section('content')
    <div>
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
        <div
            class="p-5 min-h-screen bg-cover bg-center d-flex align-items-center justify-content-center text-center position-relative"
            style="background-image: url('/images/home.jpeg'); background-size: cover; min-height: 100%; max-width: 100%; width: 100vw;">

            <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0, 0, 0, 0.5);"></div>

            <div class="position-relative text-white px-3">
                <div class="display-1 fw-bold mb-4">
                   Domestic and commercial Removals
                    <br>
                    <span class="text-primary">&#x2022;</span>
                    <span class="text-secondary">&#x2022;</span>
                    <br>
                    Waste management
                </div>
                <div class="display-4  mb-3">
                    in Shrewsbury | Shropshire | Nationwide
                </div>
                @if(config('ace.start_date') > now())
                    <div class="display-6 fst-italic">
                        Starting {{ config('ace.start_date')->format('d M Y') }}
                    </div>
                @endif
            </div>
        </div>
             <div class="container py-5">
                <div class="col-md-12">
                    <div class="row justify-content-center">
                        @include('components.info', [
                        ])
                    </div>
                </div>
            </div>
        @if(config('ace.show_trial'))
            <div class="container py-5">
                <div class="col-md-8 offset-md-2">
                    <h1 class="mt-2 mb-4">Have a question?</h1>
                    <div class="row justify-content-center">
                        @include('components.trial', [
                        ])
                    </div>
                </div>
            </div>
        @endif
        @if(config('ace.show_location') && config('ace.map_key'))
            <div class="container py-5">
                <h1 class="mt-4 mb-4">Where to find us</h1>
                <div class="col-md-12 justify-content-center">
                    <iframe
                        width="100%" height="450"
                        frameborder="0" style="border:0"
                        referrerpolicy="no-referrer-when-downgrade"
                        src="https://www.google.com/maps/embed/v1/place?key={{ config('ace.map_key') }}&q={{ config('ace.address') }}"
                        allowfullscreen>
                    </iframe>
                </div>

            </div>
        @endif
    </div>

    <style>
        @media only screen and (max-width: 600px) {
            .bg-cover {
                width: 600px;
                max-width: 100%;
                margin: 0 auto;
            }
        }
        .card img {
            max-height: 250px;
            object-fit: cover;
        }
    </style>
@endsection