@extends('layouts.app')

@section('title', 'Contact Us — Texora Premium Support')

@section('content')

<section class="pt-40 pb-32 bg-white">
    <div class="max-w-7xl mx-auto px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-24">
            <div>
                <span class="tx-eyebrow text-emerald mb-8 block">Connect</span>
                <h1 class="text-6xl md:text-8xl font-black tracking-tighter text-[#050C17] mb-12">
                    Let's talk<br>strategy<span class="text-emerald">.</span>
                </h1>
                
                <div class="space-y-12 mt-20">
                    <div>
                        <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Direct Lines</h4>
                        <p class="text-2xl font-bold text-[#050C17]">{{ App\Models\SiteSetting::getValue('site_phone', '+92 300 123 4567') }}</p>
                        <p class="text-2xl font-bold text-[#050C17]">{{ App\Models\SiteSetting::getValue('site_email', 'hello@texora.pk') }}</p>
                    </div>
                    
                    <div>
                        <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Office</h4>
                        <p class="text-2xl font-bold text-[#050C17] leading-tight">
                            {!! nl2br(e(App\Models\SiteSetting::getValue('site_address', 'Suite 402, Business Center,\nKarachi, Pakistan'))) !!}
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="bg-[#f9fafb] p-12 rounded-[3rem] border border-slate-100">
                <form action="{{ route('contact.send') }}" method="POST" class="space-y-8">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-3">Full Name</label>
                            <input type="text" name="name" required class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 focus:border-emerald focus:ring-0 transition-all outline-none text-[#050C17] font-bold">
                        </div>
                        <div>
                            <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-3">Email Address</label>
                            <input type="email" name="email" required class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 focus:border-emerald focus:ring-0 transition-all outline-none text-[#050C17] font-bold">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-3">Service Interested In</label>
                        <select name="service" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 focus:border-emerald focus:ring-0 transition-all outline-none text-[#050C17] font-bold appearance-none">
                            <option>Company Registration</option>
                            <option>Tax Filing</option>
                            <option>Trademark</option>
                            <option>Other Consultation</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-3">Message</label>
                        <textarea name="message" rows="5" required class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 focus:border-emerald focus:ring-0 transition-all outline-none text-[#050C17] font-bold"></textarea>
                    </div>
                    
                    <button type="submit" class="w-full bg-[#050C17] text-white py-6 rounded-2xl font-black text-xl hover:bg-emerald transition-all transform hover:-translate-y-1 shadow-xl">
                        Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

@endsection