<?php
use Livewire\Component;
use App\Models\Inquiry;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10 font-odia">

    <!-- Page Header -->
    <div class="mb-10 border-b border-slate-100 pb-8">
        <span class="inline-block bg-brand-blue text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-sm mb-4">ଯୋଗାଯୋଗ</span>
        <h1 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tighter leading-none mb-3">
            ଆମ ସହ ଯୋଗାଯୋଗ
        </h1>
        <p class="text-slate-500 text-base md:text-lg font-medium max-w-2xl">
            ଆପଣଙ୍କ ମତାମତ, ପ୍ରଶ୍ନ ବା ଅଭିଯୋଗ ଆମ ପାଖରେ ପହଞ୍ଚାନ୍ତୁ।
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">

        <!-- Contact Info -->
        <div class="space-y-8">
            <div>
                <h2 class="text-sm font-black uppercase tracking-widest text-slate-900 mb-6">ଆମ ସଂପର୍କ</h2>
                <div class="space-y-5">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-brand-blue/10 rounded-md flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-envelope text-brand-blue text-sm"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400 mb-1">ଇ-ମେଲ</p>
                            <p class="text-sm font-semibold text-slate-700">info@bikashbarta.in</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-brand-blue/10 rounded-md flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-phone text-brand-blue text-sm"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400 mb-1">ଫୋନ</p>
                            <p class="text-sm font-semibold text-slate-700">+91 00000 00000</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-brand-blue/10 rounded-md flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-location-dot text-brand-blue text-sm"></i>
                        </div>
                        <div>
                            <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400 mb-1">ଠିକଣା</p>
                            <p class="text-sm font-semibold text-slate-700 leading-relaxed">ଭୁବନେଶ୍ୱର, ଓଡ଼ିଶା</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Social Links -->
            <div>
                <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400 mb-4">ସୋସିଆଲ ମିଡ଼ିଆ</p>
                <div class="flex gap-3">
                    <a href="#" class="w-9 h-9 bg-slate-100 hover:bg-brand-blue hover:text-white text-slate-500 rounded-md flex items-center justify-center transition-colors">
                        <i class="fa-brands fa-facebook-f text-sm"></i>
                    </a>
                    <a href="#" class="w-9 h-9 bg-slate-100 hover:bg-brand-red hover:text-white text-slate-500 rounded-md flex items-center justify-center transition-colors">
                        <i class="fa-brands fa-youtube text-sm"></i>
                    </a>
                    <a href="#" class="w-9 h-9 bg-slate-100 hover:bg-pink-500 hover:text-white text-slate-500 rounded-md flex items-center justify-center transition-colors">
                        <i class="fa-brands fa-instagram text-sm"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="lg:col-span-2">
            @if($submitted)
                <div class="text-center py-16">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-5">
                        <i class="fa-solid fa-circle-check text-3xl text-green-600"></i>
                    </div>
                    <h2 class="text-2xl font-black text-slate-900 mb-3">ଧନ୍ୟବାଦ!</h2>
                    <p class="text-slate-500 font-odia mb-6">ଆପଣଙ୍କ ବାର୍ତ୍ତା ଆମ ପାଖରେ ପହଞ୍ଚିଛି। ଆମେ ଶୀଘ୍ର ଉତ୍ତର ଦେବୁ।</p>
                    <button wire:click="$set('submitted', false)" class="text-sm font-bold text-brand-blue underline underline-offset-2">
                        ଆଉ ଏକ ବାର୍ତ୍ତା ପଠାନ୍ତୁ
                    </button>
                </div>
            @else
                <form wire:submit.prevent="submit" class="space-y-5">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">ନାମ <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="name"
                                class="w-full border border-slate-200 rounded px-4 py-2.5 text-sm focus:outline-none focus:border-brand-blue transition-colors"
                                placeholder="ଆପଣଙ୍କ ନାମ">
                            @error('name') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">ଇ-ମେଲ <span class="text-red-500">*</span></label>
                            <input type="email" wire:model="email"
                                class="w-full border border-slate-200 rounded px-4 py-2.5 text-sm focus:outline-none focus:border-brand-blue transition-colors"
                                placeholder="your@email.com">
                            @error('email') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">ଫୋନ ନଂ</label>
                            <input type="tel" wire:model="phone"
                                class="w-full border border-slate-200 rounded px-4 py-2.5 text-sm focus:outline-none focus:border-brand-blue transition-colors"
                                placeholder="+91 00000 00000">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">ବିଷୟ <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="subject"
                                class="w-full border border-slate-200 rounded px-4 py-2.5 text-sm focus:outline-none focus:border-brand-blue transition-colors"
                                placeholder="ବାର୍ତ୍ତାର ବିଷୟ">
                            @error('subject') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">ବାର୍ତ୍ତା <span class="text-red-500">*</span></label>
                        <textarea wire:model="message" rows="6"
                            class="w-full border border-slate-200 rounded px-4 py-2.5 text-sm focus:outline-none focus:border-brand-blue transition-colors resize-none"
                            placeholder="ଆପଣଙ୍କ ବାର୍ତ୍ତା ଏଠାରେ ଲେଖନ୍ତୁ..."></textarea>
                        @error('message') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" wire:loading.attr="disabled"
                            class="bg-brand-blue text-white font-black uppercase tracking-widest px-10 py-3 rounded-sm text-sm hover:bg-brand-blue/90 transition-colors disabled:opacity-60">
                            <span wire:loading.remove>ପଠାନ୍ତୁ</span>
                            <span wire:loading>ପଠାଉଛୁ...</span>
                        </button>
                    </div>
                </form>
            @endif
        </div>

    </div>
</main>