<x-layouts.frontend title="Contact Us">
    <section class="mx-auto max-w-6xl px-6 py-16">
        <div class="mb-12 text-center" data-reveal-self>
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-champagne-light">Get in Touch</p>
            <h1 class="mt-2 font-display text-3xl text-ink sm:text-4xl">We'd Love to Hear From You</h1>
        </div>

        <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">
            <div class="space-y-5 lg:col-span-2" data-reveal-self="right">
                @if (config('niyarasa.contact.email'))
                    <div class="card-premium group flex items-start gap-4 p-5">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-champagne/15 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                            <x-icon name="mail" class="h-4.5 w-4.5" />
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-wide text-ink/40">Email</p>
                            <p class="mt-0.5 text-sm font-medium text-ink">{{ config('niyarasa.contact.email') }}</p>
                        </div>
                    </div>
                @endif

                @if (\App\Models\Setting::config('contact.phone'))
                    <div class="card-premium group flex items-start gap-4 p-5">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-champagne/15 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                            <x-icon name="phone" class="h-4.5 w-4.5" />
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-wide text-ink/40">Phone</p>
                            <p class="mt-0.5 text-sm font-medium text-ink">{{ \App\Models\Setting::config('contact.phone') }}</p>
                        </div>
                    </div>
                @endif

                @if (\App\Models\Setting::config('social.whatsapp_number'))
                    <a
                        href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::config('social.whatsapp_number')) }}"
                        target="_blank" rel="noopener"
                        class="card-premium group flex items-start gap-4 p-5"
                    >
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-champagne/15 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                            <x-icon name="brand-whatsapp" class="h-4.5 w-4.5" />
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-wide text-ink/40">WhatsApp</p>
                            <p class="mt-0.5 text-sm font-medium text-ink">{{ \App\Models\Setting::config('social.whatsapp_number') }}</p>
                        </div>
                    </a>
                @endif

                <div class="card-premium group flex items-start gap-4 p-5">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-champagne/15 text-champagne-light transition-transform duration-300 group-hover:scale-110">
                        <x-icon name="map-pin" class="h-4.5 w-4.5" />
                    </div>
                    <div>
                        <p class="text-xs uppercase tracking-wide text-ink/40">Based In</p>
                        <p class="mt-0.5 text-sm font-medium text-ink">Karachi, Pakistan</p>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-3" data-reveal-self="left">
                <form method="POST" action="{{ route('pages.contact.send') }}" class="space-y-5 rounded-2xl border border-black/5 bg-white p-7 shadow-[var(--shadow-soft)]">
                    @csrf

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <x-frontend.label for="name" value="Your Name" />
                            <x-frontend.input id="name" name="name" :value="old('name')" required />
                            <x-frontend.error :messages="$errors->get('name')" />
                        </div>
                        <div>
                            <x-frontend.label for="email" value="Email Address" />
                            <x-frontend.input id="email" type="email" name="email" :value="old('email')" required />
                            <x-frontend.error :messages="$errors->get('email')" />
                        </div>
                    </div>

                    <div>
                        <x-frontend.label for="subject" value="Subject" />
                        <x-frontend.input id="subject" name="subject" :value="old('subject')" required />
                        <x-frontend.error :messages="$errors->get('subject')" />
                    </div>

                    <div>
                        <x-frontend.label for="message" value="Message" />
                        <x-frontend.textarea id="message" name="message" required>{{ old('message') }}</x-frontend.textarea>
                        <x-frontend.error :messages="$errors->get('message')" />
                    </div>

                    <x-frontend.button type="submit" variant="accent">Send Message</x-frontend.button>
                </form>
            </div>
        </div>
    </section>
</x-layouts.frontend>
