@extends('layouts.public')

@section('title', 'Contact Us - ' . config('app.name'))
@section('meta_description', 'Contact Shavhani Attorneys. Phone, email, fax, and office hours.')

@push('schema')
<script type="application/ld+json">
{!! json_encode(app(\App\Services\SchemaService::class)->generateLocalBusiness()) !!}
</script>
@endpush

@section('content')
<x-page-hero title="Contact Us" subtitle="Get in touch to discuss your matter, request a consultation, or ask a question." image="images/contact/consultation.jpg" />

<section class="section-spacing bg-firm-surface border-t border-slate-200">
    <div class="firm-container">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            <div class="hidden lg:block sticky top-24">
                <img src="{{ asset('images/contact/consultation.jpg') }}"
                     alt="Consultation with a legal professional"
                     class="w-full min-h-[520px] object-cover border-l-4 border-firm-red-500"
                     loading="lazy">
            </div>

            <div class="space-y-8">
            <div class="firm-card">
                <h2 class="font-serif text-2xl font-bold text-firm-ink mb-4">How to Reach Us</h2>
                <p class="text-slate-700 mb-6">
                    Call or email during office hours (Mon–Fri 08:00–17:00), or send a message using the form.
                    We will respond as soon as we can.
                </p>
                
                <div class="space-y-6">
                @php
                $addressStreet = \App\Models\SiteSetting::get('address_street', '');
                $addressCity = \App\Models\SiteSetting::get('address_city', '');
                $addressProvince = \App\Models\SiteSetting::get('address_province', '');
                $addressPostal = \App\Models\SiteSetting::get('address_postal_code', '');
                @endphp
                @if($addressStreet || $addressCity || $addressProvince || $addressPostal)
                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
                    <h3 class="font-semibold text-slate-900 mb-2">Address</h3>
                    <address class="text-slate-700 not-italic">
                        @if($addressStreet){{ $addressStreet }}<br>@endif
                        @if($addressCity || $addressProvince || $addressPostal)
                        {{ trim(implode(', ', array_filter([$addressCity, $addressProvince, $addressPostal]))) }}
                        @endif
                    </address>
                </div>
                @endif

                @php
                $phonePrimary = \App\Models\SiteSetting::get('phone_primary', '');
                $phoneSecondary = \App\Models\SiteSetting::get('phone_secondary', '');
                @endphp
                @if($phonePrimary || $phoneSecondary)
                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
                    <h3 class="font-semibold text-slate-900 mb-2">Phone</h3>
                    <div class="flex flex-col space-y-2">
                        @if($phonePrimary)
                        <a href="tel:{{ str_replace(' ', '', $phonePrimary) }}" 
                           class="inline-flex items-center text-firm-ink hover:text-firm-red-500 focus:outline-none focus:ring-2 focus:ring-firm-red-500 rounded transition-wordpress">
                            <span class="w-9 h-9 bg-white border border-slate-100 rounded-full mr-3 flex items-center justify-center">
                                <svg class="w-4 h-4 text-firm-ink" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.25 5.75A3 3 0 015.25 2.75h1.5a1 1 0 01.98.804l.6 3a1 1 0 01-.55 1.09l-1.4.7a11.04 11.04 0 005.17 5.17l.7-1.4a1 1 0 011.09-.55l3 .6a1 1 0 01.804.98v1.5a3 3 0 01-3 3h-.5C8.268 21.25 2.75 15.732 2.75 8.75v-.5z" />
                                </svg>
                            </span>
                            {{ $phonePrimary }}
                        </a>
                        @endif
                        @if($phoneSecondary)
                        <a href="tel:{{ str_replace(' ', '', $phoneSecondary) }}" 
                           class="inline-flex items-center text-firm-ink hover:text-firm-red-500 focus:outline-none focus:ring-2 focus:ring-firm-red-500 rounded transition-wordpress">
                            <span class="w-9 h-9 bg-white border border-slate-100 rounded-full mr-3 flex items-center justify-center">
                                <svg class="w-4 h-4 text-firm-ink" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.25 5.75A3 3 0 015.25 2.75h1.5a1 1 0 01.98.804l.6 3a1 1 0 01-.55 1.09l-1.4.7a11.04 11.04 0 005.17 5.17l.7-1.4a1 1 0 011.09-.55l3 .6a1 1 0 01.804.98v1.5a3 3 0 01-3 3h-.5C8.268 21.25 2.75 15.732 2.75 8.75v-.5z" />
                                </svg>
                            </span>
                            {{ $phoneSecondary }}
                        </a>
                        @endif
                    </div>
                </div>
                @endif

                @if(\App\Models\SiteSetting::get('email'))
                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
                    <h3 class="font-semibold text-slate-900 mb-2">Email</h3>
                    <a href="mailto:{{ \App\Models\SiteSetting::get('email') }}" 
                       class="text-firm-ink hover:text-firm-red-500 focus:outline-none focus:ring-2 focus:ring-firm-red-500 rounded break-all">
                        {{ \App\Models\SiteSetting::get('email') }}
                    </a>
                </div>
                @endif

                @if(\App\Models\SiteSetting::get('fax'))
                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
                    <h3 class="font-semibold text-slate-900 mb-2">Fax</h3>
                    <p class="text-slate-700">{{ \App\Models\SiteSetting::get('fax') }}</p>
                </div>
                @endif

                @if(\App\Models\SiteSetting::get('business_hours'))
                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
                    <h3 class="font-semibold text-slate-900 mb-2">Office Hours</h3>
                    <div class="text-slate-700 whitespace-pre-line">{{ \App\Models\SiteSetting::get('business_hours') }}</div>
                </div>
                @endif
            </div>
            </div>

        <!-- Contact Form -->
        <div class="firm-card">
            <h2 class="font-serif text-2xl font-bold text-firm-ink mb-4">Send a Message</h2>
            <p class="text-slate-700 mb-6">
                Tell us briefly about your enquiry. We aim to respond within one business day.
            </p>
            <form action="{{ route('contact.submit') }}" method="POST" class="space-y-5">
                @csrf
                
                <div>
                    <label for="name" class="block text-sm font-semibold text-slate-800 mb-2">
                        Name <span class="text-red-600" aria-label="required">*</span>
                    </label>
                    <input type="text" 
                           id="name" 
                           name="name" 
                           required
                           aria-required="true"
                           class="firm-input"
                           value="{{ old('name') }}">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600" role="alert">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="email" class="block text-sm font-semibold text-slate-800 mb-2">
                        Email <span class="text-red-600" aria-label="required">*</span>
                    </label>
                    <input type="email" 
                           id="email" 
                           name="email" 
                           required
                           aria-required="true"
                           class="firm-input"
                           value="{{ old('email') }}">
                    @error('email')
                        <p class="mt-1 text-sm text-red-600" role="alert">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="phone" class="block text-sm font-semibold text-slate-800 mb-2">Phone</label>
                    <input type="tel" 
                           id="phone" 
                           name="phone"
                           class="firm-input"
                           value="{{ old('phone') }}">
                    @error('phone')
                        <p class="mt-1 text-sm text-red-600" role="alert">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="message" class="block text-sm font-semibold text-slate-800 mb-2">
                        Message <span class="text-red-600" aria-label="required">*</span>
                    </label>
                    <textarea id="message" 
                              name="message" 
                              rows="5" 
                              required
                              aria-required="true"
                              class="firm-input">{{ old('message') }}</textarea>
                    @error('message')
                        <p class="mt-1 text-sm text-red-600" role="alert">{{ $message }}</p>
                    @enderror
                </div>

                <button type="submit" 
                        class="btn-primary w-full justify-center">
                    Send Message
                </button>
            </form>
        </div>
            </div>
        </div>
    </div>
</section>
@endsection