@extends('layouts.app')

@section('title', 'Contact Us - Arrow Car Hire | Get in Touch')
@section('meta_description', 'Contact Arrow Car Hire for PCO rentals, credit hire, and general inquiries. Visit us in London, call, or email. We are here to help.')
@section('meta_keywords', 'contact arrow car hire, car rental support, PCO rental contact, London car hire address, Arrow Car Hire phone number')


@section('content')
<!-- Hero Banner -->
<section class="position-relative overflow-hidden">
    <div class="rsp-banner-img position-relative" style="height: 400px;">
        <img src="{{ asset('images/contact-banner.jpg') }}" alt="Contact Us" class="w-100 h-100 object-fit-cover" onerror="this.src='https://placehold.co/1920x600?text=Contact+Us'">
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));"></div>
        
        <div class="position-absolute top-50 start-50 translate-middle text-center text-white w-100 px-3">
            <h1 class="display-3 fw-bold mb-3 wow fadeInUp" data-wow-delay="0.2s">Get in Touch</h1>
            <p class="lead wow fadeInUp" data-wow-delay="0.4s">We are here to answer any questions you may have</p>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container py-4">


        <!-- Contact Cards -->
        <div class="row g-4 mb-5">
            <div class="col-lg-4">
                <div class="card h-100 border-0 shadow-sm hover-lift text-center py-4">
                    <div class="card-body">
                        <div class="mb-3 text-primary">
                            <i class="fas fa-map-marker-alt fa-3x"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Our Location</h5>
                        <p class="text-muted mb-0">5, Brayford Square,<br>London, England, E1 0SG</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card h-100 border-0 shadow-sm hover-lift text-center py-4">
                    <div class="card-body">
                        <div class="mb-3 text-primary">
                            <i class="fas fa-phone-alt fa-3x"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Phone Number</h5>
                        <p class="text-muted mb-0">
                            <a href="tel:+442039309973" class="text-decoration-none text-dark stretched-link">+44 203 930 9973</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card h-100 border-0 shadow-sm hover-lift text-center py-4">
                    <div class="card-body">
                        <div class="mb-3 text-primary">
                            <i class="fas fa-envelope fa-3x"></i>
                        </div>
                        <h5 class="fw-bold mb-3">Email Address</h5>
                        <p class="text-muted mb-0">
                            <a href="mailto:info@arrowcarhire.co.uk" class="text-decoration-none text-dark stretched-link">info@arrowcarhire.co.uk</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Form Section -->
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4 p-md-5">
                        <h3 class="fw-bold mb-4">Send us a Message</h3>
                        
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        <form action="{{ route('enquiries.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="type" value="general">
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
                                        <label for="name">Your Name</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Your Email">
                                        <label for="email">Your Email</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" required>
                                        <label for="phone">Phone Number</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" placeholder="Leave a message here" id="message" name="message" style="height: 150px"></textarea>
                                        <label for="message">Message</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary btn-lg w-100 py-3" type="submit">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Sidebar: Business Hours & Map -->
            <div class="col-lg-5">
                <div class="d-flex flex-column gap-4 h-100">
                    <!-- Business Hours -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="fw-bold mb-4"><i class="fas fa-clock text-primary me-2"></i> Business Hours</h3>
                            <ul class="list-unstyled mb-0">
                                <li class="d-flex justify-content-between border-bottom py-3">
                                    <span class="fw-bold">Monday - Friday</span>
                                    <span class="text-primary fw-bold">9:00 AM - 6:00 PM</span>
                                </li>
                                <li class="d-flex justify-content-between border-bottom py-3">
                                    <span class="fw-bold">Saturday</span>
                                    <span class="text-primary fw-bold">10:00 AM - 3:00 PM</span>
                                </li>
                                <li class="d-flex justify-content-between py-3">
                                    <span class="fw-bold">Sunday</span>
                                    <span class="text-danger fw-bold">Closed</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Map -->
                    <div class="card border-0 shadow-sm flex-grow-1 overflow-hidden" style="min-height: 300px;">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.698767982864!2d-0.05448668422960686!3d51.51883697963705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761d36c6460111%3A0x628549723463806!2s5%20Brayford%20Square%2C%20London%20E1%200SG%2C%20UK!5e0!3m2!1sen!2sus!4v1645564800000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('styles')
<style>
.page-header-section {
    margin-top: 100px;
    padding: 60px 0;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}
</style>
@endpush
@endsection