@extends('layouts.app')

@section('content')
<div class="max-w-xl mx-auto">
    <h1 class="text-3xl font-bold text-indigo-700 mb-4">Contact</h1>
    <div class="bg-white rounded-xl shadow p-6">
        @if (session('success'))
            <div class="mb-4 rounded-md bg-green-50 border border-green-200 text-green-800 p-3">
                {{ session('success') }}
            </div>
        @endif

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

            <div>
                <label class="block text-sm font-medium text-gray-700" for="name">Your name</label>
                <input id="name" name="name" type="text" value="{{ old('name') }}" required class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 @error('name') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror">
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700" for="email">Your email</label>
                <input id="email" name="email" type="email" value="{{ old('email') }}" required class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 @error('email') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror">
                @error('email')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700" for="message">Message</label>
                <textarea id="message" name="message" rows="6" required class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 @error('message') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror">{{ old('message') }}</textarea>
                @error('message')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md">Send</button>
            </div>
        </form>

        <div class="mt-6 p-4 bg-indigo-50 border border-indigo-100 rounded-lg">
            <p class="text-sm text-indigo-900">
                Books featured on this site are sourced from <a href="https://www.gutenberg.org/" class="text-indigo-700 underline" target="_blank" rel="noopener">Project Gutenberg</a> and are part of the public domain. Summaries are generated using AI and may contain inaccuracies.
            </p>
        </div>
    </div>
</div>
@endsection