{% extends 'base.html.twig' %}
{% block metadata %}
  {# ============================
   METADATA / SEO
   ============================ #}

  {% set meta_title = meta_title is defined
    ? meta_title
    : 'Contact – arts-ticule, spectacles jeunes publics et projets artistiques'
  %}
  {% set meta_description = meta_description is defined
    ? meta_description
    : 'Contactez-moi pour vos projets artistiques et représentations de spectacles.'
  %}
  {% set meta_image = meta_image is defined
    ? meta_image
    : asset('images/logo.png')
  %}
  {% set meta_url = meta_url is defined
    ? meta_url
    : app.request.uri|replace({
      'http://': 'https://'
    })
  %}
  {% set meta_site_name = meta_site_name is defined
    ? meta_site_name
    : 'Nom du site'
  %}
  {% set meta_type = meta_type is defined ? meta_type : 'website' %}

  <title>
    {{ meta_title }}
  </title>

  <meta name="description" content="{{ meta_description }}" />
  <meta name="robots" content="index, follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="canonical" href="{{ meta_url }}" />

  {# ============================
   OPEN GRAPH (Facebook, LinkedIn…)
   ============================ #}

  <meta property="og:title" content="{{ meta_title }}" />
  <meta property="og:description" content="{{ meta_description }}" />
  <meta property="og:type" content="{{ meta_type }}" />
  <meta property="og:url" content="{{ meta_url }}" />
  <meta property="og:image" content="{{ meta_image }}" />
  <meta property="og:site_name" content="{{ meta_site_name }}" />
  <meta property="og:locale" content="fr_FR" />

  {# Optionnel mais recommandé #}
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  {# ============================
   TWITTER CARDS
   ============================ #}

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="{{ meta_title }}" />
  <meta name="twitter:description" content="{{ meta_description }}" />
  <meta name="twitter:image" content="{{ meta_image }}" />
{% endblock %}
{% block body %}
  <div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
    <div
      aria-hidden="true"
      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
    >
      <div
        style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
        class="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#F59E0B] opacity-30 sm:left-[calc(50%-40rem)] sm:w-288.75"
      ></div>
    </div>
    <div class="mx-auto max-w-2xl text-center">
      <h2
        class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl"
      >
        Contactez moi
      </h2>
      <p class="mt-2 text-lg/8 text-gray-600">
        Vous pouvez me contacter via le formulaire ci-dessous et je vous
        répondrai rapidement.
      </p>
      {% for label, messages in app.flashes %}
        {% for message in messages %}
          <div
            class="mb-6 rounded-md p-4 text-sm font-medium {% if label == 'success' %} bg-green-50 text-green-800 {% elseif label == 'error' %} bg-red-50 text-red-800 {% elseif label == 'warning' %} bg-yellow-50 text-yellow-800 {% endif %}"
          >
            {{ message }}
          </div>
        {% endfor %}
      {% endfor %}
    </div>
    {{
      form_start(
        form,
        {
          attr: {
            class: 'mx-auto mt-16 max-w-xl sm:mt-20'
          }
        }
      )
    }}
    <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
      <div>
        <label
          for="{{ form.lastName.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Nom
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.lastName,
              {
                attr: {
                  placeholder: 'Votre nom',
                  autocomplete: 'family-name',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>
      <div>
        <label
          for="{{ form.firstName.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Prénom
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.firstName,
              {
                attr: {
                  placeholder: 'Votre prénom',
                  autocomplete: 'given-name',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="sm:col-span-2">
        <label
          for="{{ form.company.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Entreprise
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.company,
              {
                attr: {
                  placeholder: 'Raison sociale',
                  autocomplete: 'organization',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="sm:col-span-2">
        <label
          for="{{ form.email.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Email
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.email,
              {
                attr: {
                  placeholder: 'Votre adresse email',
                  autocomplete: 'email',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="sm:col-span-2">
        <label
          for="{{ form.phoneNumber.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Numéro de téléphone
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.phoneNumber,
              {
                attr: {
                  placeholder: 'Votre numéro de téléphone',
                  autocomplete: 'tel',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="sm:col-span-2 hidden">
        <label
          for="{{ form.phoneNumber.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Numéro de téléphone mobile
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.mobilePhoneNumber,
              {
                attr: {
                  placeholder: 'Votre numéro de téléphone',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="sm:col-span-2">
        <label
          for="{{ form.message.vars.id }}"
          class="block text-sm/6 font-semibold text-gray-900"
        >
          Message
        </label>
        <div class="mt-2.5">
          {{
            form_widget(
              form.message,
              {
                attr: {
                  rows: 4,
                  placeholder: 'Votre message',
                  class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
                }
              }
            )
          }}
        </div>
      </div>

      <div class="flex gap-x-4 sm:col-span-2">
        <div class="flex h-6 items-center">
          <div
            class="group relative inline-flex w-8 shrink-0 rounded-full bg-gray-200 p-px inset-ring inset-ring-gray-900/5 outline-offset-2 outline-amber-600 transition-colors duration-200 ease-in-out has-checked:bg-amber-600 has-focus-visible:outline-2"
          >
            <span
              class="size-4 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-3.5"
            >

            </span>

            {{
              form_widget(
                form.agreeToPolicies,
                {
                  attr: {
                    class: 'absolute inset-0 size-full appearance-none focus:outline-hidden'
                  }
                }
              )
            }}
          </div>
        </div>

        <label
          for="{{ form.agreeToPolicies.vars.id }}"
          class="text-sm/6 text-gray-600"
        >
          En cochant cette case, vous acceptez notre
          <a
            href="{{ path('confidentialitypolicy') }}"
            class="font-semibold whitespace-nowrap text-amber-600"
          >
            politique de confidentialité
          </a>.
        </label>
      </div>
    </div>
    <div class="mt-10">
      <button
        type="submit"
        class="block w-full rounded-md bg-amber-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
      >
        Envoyer ma demande
      </button>
    </div>
    {{ form_end(form) }}
  </div>
{% endblock %}