@extends('layouts.app')

@section('title', 'Contact')
@section('meta_description', 'Parlez-nous de votre projet e-commerce, SaaS, ERP ou IA. Réponse rapide.')

@section('content')

<main class="page-wrapper">
  <!-- Section Contact -->
  <section class="position-relative bg-secondary pt-5">
    <div class="container position-relative zindex-2 pt-5">

      <!-- Fil d'Ariane -->
      <nav class="pt-lg-4 pb-3 mb-2 mb-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">
            <a href="{{ route('home') }}"><i class="bx bx-home-alt fs-lg me-1"></i>Accueil</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Contact</li>
        </ol>
      </nav>

      <div class="row">

        <!-- Infos de contact -->
        <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">On vous répond vite (vraiment).</h1>
            <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="bx bx-envelope"></i>
              </div>
              <div class="ps-3 ps-sm-4">
                <h2 class="h4 pb-1 mb-2">Contactez-nous</h2>
                <p class="mb-2">Dites-nous en une phrase votre objectif. On revient avec un créneau, un budget indicatif et le prochain pas.</p>
                <div class="btn btn-link btn-lg px-0">
                  Envoyer un message
                  <i class="bx bx-right-arrow-alt lead ms-2"></i>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-start">
              <div class="bg-light text-primary rounded-circle flex-shrink-0 fs-3 lh-1 p-3">
                <i class="bx bx-briefcase"></i>
              </div>
              <div class="ps-3 ps-sm-4">
                <h2 class="h4 pb-1 mb-2">Envie de collaborer ?</h2>
                <p class="mb-2">Flowpi reste ouvert aux nouvelles collaborations, recrutements et partenariats.</p>
                <div class="btn btn-link btn-lg px-0">
                  Postuler
                  <i class="bx bx-right-arrow-alt lead ms-2"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Formulaire de contact -->
        <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">Discutons de votre projet</h2>
              <form class="row g-4 needs-validation" action="{{ route('contact.store') }}" method="POST" id="form-contact" novalidate>
                @csrf
                <input type="hidden" name="g-recaptcha-response">

                <!-- Nom & Prénom -->
                <div class="col-12">
                  <label for="name" class="form-label fs-base">Nom & Prénom</label>
                  <input type="text" name="name" class="form-control form-control-lg" id="name" placeholder="Votre nom et prénom" required>
                  <div class="invalid-feedback">Veuillez entrer votre nom et prénom.</div>
                </div>

                <!-- Email -->
                <div class="col-12">
                  <label for="email" class="form-label fs-base">Adresse email</label>
                  <input type="email" name="email" class="form-control form-control-lg" id="email" placeholder="Votre adresse email" required>
                  <div class="invalid-feedback">Veuillez entrer une adresse email valide.</div>
                </div>

                <!-- Sélection du service -->
                <div class="col-12">
                  <label for="service" class="form-label fs-base">Votre besoin</label>
                  <select class="form-select form-select-lg" name="service" id="service" required>
                    <option value="" selected disabled>Choisissez une option</option>
                    <option value="Automatisation & IA">Automatisation & IA</option>
                    <option value="Développement web & e-commerce">Développement web & e-commerce</option>
                    <option value="Connecteurs & API">Connecteurs & API</option>
                    <option value="Maintenance & Support">Maintenance & Support</option>
                  </select>
                  <div class="invalid-feedback">Veuillez sélectionner une option.</div>
                </div>

                <!-- Message -->
                <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" rows="4" placeholder="Décrivez votre besoin ou posez votre question" required></textarea>
                  <div class="invalid-feedback">Veuillez entrer votre message.</div>
                </div>

                <!-- Bouton d'envoi -->
                <div class="col-12 pt-2 pt-sm-3">
                  <button class="btn btn-lg btn-primary w-100 w-sm-auto g-recaptcha"
                    data-sitekey="{{ config('services.recaptcha.site_key') }}"
                    data-callback="onSubmit"
                    data-action="send_mail">
                    Envoyer
                  </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>

</main>
@endsection