@extends('layouts.main')
@section('content')
    <div class="row g-5">
        <!-- Contact Information -->
        <div class="col-lg-5">
            <h1 class="fw-bold text-primary mb-4">Get in Touch</h1>
            <p class="lead text-muted mb-5">
                Whether you're planning a house move, office relocation, or need professional waste management, our team is ready to help. Reach out today for a free, no-obligation quote.
            </p>

            <div class="contact-details">
                <a href="tel:{{ config('app.phone') }}" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
                    <div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="ms-4">
                        <h5 class="mb-0 fw-bold text-dark">Phone</h5>
                        <p class="mb-0 text-muted">{{ config('app.phone') }}</p>
                    </div>
                    <div class="ms-auto text-primary">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>

                <a href="mailto:{{ config('app.email') ?: 'info@stumovesyou.co.uk' }}" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
                    <div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="ms-4">
                        <h5 class="mb-0 fw-bold text-dark">Email</h5>
                        <p class="mb-0 text-muted">{{ config('app.email') ?: 'info@stumovesyou.co.uk' }}</p>
                    </div>
                    <div class="ms-auto text-primary">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>

                <a href="{{ config('social.links.facebook.url') }}" target="_blank" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
                    <div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                        <i class="fab fa-facebook-f"></i>
                    </div>
                    <div class="ms-4">
                        <h5 class="mb-0 fw-bold text-dark">Facebook</h5>
                        <p class="mb-0 text-muted">Stu Moves You</p>
                    </div>
                    <div class="ms-auto text-primary">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3 bg-light">
                <div class="card-body p-4 p-md-5">
                    @if(session('success'))
                        <div class="alert alert-success border-0 shadow-sm mb-4">
                            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.submit') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control border-0" 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 border-0" id="email" name="email" placeholder="name@example.com" required>
                                    <label for="email">Email Address</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control border-0" placeholder="Leave a message here" id="message" name="message" style="height: 150px" required></textarea>
                                    <label for="message">Your Message</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg px-5 py-3 w-100 fw-bold shadow-sm">
                                    Send Message <i class="fas fa-paper-plane ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if(config('site.show_location') && config('site.map_key'))
    <div class="row mt-5">
        <div class="col-12">
            <div class="rounded-3 overflow-hidden shadow-sm">
                <iframe
                    width="100%" height="400"
                    frameborder="0" style="border:0"
                    referrerpolicy="no-referrer-when-downgrade"
                    src="https://www.google.com/maps/embed/v1/place?key={{ config('site.map_key') }}&q={{ config('site.address') }}"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>
    @endif
    <style>
        .contact-card {
            transition: all 0.3s ease;
        }
        .contact-card:hover {
            transform: translateY(-5px);
            border-color: var(--bs-primary) !important;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
            background-color: #f8f9fa !important;
        }
        .contact-card:hover .flex-shrink-0 {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }
    </style>
@endsection