@extends('layouts.app')

@section('title', __('site.contact_title').' — '.config('site.brand.name'))

@section('content')

    <section class="bg-brand-green-950 py-16 text-center text-white">
        <div class="mx-auto max-w-3xl px-4" data-reveal>
            <span class="section-eyebrow !bg-white/10 !text-brand-lime-400">{{ __('site.nav_contact') }}</span>
            <h1 class="mt-4 text-3xl font-semibold sm:text-4xl sm:font-bold lg:text-5xl">{{ __('site.contact_title') }}</h1>
            <p class="mt-4 text-brand-green-50/80">{{ __('site.contact_subtitle') }}</p>
        </div>
    </section>

    <section class="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">

            {{-- Form --}}
            <div class="card p-8 lg:col-span-3" data-reveal>
                @if (session('status') === 'sent')
                    <div class="mb-6 rounded-xl bg-brand-green-50 px-4 py-3 text-sm font-semibold text-brand-green-800">
                        {{ __('site.contact_success') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.store', ['locale' => app()->getLocale()]) }}" class="space-y-5">
                    @csrf
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ __('site.contact_form_name') }}</label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                   class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                            @error('name') <p class="mt-1 text-xs text-accent-liver">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ __('site.contact_form_email') }}</label>
                            <input type="email" name="email" value="{{ old('email') }}" required
                                   class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                            @error('email') <p class="mt-1 text-xs text-accent-liver">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ __('site.contact_form_phone') }}</label>
                            <input type="text" name="phone" value="{{ old('phone') }}"
                                   class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                            @error('phone') <p class="mt-1 text-xs text-accent-liver">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ __('site.contact_form_subject') }}</label>
                            <input type="text" name="subject" value="{{ old('subject') }}"
                                   class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-brand-ink">{{ __('site.contact_form_message') }}</label>
                        <textarea name="message" rows="5" required
                                  class="w-full rounded-xl border border-brand-green-100 px-4 py-2.5 text-sm focus:border-brand-green-700 focus:outline-none focus:ring-1 focus:ring-brand-green-700">{{ old('message') }}</textarea>
                        @error('message') <p class="mt-1 text-xs text-accent-liver">{{ $message }}</p> @enderror
                    </div>
                    <button type="submit" class="btn-primary w-full sm:w-auto">
                        {{ __('site.contact_form_submit') }}
                    </button>
                </form>
            </div>

            {{-- Info --}}
            <div class="lg:col-span-2" data-reveal>
                <div class="card p-8">
                    <h2 class="text-lg font-bold text-brand-ink">{{ __('site.contact_info_title') }}</h2>
                    <ul class="mt-5 space-y-4 text-sm text-brand-ink/70">
                        @if (site_settings()->address)
                            <li class="flex gap-3">
                                <span class="text-lg">📍</span>
                                <span><span class="block font-semibold text-brand-ink">{{ __('site.contact_address_label') }}</span>{{ site_settings()->address }}</span>
                            </li>
                        @endif
                        @if (site_settings()->phone)
                            <li class="flex gap-3">
                                <span class="text-lg">📞</span>
                                <span><span class="block font-semibold text-brand-ink">{{ __('site.contact_phone_label') }}</span>
                                    <a href="tel:{{ site_settings()->phone }}" class="hover:text-brand-green-800">{{ site_settings()->phone }}</a>
                                </span>
                            </li>
                        @endif
                        @if (site_settings()->email)
                            <li class="flex gap-3">
                                <span class="text-lg">✉️</span>
                                <span><span class="block font-semibold text-brand-ink">{{ __('site.contact_email_label') }}</span>
                                    <a href="mailto:{{ site_settings()->email }}" class="hover:text-brand-green-800">{{ site_settings()->email }}</a>
                                </span>
                            </li>
                        @endif
                    </ul>
                    @if (site_settings()->whatsappUrl())
                        <a href="{{ site_settings()->whatsappUrl() }}" target="_blank" rel="noopener" class="btn-primary mt-6 w-full justify-center">
                            {{ __('site.btn_whatsapp_us') }}
                        </a>
                    @endif
                </div>

                @if (site_settings()->map_embed_url)
                    <div class="mt-6 overflow-hidden rounded-2xl shadow-card">
                        <iframe src="{{ site_settings()->map_embed_url }}" class="h-64 w-full border-0" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                @endif
            </div>
        </div>
    </section>

@endsection