@extends('layouts.guest')

@section('content')

<div style="max-width: 540px; margin: 0 auto;">
    <a href="{{ route('landing') }}" style="display: flex; align-items: center; gap: 8px; margin-bottom: 24px; text-decoration: none; color: var(--text-primary);">
        <div style="width: 32px; height: 32px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px;">V</div>
        <span style="font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px;">Vidya</span>
    </a>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 40px;">
        @if (session('success'))
            <div style="text-align: center; padding: 32px 0;">
                <h2 style="font-family: 'Fraunces', serif; font-size: 28px;">Thank you.</h2>
                <p style="margin-top: 12px; color: var(--text-muted);">We'll be in touch shortly. Your inquiry is on the admissions desk.</p>
                <a href="{{ route('landing') }}" class="btn btn-outline" style="margin-top: 24px; display: inline-block;">Back home</a>
            </div>
        @else
            <h1 style="font-family: 'Fraunces', serif; font-size: 28px;">Admission inquiry</h1>
            <p style="color: var(--text-muted); margin-top: 8px; font-size: 14px;">Tell us a little — we'll reach out within one working day.</p>

            <form method="POST" action="{{ route('inquire.submit') }}" style="margin-top: 24px; display: flex; flex-direction: column; gap: 16px;">
                @csrf

                <div>
                    <label class="form-label">Full name *</label>
                    <input type="text" name="full_name" required class="form-input" value="{{ old('full_name') }}">
                    @error('full_name') <p style="font-size: 12px; color: var(--danger); margin-top: 4px;">{{ $message }}</p> @enderror
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div>
                        <label class="form-label">Phone *</label>
                        <input type="text" name="phone" required class="form-input" value="{{ old('phone') }}">
                        @error('phone') <p style="font-size: 12px; color: var(--danger); margin-top: 4px;">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-input" value="{{ old('email') }}">
                    </div>
                </div>

                <div>
                    <label class="form-label">Course of interest</label>
                    <input type="text" name="course_interest" class="form-input" value="{{ old('course_interest') }}" placeholder="e.g. JEE 2027, Class XI Physics">
                </div>

                <div>
                    <label class="form-label">Anything we should know?</label>
                    <textarea name="follow_up_notes" class="form-input" rows="3" style="resize: vertical;">{{ old('follow_up_notes') }}</textarea>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 12px;">
                    Submit inquiry
                </button>
            </form>
        @endif
    </div>
</div>

<style>
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.btn-primary { background: var(--primary); color: white; justify-content: center; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
.btn-outline:hover { background: #F5F3F1; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
.form-input:focus { border-color: var(--primary-light); }
</style>

@endsection