@extends('frontend.layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4">
    <div class="max-w-3xl mx-auto">
        <h1 class="text-4xl font-bold text-gray-900 mb-8 text-center">Contact Us</h1>

        <div class="bg-white shadow rounded-lg p-6 mb-8">
            <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" name="name" id="name" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="email" id="email" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
                    <input type="text" name="subject" id="subject" required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
                    <textarea name="message" id="message" rows="4" required
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                </div>

                <div>
                    <button type="submit"
                            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Send Message
                    </button>
                </div>
            </form>
        </div>

        <div class="grid md:grid-cols-2 gap-8 mt-12">
            <div class="text-center">
                <h2 class="text-lg font-medium text-gray-900 mb-4">Office Address</h2>
                <p class="text-gray-600">
                    123 Shipping Street<br>
                    Logistics City, LC 12345<br>
                    Country
                </p>
            </div>
            <div class="text-center">
                <h2 class="text-lg font-medium text-gray-900 mb-4">Contact Information</h2>
                <p class="text-gray-600">
                    Email: info@yourcompany.com<br>
                    Phone: +1 (123) 456-7890<br>
                    Hours: Mon-Fri 9AM-6PM
                </p>
            </div>
        </div>
    </div>
</div>
@endsection