@extends('layouts.app')

@section('title', 'Contact & Showroom Location – Niketan, Gulshan-1, Dhaka | MotoSolution')

@section('content')
<div class="bg-[#0B0F19] py-12 text-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-red-600/15 text-red-400 border border-red-500/30 mb-4">
                <i class="fa-solid fa-handshake"></i> Direct Showroom Concierge
            </span>
            <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight font-heading leading-tight">
                Visit Our Niketan Showroom or <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Connect With Us</span>
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                Whether you wish to inspect our ready stock vehicles or sit with an import specialist over live Japanese auction terminals, we welcome you to our Niketan lounge.
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 mb-16">
            
            <!-- Contact Info & Showroom Details (Left 5 Cols) -->
            <div class="lg:col-span-5 space-y-6">
                
                <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-8 space-y-6 shadow-xl">
                    <h2 class="text-xl font-bold text-white font-heading border-b border-white/10 pb-4">Showroom & Headquarters</h2>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-red-600/20 text-red-400 flex items-center justify-center shrink-0 text-base">
                            <i class="fa-solid fa-location-dot"></i>
                        </div>
                        <div>
                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Physical Address</span>
                            <p class="text-sm font-semibold text-white leading-relaxed">
                                {{ config('motosolution.showroom.address', 'House 14, Road 3, Block B, Niketan, Gulshan-1, Dhaka-1212, Bangladesh') }}
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-blue-600/20 text-blue-400 flex items-center justify-center shrink-0 text-base">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <div>
                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Telephone & Inquiries</span>
                            <p class="text-sm font-bold text-white">+880 {{ config('motosolution.contact.phone', '1711-000000') }}</p>
                            <p class="text-xs text-slate-400 mt-0.5">Showroom reception desk</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-emerald-600/20 text-emerald-400 flex items-center justify-center shrink-0 text-base">
                            <i class="fa-brands fa-whatsapp"></i>
                        </div>
                        <div>
                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">WhatsApp Live Concierge</span>
                            <p class="text-sm font-bold text-emerald-400">+880 {{ config('motosolution.contact.whatsapp', '1711-000000') }}</p>
                            <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20would%20like%20to%20inquire%20about%20a%20car." target="_blank" class="text-xs font-bold text-emerald-400 hover:underline mt-0.5 inline-block">
                                Click to start WhatsApp chat &rarr;
                            </a>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-amber-600/20 text-amber-400 flex items-center justify-center shrink-0 text-base">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <div>
                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400 block mb-1">Showroom Operating Hours</span>
                            <p class="text-sm font-semibold text-white">{{ config('motosolution.showroom.hours', 'Sat - Thu: 10:00 AM - 8:30 PM') }}</p>
                            <p class="text-xs text-slate-400 mt-0.5">Friday: 3:00 PM – 8:30 PM</p>
                        </div>
                    </div>
                </div>

                <!-- Fast WhatsApp Banner -->
                <div class="p-6 rounded-2xl bg-gradient-to-br from-emerald-950/40 to-slate-900 border border-emerald-500/30 flex items-center justify-between gap-4">
                    <div>
                        <p class="font-bold text-white text-sm">Need an instant response?</p>
                        <p class="text-xs text-slate-400">Our team is active on WhatsApp.</p>
                    </div>
                    <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shrink-0 shadow transition">
                        <i class="fa-brands fa-whatsapp mr-1"></i> Open Chat
                    </a>
                </div>

            </div>

            <!-- Inbound Contact Form (Right 7 Cols) -->
            <div class="lg:col-span-7 bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-8 shadow-xl">
                <h2 class="text-xl font-bold text-white font-heading mb-1">Send Us a Direct Message</h2>
                <p class="text-xs text-slate-400 mb-6">Leave your query or schedule a private showroom consultation. We respond within 2 hours during business hours.</p>

                @if(session('success'))
                    <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm flex items-center gap-2">
                        <i class="fa-solid fa-circle-check"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                <form method="POST" action="{{ route('lead.store') }}" class="space-y-4">
                    @csrf
                    <input type="hidden" name="source" value="contact_page">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Full Name *</label>
                            <input type="text" name="name" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-3 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Tanvir Ahmed">
                        </div>
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Phone Number / WhatsApp *</label>
                            <input type="text" name="phone" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-3 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. 01711-XXXXXX">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Email Address</label>
                            <input type="email" name="email" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-3 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. client@example.com">
                        </div>
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Vehicle Interest</label>
                            <input type="text" name="vehicle_interest" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-3 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="e.g. Toyota Harrier, Grace, Noah">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1">Message or Special Instructions *</label>
                        <textarea name="message" rows="4" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-3 text-white text-xs font-semibold focus:border-red-500 focus:outline-none" placeholder="Describe what you are looking for, schedule a showroom visit, or ask about import procedures..."></textarea>
                    </div>

                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold text-sm py-3.5 px-6 rounded-xl shadow-lg shadow-red-900/30 transition">
                        <i class="fa-solid fa-paper-plane mr-2"></i> Submit Showroom Inquiry
                    </button>
                </form>
            </div>

        </div>

    </div>
</div>
@endsection