@php $locale = app()->getLocale(); @endphp
@extends('layouts.app')

@section('title', 'Çisa Salotti — '.__('site.contact.title'))

@section('content')
<main>
  <section class="page-hero">
    <img class="page-hero__image" src="{{ asset('images/collections/amsterdam/hero.jpg') }}" alt="" loading="eager">
    <div class="page-hero__overlay"></div>
    <div class="page-hero__content container">
      <p class="section-label">{{ __('site.contact.label') }}</p>
      <h1 class="display-lg">{{ __('site.contact.title') }}</h1>
    </div>
  </section>

  <section class="section contact-page">
    <div class="container contact-page__inner reveal">
      <div class="contact-page__info">
        <div class="contact-page__intro">
          <p class="section-label">{{ __('site.contact.label') }}</p>
          <h2 class="display-md contact-page__title">{{ __('site.contact.title') }}</h2>
        </div>
        <div class="contact-grid">
          @if($settings->phone)
            <div class="contact-block">
              <p class="section-label contact-block__label">{{ __('site.contact.phone') }}</p>
              <p class="contact-block__value"><a href="tel:{{ preg_replace('/\s+/', '', $settings->phone) }}">{{ $settings->phone }}</a></p>
            </div>
          @endif
          @if($settings->email)
            <div class="contact-block">
              <p class="section-label contact-block__label">{{ __('site.contact.email') }}</p>
              <p class="contact-block__value"><a href="mailto:{{ $settings->email }}">{{ $settings->email }}</a></p>
            </div>
          @endif
          <div class="contact-block">
            <p class="section-label contact-block__label">{{ __('site.contact.address') }}</p>
            <p class="contact-block__value">{{ $settings->getTranslation('address', $locale) }}</p>
          </div>
        </div>
      </div>

      <div class="contact-page__form-wrap">
        <h2 class="contact-page__form-title">{{ __('site.contact.formTitle') }}</h2>
        <p class="contact-page__form-desc">{{ __('site.contact.formDesc') }}</p>
        <form
          class="contact-form"
          id="contactForm"
          action="{{ route('contact.store', $locale) }}"
          method="POST"
          novalidate
          data-rate-limit-message="{{ __('site.contact.formRateLimit') }}"
        >
          @csrf
          <div class="contact-form__field">
            <label class="contact-form__label" for="contactName">{{ __('site.quote.name') }}</label>
            <input class="contact-form__input" type="text" id="contactName" name="name" required>
          </div>
          <div class="contact-form__field">
            <label class="contact-form__label" for="contactEmail">{{ __('site.quote.email') }}</label>
            <input class="contact-form__input" type="email" id="contactEmail" name="email" required>
          </div>
          <div class="contact-form__field">
            <label class="contact-form__label" for="contactPhone">{{ __('site.quote.phone') }}</label>
            <input class="contact-form__input" type="tel" id="contactPhone" name="phone">
          </div>
          <div class="contact-form__field">
            <label class="contact-form__label" for="contactMessage">{{ __('site.quote.message') }}</label>
            <textarea class="contact-form__textarea" id="contactMessage" name="message" rows="5" required></textarea>
          </div>
          <button class="btn-primary contact-form__submit" type="submit" id="contactSubmit">
            <span class="contact-form__submit-label">{{ __('site.contact.formSubmit') }}</span>
            <span class="contact-form__submit-loading" hidden>
              <span class="contact-form__spinner" aria-hidden="true"></span>
              {{ __('site.contact.formSending') }}
            </span>
          </button>
        </form>
      </div>
    </div>
  </section>
</main>

<div class="contact-status-modal" id="contactStatusModal" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="contactStatusTitle">
  <div class="contact-status-modal__backdrop" data-contact-status-close></div>
  <div class="contact-status-modal__panel">
    <div class="contact-status-modal__state contact-status-modal__state--loading" data-contact-state="loading" hidden>
      <span class="contact-status-modal__spinner" aria-hidden="true"></span>
      <h2 class="contact-status-modal__title" id="contactStatusTitleLoading">{{ __('site.contact.formSending') }}</h2>
      <p class="contact-status-modal__text">{{ __('site.contact.formSendingHint') }}</p>
    </div>
    <div class="contact-status-modal__state contact-status-modal__state--success" data-contact-state="success" hidden>
      <span class="contact-status-modal__icon contact-status-modal__icon--success" aria-hidden="true">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <h2 class="contact-status-modal__title" id="contactStatusTitle">{{ __('site.contact.formSuccessTitle') }}</h2>
      <p class="contact-status-modal__text" id="contactStatusMessage">{{ __('site.contact.formSuccess') }}</p>
      <button type="button" class="btn-primary contact-status-modal__btn" data-contact-status-close>{{ __('site.contact.formClose') }}</button>
    </div>
    <div class="contact-status-modal__state contact-status-modal__state--error" data-contact-state="error" hidden>
      <span class="contact-status-modal__icon contact-status-modal__icon--error" aria-hidden="true">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 8v5M12 16h.01M12 3a9 9 0 100 18 9 9 0 000-18z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      </span>
      <h2 class="contact-status-modal__title">{{ __('site.contact.formErrorTitle') }}</h2>
      <p class="contact-status-modal__text" id="contactStatusError">{{ __('site.contact.formError') }}</p>
      <button type="button" class="btn-primary contact-status-modal__btn" data-contact-status-close>{{ __('site.contact.formClose') }}</button>
    </div>
  </div>
</div>
@endsection