@extends('layouts.public')

@section('title', 'Contact Us | CEPI Pakistan')

@section('content')
<section class="bg-[linear-gradient(135deg,#0f172a_0%,#161950_55%,#1d4ed8_100%)] py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">Contact CEPI</p>
        <h1 class="mt-5 max-w-4xl text-4xl font-extrabold leading-tight sm:text-5xl">Talk to our admissions and guidance team.</h1>
        <p class="mt-6 max-w-3xl text-lg leading-8 text-white/75">
            Reach out for admissions guidance, subject selection, batch details, mentoring, books, and program planning.
        </p>
    </div>
</section>

<section class="bg-white py-20">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-[1.1fr,0.9fr] lg:px-8">
        <div class="rounded-[32px] border border-slate-200 bg-white p-8 shadow-theme-sm sm:p-10">
            <div class="mb-8">
                <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Send a Message</p>
                <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-slate-900">We’ll help you choose the right path.</h2>
            </div>

            @if (session('success'))
                <div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
                    {{ session('success') }}
                </div>
            @endif

            <form method="POST" action="{{ route('contact.submit') }}" class="grid gap-5 md:grid-cols-2">
                @csrf
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Your Name</label>
                    <input type="text" name="name" value="{{ old('name') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" required>
                    @error('name') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Your Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" required>
                    @error('email') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Your Mobile</label>
                    <input type="text" name="mobile" value="{{ old('mobile') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" required>
                    @error('mobile') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Interested In</label>
                    <select name="interested_in" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500">
                        <option value="">Select program / interest</option>
                        @foreach ($interests as $interest)
                            <option value="{{ $interest }}" {{ old('interested_in') === $interest ? 'selected' : '' }}>{{ $interest }}</option>
                        @endforeach
                    </select>
                    @error('interested_in') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Message</label>
                    <textarea name="message" rows="6" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" required>{{ old('message') }}</textarea>
                    @error('message') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>

                <div class="md:col-span-2">
                    <button type="submit" class="rounded-2xl bg-brand-600 px-6 py-3.5 text-sm font-semibold text-white shadow-theme-sm transition hover:bg-brand-700">
                        Send Message
                    </button>
                </div>
            </form>
        </div>

        <div class="space-y-6">
            <div class="rounded-[32px] bg-[linear-gradient(145deg,#161950_0%,#1d4ed8_100%)] p-8 text-white shadow-theme-lg sm:p-10">
                <p class="text-sm font-semibold uppercase tracking-[0.24em] text-white/65">Office Details</p>
                <div class="mt-6 space-y-5 text-sm leading-7 text-white/80">
                    <div>
                        <p class="font-semibold text-white">Address</p>
                        <p>{{ $contactDetails['address'] }}</p>
                    </div>
                    <div>
                        <p class="font-semibold text-white">Mobile Number</p>
                        <p>{{ $contactDetails['mobile'] }}</p>
                    </div>
                    <div>
                        <p class="font-semibold text-white">Email</p>
                        <p>{{ $contactDetails['email'] }}</p>
                    </div>
                    <div>
                        <p class="font-semibold text-white">WhatsApp</p>
                        <p>{{ $contactDetails['whatsapp'] }}</p>
                    </div>
                </div>
            </div>

            <div class="rounded-[32px] border border-slate-200 bg-slate-50 p-8 shadow-theme-xs sm:p-10">
                <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Need Faster Response?</p>
                <p class="mt-4 text-sm leading-7 text-slate-600">
                    For admissions and batch queries, WhatsApp is the quickest way to connect with the CEPI team.
                </p>
                <a href="https://wa.me/923211114880" class="mt-6 inline-flex rounded-2xl bg-slate-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-900">
                    Open WhatsApp
                </a>
            </div>
        </div>
    </div>
</section>
@endsection