@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
<div class="max-w-lg mx-auto py-16">
    <h1 class="text-3xl font-bold mb-6 text-center">Contact Us</h1>
    <p class="mb-8 text-center text-gray-500 dark:text-gray-400">Have a question or want to get in touch? Fill out the form below and we'll get back to you as soon as possible.</p>
    <form class="space-y-6 bg-white dark:bg-gray-900 p-8 rounded-lg shadow-md">
        <div>
            <label class="block text-sm font-medium mb-1" for="contact-name">Name</label>
            <input type="text" id="contact-name" name="name" class="w-full rounded-md border-gray-300 dark:bg-gray-800 dark:border-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div>
            <label class="block text-sm font-medium mb-1" for="contact-email">Email</label>
            <input type="email" id="contact-email" name="email" class="w-full rounded-md border-gray-300 dark:bg-gray-800 dark:border-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div>
            <label class="block text-sm font-medium mb-1" for="contact-message">Message</label>
            <textarea id="contact-message" name="message" rows="4" class="w-full rounded-md border-gray-300 dark:bg-gray-800 dark:border-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
        </div>
        <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Send Message</button>
    </form>
</div>
@endsection