@extends('layouts.public')
@section('title', 'Contact Us - ' . config('app.name'))
@section('meta_description', 'Book a free consultation with GPS Migration experts.')

@push('styles')
<style>
    .contact-hero {
        background: var(--page-head-gradient);
        color: #fff;
    }
    .contact-wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 16px;
    }
    .contact-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 28px;
        align-items: start;
    }
    .contact-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
        padding: 28px;
    }
    .contact-side {
        background: var(--page-head-gradient);
        border: 1px solid color-mix(in srgb, var(--brand-primary) 65%, #ffffff);
        border-radius: 24px;
        color: #fff;
        box-shadow: 0 20px 50px color-mix(in srgb, var(--brand-primary) 28%, transparent);
        padding: 28px;
    }
    .contact-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .contact-input {
        width: 100%;
        padding: 13px 14px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        font-size: 14px;
        color: #0f172a;
        background: #fff;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .contact-input:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
    }
    .contact-submit {
        width: 100%;
        background: var(--brand-primary);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 13px 14px;
        font-weight: 700;
        transition: background-color 0.2s ease;
    }
    .contact-submit:hover { background: color-mix(in srgb, var(--brand-primary) 84%, #000000); }
    .contact-metric-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .contact-side-box {
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 14px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.08);
    }
    .contact-faq-wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 16px;
    }
    .contact-faq-grid {
        display: grid;
        gap: 10px;
    }
    .contact-faq-item {
        background: #fff;
        border: 1px solid #dbe4f0;
        border-radius: 14px;
        padding: 14px 16px;
    }
    .contact-faq-item summary {
        cursor: pointer;
        font-weight: 700;
        color: #0f172a;
    }
    .contact-faq-item p {
        margin: 10px 0 0;
        color: #475569;
        line-height: 1.6;
    }
    .contact-apply-card {
        background: linear-gradient(128deg, #ef2330, #8f1020);
        border-radius: 22px;
        padding: 28px;
        color: #fff;
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        align-items: center;
        gap: 16px;
        box-shadow: 0 20px 44px rgba(190, 24, 47, 0.28);
    }
    .contact-apply-btn {
        border: 0;
        border-radius: 999px;
        background: #0b0b0b;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 11px 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .contact-apply-visual {
        width: 140px;
        height: 140px;
        border-radius: 18px;
        margin-left: auto;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.18);
    }
    @media (max-width: 1024px) {
        .contact-grid {
            grid-template-columns: 1fr;
        }
        .contact-apply-card {
            grid-template-columns: 1fr;
        }
        .contact-apply-visual {
            margin-left: 0;
        }
    }
    @media (max-width: 768px) {
        .contact-card, .contact-side { padding: 20px; border-radius: 18px; }
        .contact-form-grid { grid-template-columns: 1fr; }
        .contact-apply-card {
            padding: 22px;
            border-radius: 16px;
        }
    }
</style>
@endpush

@section('content')
<section class="contact-hero">
    <div class="contact-wrap" style="padding-top: 72px; padding-bottom: 92px;">
        <span style="display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.08);">
            Free Consultation
        </span>
        <h1 style="margin-top:16px;max-width:860px;font-size:clamp(34px,5.2vw,64px);line-height:1.02;font-weight:900;">
            Contact Our Expert Team For Your Study Abroad Plan
        </h1>
        <p style="margin-top:14px;max-width:680px;color:color-mix(in srgb, #ffffff 85%, var(--brand-primary));font-size:18px;line-height:1.65;">
            Fill in your details and our counselors will guide you with country selection, intake planning, and next admission steps.
        </p>
    </div>
</section>

<section style="background:#f8fafc;padding:30px 0 70px;">
    <div class="contact-wrap">
        <div class="contact-grid">
            <div class="contact-card">
                <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:18px;">
                    <h2 style="font-size:clamp(28px,2.9vw,40px);line-height:1.05;font-weight:900;color:#0f172a;margin:0;">Book Your Free Session</h2>
                    <span style="font-size:12px;font-weight:700;color:var(--brand-primary);background:color-mix(in srgb, var(--brand-primary) 18%, #ffffff);padding:6px 12px;border-radius:999px;white-space:nowrap;">Fast Response</span>
                </div>

                @if(session('success'))
                    <div style="margin-bottom:14px;background:#f0fdf4;border:1px solid #86efac;color:#15803d;padding:10px 12px;border-radius:10px;font-size:14px;">
                        {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div style="margin-bottom:14px;background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;padding:10px 12px;border-radius:10px;font-size:14px;">
                        Please correct the highlighted fields and submit again.
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.send') }}" style="display:grid;gap:12px;">
                    @csrf

                    <div class="contact-form-grid">
                        <div>
                            <input type="text" name="name" value="{{ old('name') }}" required class="contact-input @error('name') !border-red-400 @enderror" placeholder="Full name *" />
                            @error('name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <input type="email" name="email" value="{{ old('email') }}" required class="contact-input @error('email') !border-red-400 @enderror" placeholder="Email *" />
                            @error('email')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <input type="tel" name="phone" value="{{ old('phone') }}" required data-phone-input autocomplete="tel" class="contact-input @error('phone') !border-red-400 @enderror" placeholder="Mobile no. *" />
                        @error('phone')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div class="contact-form-grid">
                        <div>
                            <select name="country_id" required class="contact-input @error('country_id') !border-red-400 @enderror">
                                <option value="">Select first country *</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}" {{ (string) old('country_id') === (string) $country->id ? 'selected' : '' }}>
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('country_id')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <select name="second_country_id" class="contact-input @error('second_country_id') !border-red-400 @enderror">
                                <option value="">Select second country (optional)</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}" {{ (string) old('second_country_id') === (string) $country->id ? 'selected' : '' }}>
                                        {{ $country->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('second_country_id')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="contact-form-grid">
                        <div>
                            <select name="study_level" required class="contact-input @error('study_level') !border-red-400 @enderror">
                                <option value="">Select study level *</option>
                                @foreach([
                                    'hsc' => 'HSC',
                                    'a_levels' => 'A Levels',
                                    'diploma' => 'Diploma',
                                    'bachelor' => 'Bachelor',
                                    'masters' => 'Masters',
                                    'postgraduate' => 'Postgraduate',
                                    'phd' => 'PhD',
                                ] as $value => $label)
                                    <option value="{{ $value }}" {{ old('study_level') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('study_level')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <select name="consultation_mode" required class="contact-input @error('consultation_mode') !border-red-400 @enderror">
                                <option value="">Consultation mode *</option>
                                @foreach([
                                    'in_person' => 'In Person',
                                    'phone_call' => 'Phone Call',
                                    'video_call' => 'Video Call',
                                    'whatsapp' => 'WhatsApp',
                                ] as $value => $label)
                                    <option value="{{ $value }}" {{ old('consultation_mode') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('consultation_mode')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <textarea name="message" rows="4" class="contact-input @error('message') !border-red-400 @enderror" placeholder="Write your note (optional)">{{ old('message') }}</textarea>
                        @error('message')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                    </div>

                    <button type="submit" class="contact-submit">Submit Consultation Request</button>
                </form>
            </div>

            <aside class="contact-side">
                <h3 style="font-size:34px;line-height:1.05;font-weight:900;margin:0 0 10px;">Need Instant Guidance?</h3>
                <p style="color:#dbeafe;line-height:1.6;margin:0 0 14px;">
                    Our team can help you shortlist the best country, intake, and action plan.
                </p>

                <div class="contact-metric-grid" style="margin-bottom:12px;">
                    <div class="contact-side-box">
                        <p style="font-size:11px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.05em;margin:0;">Support</p>
                        <p style="font-size:30px;font-weight:900;line-height:1;margin:6px 0 0;">24/7</p>
                    </div>
                    <div class="contact-side-box">
                        <p style="font-size:11px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.05em;margin:0;">Reply Time</p>
                        <p style="font-size:30px;font-weight:900;line-height:1;margin:6px 0 0;">&lt; 24h</p>
                    </div>
                </div>

                <div style="display:grid;gap:10px;">
                    <div class="contact-side-box">
                        <p style="font-size:11px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.05em;margin:0;">Phone</p>
                        <p style="font-size:24px;font-weight:800;line-height:1.1;margin:6px 0 0;">+880 1XXX-XXXXXX</p>
                    </div>
                    <div class="contact-side-box">
                        <p style="font-size:11px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.05em;margin:0;">Email</p>
                        <p style="font-size:24px;font-weight:800;line-height:1.1;margin:6px 0 0;">info@gpsmigration.com</p>
                    </div>
                    <div class="contact-side-box">
                        <p style="font-size:11px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.05em;margin:0;">Office</p>
                        <p style="font-size:24px;font-weight:800;line-height:1.1;margin:6px 0 0;">Dhaka, Bangladesh</p>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</section>

<section style="background:#f8fafc;padding:0 0 42px;">
    <div class="contact-faq-wrap">
        <div style="margin-bottom:16px;">
            <h2 style="font-size:clamp(28px,3vw,42px);line-height:1.05;font-weight:900;color:#0f172a;margin:0;">
                Frequently Asked <span style="color:var(--brand-primary);">Questions</span>
            </h2>
            <p style="margin-top:8px;color:#64748b;max-width:740px;">
                Quick answers before you book your consultation.
            </p>
        </div>

        <div class="contact-faq-grid">
            @forelse(($faqs ?? collect()) as $faq)
                <details class="contact-faq-item">
                    <summary>{{ $faq->question }}</summary>
                    <p>{{ $faq->answer }}</p>
                </details>
            @empty
                <details class="contact-faq-item">
                    <summary>How soon will your team contact me?</summary>
                    <p>Usually within 24 hours after submitting the consultation form.</p>
                </details>
                <details class="contact-faq-item">
                    <summary>Can I choose more than one country?</summary>
                    <p>Yes, you can share first and second preferred destination in the form.</p>
                </details>
            @endforelse
        </div>
    </div>
</section>

<section style="background:#f8fafc;padding:0 0 58px;">
    <div class="contact-faq-wrap">
        <div class="contact-apply-card">
            <div>
                <h3 style="font-size:clamp(32px,3.3vw,52px);line-height:1.05;font-weight:900;margin:0 0 10px;">
                    Ready to apply now?
                </h3>
                <p style="margin:0 0 16px;color:rgba(255,255,255,.92);font-size:17px;line-height:1.65;max-width:650px;">
                    Share your profile with us and our counselors will guide your country selection, documentation, and admission timeline step by step.
                </p>
                <button type="button" onclick="ApplyModal.open()" class="contact-apply-btn">Book A Free Consultation</button>
            </div>
            <img class="contact-apply-visual" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=500&q=80" alt="Consultation support">
        </div>
    </div>
</section>
@endsection