@extends('layouts.app')

@section('content')
    <section class="relative bg-black text-white overflow-hidden">

        <!-- BACKGROUND -->
        <div class="absolute inset-0">
            <div class="absolute inset-0 bg-black"></div>
            <div class="absolute inset-0 opacity-[0.15]"
                style="background-image:url('{{ asset('assets/contact/bg.jpg') }}');
                    background-size:cover; background-position:center;">
            </div>
        </div>

        <div
            class="relative max-w-7xl mx-auto
                px-5 sm:px-8 lg:px-20
                py-20 sm:py-28 lg:py-36">

            <!-- HEADER -->
            <div class="max-w-3xl mb-20">
                <p class="text-[11px] tracking-[0.5em] uppercase text-[#d4af37] mb-6">
                    Contact
                </p>

                <h1 class="text-[28px] sm:text-4xl lg:text-5xl
                       font-semibold leading-tight mb-6">
                    Let’s start a conversation.
                </h1>

                <p class="text-base sm:text-lg text-white/70">
                    Tell us about your idea, project or collaboration.
                    We’d love to hear from you.
                </p>
            </div>

            <!-- CONTENT -->
            <div class="grid lg:grid-cols-12 gap-16 lg:gap-24 items-start">

                <!-- LEFT : CONTACT INFO -->
                <div class="lg:col-span-5 space-y-10">

                    <div>
                        <p class="text-[11px] tracking-[0.4em] uppercase text-[#d4af37] mb-3">
                            Address
                        </p>
                        <p class="text-white/70 leading-relaxed">
                            Creative Horizon Studio<br>
                            1/173, Geetanjali Sher-e-Punjab Society,<br>
                            Andheri (E), Mumbai – 400093<br>
                            Maharashtra, India
                        </p>
                    </div>

                    <div>
                        <p class="text-[11px] tracking-[0.4em] uppercase text-[#d4af37] mb-3">
                            Contact
                        </p>
                        <p class="text-white/70">
                            <span class="block">+91 98203 76227</span>
                            <span class="block">c.horrizen@gmail.com</span>
                        </p>
                    </div>

                    <div>
                        <p class="text-[11px] tracking-[0.4em] uppercase text-[#d4af37] mb-3">
                            Working Hours
                        </p>
                        <p class="text-white/70">
                            Monday – Friday<br>
                            10:00 AM – 7:00 PM
                        </p>
                    </div>

                </div>

                <!-- RIGHT : FORM -->
                <div class="lg:col-span-7">

                    <form id="contactForm" novalidate
                        class="relative rounded-3xl
                             bg-white/5 backdrop-blur
                             border border-white/10
                             p-8 sm:p-10 lg:p-12
                             space-y-8">

                        <!-- NAME -->
                        <div>
                            <label class="block text-xs uppercase tracking-widest mb-2 text-white/70">
                                Name *
                            </label>
                            <input type="text" name="name" required minlength="2"
                                class="w-full bg-transparent border-b border-white/30
                                      focus:border-[#d4af37] outline-none py-2 text-white">
                            <p class="text-xs text-red-400 mt-2 hidden error-msg">
                                Please enter your name
                            </p>
                        </div>

                        <!-- EMAIL -->
                        <div>
                            <label class="block text-xs uppercase tracking-widest mb-2 text-white/70">
                                Email *
                            </label>
                            <input type="email" name="email" required
                                class="w-full bg-transparent border-b border-white/30
                                      focus:border-[#d4af37] outline-none py-2 text-white">
                            <p class="text-xs text-red-400 mt-2 hidden error-msg">
                                Please enter a valid email
                            </p>
                        </div>

                        <!-- PHONE -->
                        <div>
                            <label class="block text-xs uppercase tracking-widest mb-2 text-white/70">
                                Phone *
                            </label>
                            <input type="tel" name="phone" required pattern="[0-9]{10}" maxlength="10"
                                class="w-full bg-transparent border-b border-white/30
                                      focus:border-[#d4af37] outline-none py-2 text-white">
                            <p class="text-xs text-red-400 mt-2 hidden error-msg">
                                Enter a valid 10-digit phone number
                            </p>
                        </div>

                        <!-- MESSAGE -->
                        <div>
                            <label class="block text-xs uppercase tracking-widest mb-2 text-white/70">
                                Message *
                            </label>
                            <textarea name="message" required minlength="10" rows="4"
                                class="w-full bg-transparent border-b border-white/30
                                         focus:border-[#d4af37] outline-none py-2 text-white"></textarea>
                            <p class="text-xs text-red-400 mt-2 hidden error-msg">
                                Message should be at least 10 characters
                            </p>
                        </div>

                        <!-- SUBMIT -->
                        <div class="pt-6">
                            <button type="submit"
                                class="inline-flex items-center gap-4
                                       px-8 py-3
                                       border border-[#d4af37]/60
                                       text-[#d4af37]
                                       uppercase tracking-widest text-xs
                                       rounded-full cursor-pointer
                                       transition-all duration-300
                                       hover:bg-[#d4af37]
                                       hover:text-black">
                                Send Message
                                <span>→</span>
                            </button>
                        </div>

                    </form>

                </div>

            </div>

            <!-- MAP -->
            <div class="mt-32 rounded-3xl overflow-hidden border border-white/10">
                <iframe class="w-full h-[360px]" src="https://www.google.com/maps?q=Mumbai&output=embed" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>

        </div>
    </section>
 <x-footer />
    <!-- VALIDATION SCRIPT -->
    <script>
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            let valid = true;

            this.querySelectorAll('input, textarea').forEach(field => {
                const error = field.nextElementSibling;
                if (!field.checkValidity()) {
                    valid = false;
                    error.classList.remove('hidden');
                } else {
                    error.classList.add('hidden');
                }
            });

            if (!valid) e.preventDefault();
        });

        // Only numbers in phone
        document.querySelector('input[name="phone"]').addEventListener('input', e => {
            e.target.value = e.target.value.replace(/\D/g, '').slice(0, 10);
        });
    </script>
@endsection