@extends('layouts.app')

@section('title', 'Contact Frantyapp - Corporate Headquarters')

@section('content')
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Contact Advisory</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl mt-2">Frantyap Homes 633 Headquarters</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Inquire about verified land plots, Kubwa Phase 1 and 2 offers, or schedule a site inspection.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
        
        <!-- Contact Info -->
        <div class="lg:col-span-5 space-y-6">
            
            <div class="border border-gray-200 p-8 bg-white space-y-6">
                <h3 class="font-serif-heading font-bold text-2xl text-black border-b border-gray-100 pb-3">Abuja Headquarters</h3>
                
                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Office Address</span>
                    <p class="text-black text-sm font-semibold mt-1">Suite 11, First Floor Eastley Park Plaza, No 5 Bathurst Street off Aminu Kano Crescent, Wuse 2, FCT-Abuja.</p>
                </div>

                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Phone Desk</span>
                    <p class="text-black text-sm font-semibold mt-1">09126262525 / 08065351599</p>
                </div>

                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">WhatsApp Direct</span>
                    <a href="https://wa.me/2349126262525" target="_blank" class="text-brand-blue font-bold text-sm hover:underline mt-1 block">+234 912 626 2525</a>
                </div>

                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Corporate Email</span>
                    <p class="text-black text-sm font-semibold mt-1">frantyaphomes633@gmail.com</p>
                </div>

                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Operating Hours</span>
                    <p class="text-black text-sm font-semibold mt-1">Monday – Saturday: 8:00 AM – 6:00 PM</p>
                </div>
            </div>

            <div class="bg-black text-white p-8 border border-gray-800 space-y-4">
                <h4 class="font-serif-heading font-bold text-xl text-white">Title Search Consultation</h4>
                <p class="text-gray-400 text-xs font-light leading-relaxed">Our legal advisory desk is available for immediate title search verification at the Ministry of Lands.</p>
                <a href="https://wa.me/2348031234567?text=Hello%20Frantyapp,%20I%20need%20land%20title%20search%20verification." target="_blank" class="inline-block px-6 py-3 bg-white text-black text-xs font-bold uppercase tracking-widest hover:bg-gray-200">
                    Connect With Legal Desk
                </a>
            </div>

        </div>

        <!-- Contact Form -->
        <div class="lg:col-span-7 border border-gray-200 p-8 sm:p-10 bg-white">
            <h3 class="font-serif-heading font-bold text-2xl text-black mb-6">Send Direct Message</h3>

            <form action="{{ route('contact.store') }}" method="POST" class="space-y-5">
                @csrf
                
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Full Name</label>
                    <input type="text" name="name" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Email</label>
                        <input type="email" name="email" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Phone / WhatsApp</label>
                        <input type="tel" name="phone" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                    </div>
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Subject</label>
                    <input type="text" name="subject" required placeholder="e.g. Property Inspection, Land Purchase..." class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black">
                </div>

                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Message</label>
                    <textarea name="message" rows="5" required placeholder="Describe your property requirements..." class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-black"></textarea>
                </div>

                <button type="submit" class="w-full py-4 bg-black text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-neutral-800 transition-colors">
                    Send Message
                </button>
            </form>
        </div>

    </div>
</div>

<!-- Interactive Google Maps Section (Abuja Headquarters Location) -->
<div class="border-t border-gray-200 bg-gray-100 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold uppercase tracking-[0.25em] text-brand-blue flex items-center">
                <i class="fa-solid fa-map-location-dot mr-2 text-base"></i> Office Location Map
            </span>
            <span class="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Suite 11, Eastley Park Plaza, Wuse 2, Abuja</span>
        </div>
        <div class="border border-gray-300 shadow-xl overflow-hidden h-[450px]">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3939.816670868846!2d7.472857475854619!3d9.080517588147614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x104e0a44ef2c2c01%3A0x6b7bfbc1f1ef2e8a!2sAminu%20Kano%20Crescent%2C%20Wuse%202%2C%20Abuja!5e0!3m2!1sen!2sng!4v1725450000000!5m2!1sen!2sng" 
                width="100%" 
                height="100%" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</div>
@endsection
