@extends('layouts.app')

@section('title', 'Get in Touch | DIGITAL STUDIO')

@section('content')
    <section class="hero hero-contact py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5 text-center">
            <h1 class="display-4 fw-bold mb-4" data-aos="fade-up" data-aos-delay="100">
                Connect with Our <span class="text-gradient">Team 24/7</span>
            </h1>
            <p class="lead text-muted mx-auto mb-5" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="200">
                We excel at delivering exceptional outcomes for ambitious organisations and forward-thinking clients. Reach
                out to us today for a professional consultation and let's unlock your digital potential.
            </p>
            <a href="{{ route('packages') }}" class="btn btn-primary btn-lg px-5 py-3 rounded-pill" data-aos="fade-up"
                data-aos-delay="300">
                Start Your Project Today
            </a>
        </div>
    </section>

    <section class="contact-section py-5" data-aos="fade-up">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="contact-form-wrapper p-4 p-md-5 bg-white rounded-4 shadow-lg">
                        <h2 class="fw-bold mb-4 text-center" data-aos="fade-up">
                            Complete the form below to <span class="text-gradient">book your Professional
                                Consultation</span>
                        </h2>
                        <p class="text-muted mb-5 text-center" data-aos="fade-up" data-aos-delay="100">
                            Discuss your business objectives with us, and we'll explore how we can achieve something
                            remarkable together.
                        </p>

                        <form action="{{ route('contact.submit') }}" method="POST" data-aos="fade-up" data-aos-delay="200">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6 mb-3">
                                    <input type="text" name="full_name" class="form-control p-3 rounded-3 border"
                                        placeholder="Full Name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="email" name="email_address" class="form-control p-3 rounded-3 border"
                                        placeholder="Email Address" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <input type="tel" name="phone_number" class="form-control p-3 rounded-3 border"
                                        placeholder="Contact Number" maxlength="14" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <select name="subject" class="form-select p-3 rounded-3 border" required>
                                        <option value="" disabled selected>Please Select a Subject</option>
                                        <option value="Consultation">Professional Consultation</option>
                                        <option value="Support">Support & Assistance</option>
                                        <option value="Quote">Request a Bespoke Quote</option>
                                        <option value="Other">Other Enquiries</option>
                                    </select>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <textarea name="message" class="form-control p-3 rounded-3 border" rows="4"
                                        placeholder="Tell us about your project or requirements" required></textarea>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary w-100 py-3 rounded-3 fw-bold">
                                        Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="inquiries-section py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container text-center">
            <h2 class="fw-bold mb-4" data-aos="fade-up">Further <span class="text-gradient">Enquiries</span></h2>
            <p class="text-muted mb-5" data-aos="fade-up" data-aos-delay="100">
                For prompt assistance, please do not hesitate to contact our team via the channels below.
            </p>

            <div class="row g-4 justify-content-center">
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <a href="mailto:info@digitalstudio.co.uk"
                        class="inquiry-box d-block p-4 bg-white border rounded-3 shadow-sm text-decoration-none">
                        <div class="inquiry-icon mb-3">
                            <i class="fas fa-envelope fa-2x text-primary"></i>
                        </div>
                        <span class="d-block text-dark fw-bold">info@digitalstudio.co.uk</span>
                        <small class="text-muted d-block mt-1">Send an Email</small>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="https://wa.me/442045764155" target="_blank"
                        class="inquiry-box d-block p-4 bg-white border rounded-3 shadow-sm text-decoration-none">
                        <div class="inquiry-icon mb-3">
                            <i class="fab fa-whatsapp fa-2x text-primary"></i>
                        </div>
                        <span class="d-block text-dark fw-bold">+44 20 4576 4155</span>
                        <small class="text-muted d-block mt-1">WhatsApp or Phone</small>
                    </a>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                    <a href="https://www.google.com/maps/search/London,+United+Kingdom" target="_blank"
                        class="inquiry-box d-block p-4 bg-white border rounded-3 shadow-sm text-decoration-none">
                        <div class="inquiry-icon mb-3">
                            <i class="fas fa-map-marker-alt fa-2x text-primary"></i>
                        </div>
                        <span class="d-block text-dark fw-bold">London, United Kingdom</span>
                        <small class="text-muted d-block mt-1">Studio Location</small>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-contact {
            background-color: var(--background-color);
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
                url("https://images.unsplash.com/photo-1423666639041-f56000c27a9a?auto=format&fit=crop&q=80&w=2074");
            background-size: cover;
            background-position: center;
            min-height: 50vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20 31c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 1;
            pointer-events: none;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .contact-form-wrapper {
            border: 1px solid var(--border-light);
            transition: var(--transition-smooth);
        }

        .contact-form-wrapper:hover {
            box-shadow: var(--shadow-xl);
        }

        .inquiry-box {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .inquiry-box:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .inquiry-icon {
            width: 70px;
            height: 70px;
            background: var(--primary-ultra-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: var(--transition-smooth);
        }

        .inquiry-box:hover .inquiry-icon {
            background: var(--primary-color);
        }

        .inquiry-box:hover .inquiry-icon i {
            color: white !important;
        }

        .form-control,
        .form-select {
            border: 1px solid var(--border-subtle);
            transition: var(--transition-smooth);
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
        }
    </style>
@endpush