{{--
  Template Name: Kontakt (Elit Gastro)
  Branded contact page.

  Two-column layout:
    - Left: contact info card (phone / email / address / hours), pulled from
      the Customizer (eg_phone, eg_email, eg_address, eg_hours).
    - Right: AJAX contact form. Posts to /wp-admin/admin-ajax.php with
      action=eg_contact_form (handler is registered in app/setup.php).

  Any content the editor adds in the page body renders below the two-column
  block (intro copy, an embedded map, FAQ — whatever they want).
--}}

@extends('layouts.app')

@section('content')
  @php
    $contactNonce = wp_create_nonce('eg_contact');
  @endphp

  <header class="post-hero post-hero--page">
    <div class="post-hero__overlay"></div>
    <div class="container post-hero__inner">
      <div class="post-hero__eyebrow">
        <span>{{ __('Kontakt', 'elit-gastro') }}</span>
      </div>
      <h1 class="post-hero__title">{{ get_the_title() ?: __('Razgovarajmo o vašem projektu.', 'elit-gastro') }}</h1>
      @if (has_excerpt())
        <p class="post-hero__sub">{{ get_the_excerpt() }}</p>
      @else
        <p class="post-hero__sub">
          {{ __('Pošaljite nam upit ili nazovite — odgovaramo brzo i bez obaveza.', 'elit-gastro') }}
        </p>
      @endif
    </div>
  </header>

  <section class="contact-page">
    <div class="container">
      <div class="contact-page__grid">

        {{-- Contact info card --}}
        <aside class="contact-info">
          <h2 class="contact-info__title">{{ __('Naši podaci', 'elit-gastro') }}</h2>

          <ul class="contact-info__list">
            @if ($phoneRaw)
              <li>
                <x-icon.phone width="20" height="20" />
                <div>
                  <span class="contact-info__label">{{ __('Telefon', 'elit-gastro') }}</span>
                  <a href="tel:{{ $phoneRaw }}" class="contact-info__value">{{ $phone }}</a>
                </div>
              </li>
            @endif

            @if ($email)
              <li>
                <x-icon.mail width="20" height="20" />
                <div>
                  <span class="contact-info__label">{{ __('Email', 'elit-gastro') }}</span>
                  <a href="mailto:{{ $email }}" class="contact-info__value">{{ $email }}</a>
                </div>
              </li>
            @endif

            @if (! empty($address))
              <li>
                <x-icon.map-pin width="20" height="20" />
                <div>
                  <span class="contact-info__label">{{ __('Adresa', 'elit-gastro') }}</span>
                  <span class="contact-info__value">{!! nl2br(e($address)) !!}</span>
                </div>
              </li>
            @endif

            @if (! empty($hours))
              <li>
                <x-icon.clock width="20" height="20" />
                <div>
                  <span class="contact-info__label">{{ __('Radno vrijeme', 'elit-gastro') }}</span>
                  <span class="contact-info__value">{{ $hours }}</span>
                </div>
              </li>
            @endif
          </ul>

          @if (! empty($footerAbout))
            <p class="contact-info__about">{!! nl2br(e($footerAbout)) !!}</p>
          @endif
        </aside>

        {{-- Contact form --}}
        <div class="contact-form-wrap">
          <h2 class="contact-form__title">{{ __('Pošaljite upit', 'elit-gastro') }}</h2>
          <p class="contact-form__lead">
            {{ __('Polja označena zvjezdicom su obavezna. Javljamo se u pravilu unutar jednog radnog dana.', 'elit-gastro') }}
          </p>

          <form
            class="contact-form"
            data-contact-form
            action="{{ admin_url('admin-ajax.php') }}"
            method="post"
            novalidate
          >
            <input type="hidden" name="action" value="eg_contact_form" />
            <input type="hidden" name="_nonce" value="{{ $contactNonce }}" />

            {{-- Honeypot — visually hidden, real users won't fill it. --}}
            <div class="contact-form__honeypot" aria-hidden="true">
              <label for="eg-website">{{ __('Website (ne ispunjavajte)', 'elit-gastro') }}</label>
              <input type="text" id="eg-website" name="website" tabindex="-1" autocomplete="off" />
            </div>

            <div class="contact-form__row">
              <div class="contact-form__field">
                <label for="eg-name">{{ __('Ime i prezime', 'elit-gastro') }} <span class="required" aria-hidden="true">*</span></label>
                <input type="text" id="eg-name" name="name" required autocomplete="name" />
              </div>
              <div class="contact-form__field">
                <label for="eg-company">{{ __('Tvrtka', 'elit-gastro') }}</label>
                <input type="text" id="eg-company" name="company" autocomplete="organization" />
              </div>
            </div>

            <div class="contact-form__row">
              <div class="contact-form__field">
                <label for="eg-email">{{ __('Email', 'elit-gastro') }} <span class="required" aria-hidden="true">*</span></label>
                <input type="email" id="eg-email" name="email" required autocomplete="email" />
              </div>
              <div class="contact-form__field">
                <label for="eg-phone">{{ __('Telefon', 'elit-gastro') }}</label>
                <input type="tel" id="eg-phone" name="phone" autocomplete="tel" />
              </div>
            </div>

            <div class="contact-form__field">
              <label for="eg-message">{{ __('Poruka', 'elit-gastro') }} <span class="required" aria-hidden="true">*</span></label>
              <textarea id="eg-message" name="message" rows="6" required></textarea>
            </div>

            <div class="contact-form__field contact-form__field--consent">
              <label class="contact-form__checkbox">
                <input type="checkbox" name="consent" value="1" required />
                <span>{{ __('Slažem se s obradom mojih podataka isključivo u svrhu odgovora na upit.', 'elit-gastro') }}</span>
              </label>
            </div>

            <div class="contact-form__actions">
              <button type="submit" class="btn btn-ink contact-form__submit">
                <span class="contact-form__submit-label">{{ __('Pošalji upit', 'elit-gastro') }}</span>
                <span class="contact-form__submit-spinner" aria-hidden="true"></span>
              </button>
            </div>

            <div class="contact-form__status" role="status" aria-live="polite"></div>
          </form>
        </div>
      </div>

      {{-- Extra page-editor content (intro copy, map embed, FAQ, etc.) --}}
      @while (have_posts()) @php(the_post())
        @php($content = trim((string) get_the_content()))
        @if ($content !== '')
          <div class="contact-page__extra entry-content">
            {!! apply_filters('the_content', $content) !!}
          </div>
        @endif
      @endwhile
    </div>
  </section>
@endsection