@extends('frontend.layouts.app')

@section('title', t('frontend.home.title'))

@section('content')
<div class="max-w-4xl mx-auto px-4 py-16 text-center">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">{{ t('frontend.home.hero_title') }}</h1>
    <p class="text-lg text-gray-600 mb-8">{{ t('frontend.home.hero_subtitle') }}</p>

    <a href="{{ route('frontend.designer.index') }}"
       class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition-colors">
        {{ t('frontend.home.cta_button') }}
    </a>

    {{-- Order Lookup Section --}}
    <div class="mt-16 max-w-md mx-auto">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">{{ t('frontend.home.order_lookup_title') }}</h2>
        <form method="POST" action="{{ route('frontend.order.lookup') }}" class="flex gap-3">
            @csrf
            <input type="text" name="phone"
                   class="flex-1 border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
                   placeholder="{{ t('frontend.order.phone_placeholder') }}" required>
            <button type="submit" class="bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-800">
                {{ t('frontend.order.search') }}
            </button>
        </form>
    </div>
</div>
@endsection