@extends('layouts.app')

@section('title', 'Reporter Login — Mzaar Ski Resort')
@section('description', 'Login to report slope conditions at Mzaar.')

@section('content')
<section class="container-x py-24 flex items-center justify-center min-h-[60vh]">
    <div class="w-full max-w-sm">
        <div class="rounded-2xl border border-border bg-card p-8 shadow-sm">
            <div class="mb-6 text-center">
                <span class="text-xs font-semibold uppercase tracking-[0.25em] text-muted-foreground">Staff &amp; Patrol</span>
                <h1 class="mt-2 text-2xl font-display">Reporter login</h1>
                <p class="mt-1 text-sm text-muted-foreground">Sign in to report slope conditions.</p>
            </div>

            @if(session('error'))
            <div class="mb-4 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
                {{ session('error') }}
            </div>
            @endif

            <form method="POST" action="{{ route('reporter.login.post') }}" class="space-y-4">
                @csrf

                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Email</span>
                    <input
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autocomplete="email"
                        placeholder="you@mzaar.com"
                        class="rounded-lg border border-border bg-background px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition"
                    />
                </label>

                <label class="flex flex-col gap-1.5 text-sm">
                    <span class="font-medium">Password</span>
                    <input
                        type="password"
                        name="password"
                        required
                        autocomplete="current-password"
                        placeholder="••••••••"
                        class="rounded-lg border border-border bg-background px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary/20 transition"
                    />
                </label>

                <button
                    type="submit"
                    class="w-full rounded-full bg-primary py-3 text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5 mt-2">
                    Sign in
                </button>
            </form>

            <p class="mt-6 text-center text-xs text-muted-foreground">
                <a href="{{ route('slopes.index') }}" class="underline underline-offset-2 hover:text-foreground">View public slopes board</a>
            </p>
        </div>
    </div>
</section>
@endsection