@extends('layouts.app')

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

@section('content')
<main class="page-wrapper">

  <script src="https://www.google.com/recaptcha/api.js"></script>
  <!-- Links + Contact form -->
  <section class="position-relative bg-secondary pt-5">

    <div class="container position-relative zindex-2 pt-5 mt-5">
      <div class="row">
        <!-- Contact links -->
        <div class="col-xl-4 col-lg-5 pb-4 pb-sm-5 mb-2 mb-sm-0">
          <div class="pe-lg-4 pe-xl-0">
            <h1 class="pb-3 pb-md-4 mb-lg-5">{{ __('Contactez-nous & vivez une expérience unique') }}</h1>
            <div class="mb-sm-1 mb-md-3">

              <p class="mb-2">{{ __('Que vous soyez passionné de grands vins, à la recherche d’un lieu unique pour votre événement ou simplement curieux d’en savoir plus sur la copropriété, nous sommes là pour répondre à toutes vos envies.') }}</p>

              <p class="mb-2">{{ __('Contactez-nous et laissez-nous vous guider dans une expérience unique. Complétez le formulaire ci-dessous ou appelez-nous directement : notre équipe se fera un plaisir de vous répondre rapidement. À très bientôt au cœur du vignoble !') }}</p>
            </div>
            <div class="d-flex align-items-start pb-3 mb-sm-1 mb-md-3">
              <div class="bg-light text-primary rounded-circle flex-shrink-0 fs-3 lh-1 p-3">
                <i class="ai ai-envelope"></i>
              </div>

            </div>
            <img class="d-block rounded-5 mx-auto" src="{{asset('assets/image/contact/contact.jpg')}}" alt="Image">
          </div>

        </div>

        <!-- Contact form -->
        <div class="col-xl-6 col-lg-7 offset-xl-2">
          <div class="card border-light shadow-lg py-3 p-sm-4 p-md-5">
            <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 rounded-3 d-none d-dark-mode-block"></div>
            <div class="card-body position-relative zindex-2">
              <h2 class="card-title pb-3 mb-4">{{ __('Partagez vos envies, nous faisons le reste !') }}</h2>
              <form class="row g-4 needs-validation" action="{{ route('contact.store') }}" method="POST" id="form-contact">
                @csrf
                <input type="hidden" name="g-recaptcha-response">
                <div class="col-12">
                  <label for="fn" class="form-label fs-base">{{ __('Nom Prénom') }}</label>
                  <input type="text" name="name" class="form-control form-control-lg" id="fn" required="">
                  <div class="invalid-feedback">{{ __('Entrez votre nom et prénom') }}</div>
                </div>
                <div class="col-12">
                  <label for="fn" class="form-label fs-base">{{ __('Téléphone') }}</label>
                  <input type="phone" name="phone" class="form-control form-control-lg" id="fn" required="">
                  <div class="invalid-feedback">{{ __('Entrez votre numéro de téléphone') }}</div>
                </div>
                <div class="col-12">
                  <label for="email" class="form-label fs-base">{{ __('Adresse mail') }}</label>
                  <input type="email" name="email" class="form-control form-control-lg" id="email" required="">
                  <div class="invalid-feedback">{{ __('Entrez votre adresse email') }}</div>
                </div>
                <input type="hidden" name="type" value="Demande générale">
                <div class="col-12">
                  <label for="message" class="form-label fs-base">{{ __('Votre message') }}</label>
                  <textarea name="message" class="form-control form-control-lg" id="message" required=""></textarea>
                </div>
                <div class="col-12 pt-2 pt-sm-3">
                  <button class=" btn btn-lg btn-primary w-100 w-sm-auto" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback='onSubmit' data-action='send_mail'>{{ __('Envoyez votre message') }}</button>
                  <script>
                    function onSubmit(token) {
                      document.getElementById("form-contact").submit();
                    }
                  </script>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="position-absolute bottom-0 start-0 w-100 bg-light" style="height: 8rem;"></div> -->
  </section>

  <!-- Branches -->
  <section class="container py-2 py-lg-4 py-xl-5 mb-2 mb-md-3">
    <div class="row py-5">
      <div class="col-lg-6 mb-5 mb-lg-0">
        <div class="d-flex flex-column h-100 shadow-sm rounded-3 overflow-hidden">
          <iframe class="d-block h-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3450.1644936146677!2d-0.3555751231901214!3d44.67947147107205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd5515c0aaece9eb%3A0x50274a4d07de291b!2zQ0jDglRFQVUgUsOJQVVUIFRvdXJpc21lICYgw4l2w6luZW1lbnRpZWw!5e1!3m2!1sfr!2sfr!4v1732192597255!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="border: 0; min-height: 300px;" allowfullscreen="" loading="lazy" title="Map"></iframe>
        </div>
      </div>
      <div class="col-lg-5 offset-lg-1">
        <h2 class="h4 mb-4">{{ __('Notre adresse') }}</h2>
        <ul class="list-unstyled pb-2 pb-lg-0 mb-4 mb-lg-5">
          <li class="d-flex pb-1 mb-2">
            <i class="bx bx-map text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            14, Thibeau Ouest, 33410 Rions, France
          </li>
          <li class="d-flex pb-1 mb-2">
            <i class="bx bx-phone-call text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            +33 (0)5 56 62 66 54
          </li>
          <li class="d-flex">
            <i class="bx bx-time-five text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            <div>
              <strong class="text-nav">{{ __('Lun - Ven') }}</strong> : 9:00 - 17:00
            </div>
          </li>
        </ul>
        <div class="d-flex pt-1 pt-md-3 pt-xl-4">
          <a href="https://www.facebook.com/chateau.reaut.5/?locale=fr_FR" class="btn btn-icon btn-secondary btn-facebook me-3" aria-label="Facebook">
            <i class="bi bi-facebook"></i>
          </a>
          <a href="https://www.instagram.com/chateau_reaut/?hl=fr" class="btn btn-icon btn-secondary btn-instagram me-3" aria-label="Instagram">
            <i class="bi bi-instagram"></i>
          </a>
        </div>
      </div>
    </div>
  </section>
</main>

@endsection