@extends('layout.front.master')

@section('title', __('Contact'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('content')

{{-- Page Header with Parallax --}}
<section class="section section-with-shape-divider section-height-3 overlay overlay-show border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}" data-image-src="{{ site_asset_url('contact_header_background') ?: site_asset_url('page_header_background', 'cd-project/img/demos/restaurant/backgrounds/background-3.jpg') }}">
    <div class="container pt-3 pb-5 mb-5">
        <div class="row mb-3">
            <div class="col">
                <ul class="breadcrumb d-block text-center custom-font-secondary text-6 font-weight-medium positive-ls-3">
                    <li><a href="{{ url('/') }}" class="text-decoration-none opacity-hover-8">Home</a></li>
                    <li class="active text-color-primary">Contact</li>
                </ul>
                <h1 class="d-block text-color-light font-weight-bold text-center text-12 positive-ls-1 line-height-2 mb-0">{{ config('site.contact.page_title', 'Contact') }}</h1>
            </div>
        </div>
    </div>
    <a href="#contact" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
        <i class="icons icon-arrow-down font-weight-bold"></i>
    </a>
    <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
            <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
            <rect y="90" fill="#FFF" width="1920" height="26"/>
        </svg>
    </div>
</section>

{{-- Title Section --}}
<div id="contact" class="container pt-5 pb-4 mt-2 mb-3">
    <div class="row">
        <div class="col">
            <h2 class="text-color-dark text-transform-none text-9 line-height-3 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">{{ config('site.contact.page_heading', config('site.contact.page_title', 'A Great Place to Eat!')) }}</h2>
            <p class="text-3-5 pb-3 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ config('site.contact.page_subtitle', '') }}</p>
        </div>
    </div>
</div>

{{-- Google Maps iframe (mismo patrón que el footer — sin API key) --}}
@php
    $mapAddress    = config('site.contact.address', '643 NW 20th St, Miami, FL 33127');
    $mapEmbedUrl   = 'https://www.google.com/maps?q=' . urlencode($mapAddress) . '&output=embed&zoom=15';
@endphp
<div class="position-relative appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="900">
    <iframe
        src="{{ $mapEmbedUrl }}"
        width="100%"
        height="500"
        style="border:0; display:block;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

{{-- Contact Information Section --}}
<div class="container py-5 my-5">
    <div class="row row-gutter-sm align-items-lg-center">
        <div class="col-12 col-lg-4">
            @php
                $fullAddress = trim(
                    (config('site.contact.address.line1') ?? '') . 
                    (config('site.contact.address.city') ? ', ' . config('site.contact.address.city') : '') .
                    (config('site.contact.address.state') ? ', ' . config('site.contact.address.state') : '') .
                    (config('site.contact.address.zip') ? ' ' . config('site.contact.address.zip') : '')
                );
                if (empty($fullAddress)) {
                    $fullAddress = config('site.contact.address', '643 NW 20th St, Miami, FL 33127');
                }
            @endphp
            <h2 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-5-5 mb-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="250">{{ $fullAddress }}</h2>
            <div class="pb-2 mb-4">
                <a href="{{ url()->current() }}#get-direction" data-hash data-hash-offset="0" data-hash-offset-lg="110" class="d-inline-block text-decoration-underline-2 font-weight-bold border-color-primary text-decoration-none text-3-5 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="450">GET DIRECTIONS</a>
            </div>
            <ul class="list list-unstyled">
                @if(config('site.contact.phone'))
                <li class="d-flex appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="650">
                    <img width="27" height="27" src="{{ asset('cd-project/img/demos/restaurant/icons/phone.svg') }}" alt="Phone Icon" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark position-relative bottom-2'}" />
                    <a href="tel:{{ config('site.contact.phone') }}" class="text-decoration-none text-color-dark text-color-hover-primary font-weight-bold line-height-7 text-3-5 ms-2">{{ config('site.contact.phone') }}</a>
                </li>
                @endif
                @if(config('site.contact.email'))
                <li class="d-flex my-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="850">
                    <img width="27" height="27" src="{{ asset('cd-project/img/demos/restaurant/icons/email.svg') }}" alt="Email Icon" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark'}" />
                    <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none text-color-dark text-color-hover-primary font-weight-bold line-height-7 text-3-5 ms-2">{{ config('site.contact.email') }}</a>
                </li>
                @endif
            </ul>
            <p class="mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1050">{{ config('site.contact.card_subtitle', '') }}</p>
        </div>
        @php
            // Defensive: Elvis operator para que strings vacíos persistidos en DB
            // caigan al default (config() solo aplica fallback si la key no existe).
            $contactImg1 = config('site.contact.image_1') ?: 'cd-project/img/demos/restaurant/generic/generic-1-big-plus.jpg';
            $contactImg2 = config('site.contact.image_2') ?: 'cd-project/img/demos/restaurant/generic/generic-2-small.jpg';
            $contactImg3 = config('site.contact.image_3') ?: 'cd-project/img/demos/restaurant/generic/generic-3-small.jpg';
        @endphp
        <div class="col-7 col-lg-4 ms-auto">
            <img src="{{ filter_var($contactImg1, FILTER_VALIDATE_URL) ? $contactImg1 : asset($contactImg1) }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant inside showcase 1" />
        </div>
        <div class="col-5 col-lg-3 ps-xs-1">
            <img src="{{ filter_var($contactImg2, FILTER_VALIDATE_URL) ? $contactImg2 : asset($contactImg2) }}" class="img-fluid box-shadow-4 rounded-0 mb-3 mb-sm-4" alt="Restaurant inside showcase 2" />
            <img src="{{ filter_var($contactImg3, FILTER_VALIDATE_URL) ? $contactImg3 : asset($contactImg3) }}" class="img-fluid box-shadow-4 rounded-0" alt="Restaurant inside showcase 3" />
        </div>
    </div>
</div>

{{-- Final Section with Shape Divider --}}
<section class="section section-with-shape-divider bg-dark border-0 m-0">
    <a href="#header" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary position-absolute transform3dx-n50 left-50pct bottom-0 text-5 mb-5 z-index-2">
        <i class="icons icon-arrow-up font-weight-bold"></i>
    </a>
    <div class="shape-divider shape-divider-reverse-x" style="height: 116px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
            <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
            <rect y="90" fill="#FFF" width="1920" height="26"/>
        </svg>
    </div>
</section>

@endsection