@extends('layouts.app')

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

@section('content')
<section class="page-hero page-hero--contact">
    <div class="container">
        <nav class="contact-breadcrumb" aria-label="Breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <span aria-current="page">Contact Us</span>
        </nav>
        <span class="section-label">Contact</span>
        <h1>Contact Us</h1>
    </div>
</section>

<section class="section contact-section">
    <div class="container contact-layout">
        <div class="contact-form-panel reveal">
            <div class="contact-panel-head">
                <div class="contact-chip"><strong>{{ count($offices) }}</strong><span>Offices</span></div>
                <div class="contact-chip"><strong>{{ count($timings['items']) }}</strong><span>Timing Notes</span></div>
            </div>
            <div class="contact-form-card">
                <h2>{{ $form['heading'] }}</h2>
                <p class="contact-form-intro">{{ $form['intro'] }}</p>
                <div id="contactFormContainer">
                    @include('partials.contact-form')
                </div>
                <div id="contactFormMessage" class="form-message" role="alert" aria-live="polite"></div>
            </div>
        </div>

        <aside class="contact-sidebar reveal" data-delay="100">
            @foreach($offices as $office)
            <div class="contact-office-card">
                <div class="contact-office-head">
                    <div class="contact-office-icon" aria-hidden="true">
                        <i class="fas {{ $office['icon'] }}"></i>
                    </div>
                    <h3>{{ $office['title'] }}</h3>
                </div>
                <address>
                    @foreach($office['lines'] as $line)
                    <span>{{ $line }}</span>
                    @endforeach
                </address>
                @if(!empty($office['phone']))
                <p class="contact-office-meta">
                    <i class="fas fa-phone" aria-hidden="true"></i>
                    <a href="tel:{{ preg_replace('/\s+/', '', $office['phone']) }}">{{ $office['phone'] }}</a>
                </p>
                @endif
                @if(!empty($office['email']))
                <p class="contact-office-meta">
                    <i class="fas fa-envelope" aria-hidden="true"></i>
                    <a href="mailto:{{ $office['email'] }}">{{ $office['email'] }}</a>
                </p>
                @endif
            </div>
            @endforeach

            <div class="contact-office-card contact-timings-card">
                <div class="contact-office-icon" aria-hidden="true">
                    <i class="fas fa-clock"></i>
                </div>
                <h3>{{ $timings['heading'] }}</h3>
                <ul class="contact-timings-list">
                    @foreach($timings['items'] as $item)
                    <li>{{ $item }}</li>
                    @endforeach
                </ul>
            </div>
        </aside>
    </div>

    @if(!empty($map))
    <div class="container contact-map-block reveal">
        <div class="contact-map-header">
            <h2>{{ $map['heading'] }}</h2>
            @if(!empty($map['place']))
            <p class="contact-map-place"><i class="fas fa-location-dot" aria-hidden="true"></i> {{ $map['place'] }}</p>
            @endif
            <a href="https://www.google.com/maps/dir/?api=1&destination={{ urlencode($map['query']) }}" class="btn btn-outline btn-sm contact-map-directions" target="_blank" rel="noopener noreferrer">
                <i class="fas fa-diamond-turn-right" aria-hidden="true"></i> Get directions
            </a>
        </div>
        <div class="contact-map-wrap">
            <iframe
                title="Map — {{ $map['place'] ?? 'Golden Era office' }}"
                src="https://maps.google.com/maps?q={{ urlencode($map['query']) }}&amp;hl=en&amp;z=16&amp;output=embed"
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                allowfullscreen>
            </iframe>
        </div>
    </div>
    @endif
</section>
@endsection