{% extends '@SyliusShop/layout.html.twig' %}
{% block title %}
{{ data.title_tab_01|default('') }} - {{ parent() }}
{% endblock %}

{% block content %}
{% set sectorAppearance = sector_appearance|default(null) %}
{% set hero_image = asset('build/app/shop/images/about_livraison.jpg', 'app.shop') %}
{% set bottom_image = asset('build/app/shop/images/about_2.webp', 'app.shop') %}
{% if sectorAppearance == 'jardinerie' %}
  {% set hero_image = asset('assets/images/page-locale/haut-pepiniere.jpeg') %}
  {% set bottom_image = asset('assets/images/page-locale/bas-deux.JPG') %}
{% elseif sectorAppearance == 'pepinieres' %}
  {% set hero_image = asset('assets/images/page-locale/haut-jardinerie.jpeg') %}
  {% set bottom_image = asset('assets/images/page-locale/bas-deux.JPG') %}
{% endif %}

<!-- Hero -->
<section class="container">
  <div class="row">

    <!-- Cover image -->
    <div class="col-md-7 order-md-2 mb-4 mb-md-0">
      <div class="position-relative h-100">
        <div class="ratio ratio-16x9"></div>
        <img src="{{ hero_image }}"
          class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="{{ data.alt_hero_01|default('') }}">
      </div>
    </div>

    <!-- Text + button -->
    <div class="col-md-5 order-md-1">
      <div class="position-relative py-5 px-4 px-sm-5">
        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none-dark rtl-flip"
          style="background: linear-gradient(102deg, var(--bs-light) 0%, var(--bs-light-hover) 80.43%);"></span>
        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 d-none d-block-dark rtl-flip"
          style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
        <div class="position-relative z-1 py-md-2 py-lg-4 py-xl-5 px-xl-2 px-xxl-4 my-xxl-3">
          <h1 class="pb-1 pb-md-2 pb-lg-3">{{ data.h1_hero_01|default('') }}</h1>
          <p class="text-dark-emphasis pb-sm-2 pb-lg-0 mb-4 mb-lg-5">{{ data.p_hero_01|default('') }}</p>
          <a class="btn btn-lg btn-outline-dark animate-slide-down"
            href="https://ma-pepiniere.fr/fr/contact/">
            {{ data.btn_hero_01|default('') }}
            <i class="ci-arrow-down fs-lg animate-target ms-2 me-n1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="p-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
  
  {% include '@SyliusShop/Homepage/_latestProductsCarouselContent.html.twig' %}
</section>

{# Things to do (Flowlead meta.things_to_do) #}
{% if things_to_do|default([])|length > 0 %}
<section class="container mt-4 mt-sm-5">
  <div class="d-flex align-items-end justify-content-between mb-3 mb-sm-4">
    <div>
      <h2 class="h3 mb-1">À faire{% if locality_name %} à {{ locality_name }}{% endif %}</h2>
      <p class="text-body-secondary mb-0">Suggestions de lieux et activités proches</p>
    </div>
  </div>
  <div class="overflow-auto" data-simplebar>
    <div class="d-flex gap-4">
      {% for poi in things_to_do %}
        <article class="card border-0 shadow-sm rounded-4" style="min-width: 260px;">
          <a href="{{ poi.url }}" class="text-decoration-none" target="_blank" rel="noopener nofollow">
            <div class="ratio ratio-16x9 rounded-top-4">
              {% if poi.image_url %}
                <img src="{{ poi.image_url }}" alt="{{ poi.name }}" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-top-4">
              {% else %}
                <div class="bg-body-tertiary rounded-top-4"></div>
              {% endif %}
            </div>
            <div class="card-body">
              <h3 class="h6 text-truncate mb-1">{{ poi.name }}</h3>
              {% if poi.source %}<div class="text-body-tertiary fs-sm">Source: {{ poi.source }}</div>{% endif %}
            </div>
          </a>
        </article>
      {% endfor %}
    </div>
  </div>
  </section>
{% endif %}

<section class="container mt-5 pt-2 pt-sm-3 pt-md-4 pt-lg-5" id="mission">

  <div class="row">
    <div
      class="col-lg-3 d-flex flex-column flex-sm-row flex-lg-column align-items-center align-items-lg-start pb-3 mb-3 mb-md-4">
      <h2 class="h1 text-center text-sm-start mb-sm-0 mb-lg-5 me-sm-4 me-lg-0">{{ data.h2_mission_01|default('') }}</h2>
      <a class="btn btn-primary rounded-pill ms-sm-auto ms-lg-0"
        href="https://ma-pepiniere.fr/fr/produits/tous/plante-d-exterieur">Toutes nos plantes</a>
    </div>
    <div class="col-lg-9">
      <div class="overflow-auto" data-simplebar>
        <div class="d-flex gap-4">
          <!-- Item 1: Engrais et amendements -->
          <div class="w-100" style="min-width: 230px">
            <div class="ratio ratio-1x1 mb-4" style="max-width: 230px">
              <img src="{{ asset('assets/images/page-locale/img1.jpeg') }}"
                   class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-4"
                   alt="{{ data.alt_products_01|default('') }}">
            </div>
            <h3 class="h5 pb-1 mb-2">{{ data.h3_products_01|default('') }}</h3>
            <p class="fs-sm mb-4">{{ data.p_products_01|default('') }}</p>
          </div>

          <!-- Item 2: Outils de jardinage -->
          <div class="w-100" style="min-width: 230px">
            <div class="ratio ratio-1x1 mb-4" style="max-width: 230px">
              <img src="{{ asset('assets/images/page-locale/img2.jpeg') }}"
                   class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-4"
                   alt="{{ data.alt_products_02|default('') }}">
            </div>
            <h3 class="h5 pb-1 mb-2">{{ data.h3_products_02|default('') }}</h3>
            <p class="fs-sm mb-4">{{ data.p_products_02|default('') }}</p>
          </div>

          <!-- Item 3: Pots et contenants -->
          <div class="w-100" style="min-width: 230px">
            <div class="ratio ratio-1x1 mb-4" style="max-width: 230px">
              <img src="{{ asset('assets/images/page-locale/img3.jpeg') }}"
                   class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-4"
                   alt="{{ data.alt_products_03|default('') }}">
            </div>
            <h3 class="h5 pb-1 mb-2">{{ data.h3_products_03|default('') }}</h3>
            <p class="fs-sm mb-4">{{ data.p_products_03|default('') }}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- Principles -->
<section class="container pt-5">
  <div class="row pt-2 pt-sm-3 pt-md-4 pt-lg-5">
    <div class="col-md-5 col-lg-6 pb-1 pb-sm-2 pb-md-0 mb-4 mb-md-0">
      <div class="ratio ratio-1x1">
        <img src="{{ asset('build/app/shop/images/about_principe.jpeg', 'app.shop') }}"
             class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5"
             alt="{{ data.alt_principles_01|default('') }}">
      </div>
    </div>
    <div class="col-md-7 col-lg-6 pt-md-3 pt-xl-4 pt-xxl-5">
      <div class="ps-md-3 ps-lg-4 ps-xl-5 ms-xxl-4">
        <h2 class="text-body fs-sm fw-normal">{{ data.h6_principles_01|default('') }}</h2>
        <h3 class="h1 pb-1 pb-sm-2 pb-lg-3">{{ data.h2_principles_01|default('') }}</h3>
        <p class="pb-xl-3">{{ data.p_principles_01|default('') }}</p>

        <!-- Accordion -->
        <div class="accordion accordion-alt-icon" id="principles">

          <!-- Item -->
          <div class="accordion-item">
            <h3 class="accordion-header" id="headingFocus">
              <button type="button" class="accordion-button animate-underline collapsed" data-bs-toggle="collapse"
                data-bs-target="#focus" aria-expanded="false" aria-controls="focus">
                <span class="animate-target me-2">{{ data.h5_principles_01|default('') }}</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="focus" aria-labelledby="headingFocus"
              data-bs-parent="#principles">
              <div class="accordion-body">{{ data.p_principles_02|default('') }}</div>
            </div>
          </div>

          <!-- Item -->
          <div class="accordion-item">
            <h3 class="accordion-header" id="headingReputation">
              <button type="button" class="accordion-button animate-underline collapsed" data-bs-toggle="collapse"
                data-bs-target="#reputation" aria-expanded="false" aria-controls="reputation">
                <span class="animate-target me-2">{{ data.h5_principles_02|default('') }}</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="reputation" aria-labelledby="headingReputation"
              data-bs-parent="#principles">
              <div class="accordion-body">
                {{ data.p_principles_03|default('') }}
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="accordion-item">
            <h3 class="accordion-header" id="headingFast">
              <button type="button" class="accordion-button animate-underline collapsed" data-bs-toggle="collapse"
                data-bs-target="#fast" aria-expanded="false" aria-controls="fast">
                <span class="animate-target me-2">{{ data.h5_principles_03|default('') }}</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="fast" aria-labelledby="headingFast"
              data-bs-parent="#principles">
              <div class="accordion-body">{{ data.p_principles_04|default('') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Values (Carousel of icon boxes) -->
<section class="container-start pt-5">
  <div class="row align-items-center g-0 pt-2 pt-sm-3 pt-md-4 pt-lg-5">
    <div class="col-lg-3 pb-1 pb-md-0 pe-3 ps-md-0 mb-4 mb-md-0" style="z-index:2;">
      <div class="d-flex flex-md-column align-items-end align-items-md-start">
        <div class="mb-md-5 me-3 me-md-0">
          <h2 class="text-body fs-sm fw-normal">{{ data.h6_values_01|default('') }}</h2>
          <h3 class="h1 mb-0">{{ data.h2_values_01|default('') }}</h3>
        </div>
      </div>
    </div>

    <div class="col-lg-9">
      <div class="ps-md-4 ps-lg-5 row">
        <div class="col-lg-4 mb-3">
          <div class="card border h-100 rounded-4 px-3">
            <div class="card-body py-5 px-3">
              <div class="h4 h5 d-flex align-items-center">
                <i class="ci-trending-up fs-4 me-3"></i>
                {{ data.h5_values_01|default('') }}
              </div>
              <p class="mb-0">
                {{ data.p_values_01|default('') }}
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 mb-3">
          <div class="card border h-100 rounded-4 px-3">
            <div class="card-body py-5 px-3">
              <div class="h4 h5 d-flex align-items-center">
                <i class="ci-leaf fs-4 me-3"></i>
                {{ data.h5_values_02|default('') }}
              </div>
              <p class="mb-0">
                {{ data.p_values_02|default('') }}
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 mb-3">
          <div class="card border h-100 rounded-4 px-3">
            <div class="card-body py-5 px-3">
              <div class="h4 h5 d-flex align-items-center">
                <i class="ci-rocket fs-4 me-3"></i>
                {{ data.h5_values_03|default('') }}
              </div>
              <p class="mb-0">
                {{ data.p_values_03|default('') }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</section>



<section class="container pt-5 mt-2 mt-sm-3 mt-md-4 mt-lg-5">
  <div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
      <div class="ratio ratio-1x1">
        <img src="{{ bottom_image }}"
          class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-5" alt="{{ data.alt_01|default('') }}">
      </div>
    </div>
    <div class="col">
      <div class="bg-body-tertiary rounded-5 py-5 px-4 px-sm-5">
        <div class="py-md-3 py-lg-4 py-xl-5 px-lg-4 px-xl-5 my-lg-2 my-xl-4 my-xxl-5">
          <h2 class="h3 pb-sm-1 pb-lg-2">{{ data.h3_01|default('') }}</h2>
          <p class="pb-sm-2 pb-lg-0 mb-4 mb-lg-5">{{ data.p_01|default('') }}</p>
          <div class="d-flex">
            <a href="https://ma-pepiniere.fr/fr/produits/tous/plante-d-exterieur"
               class="btn btn-lg btn-outline-dark" {{ sylius_test_html_attribute('search') }}>
              Plantes d'extérieur
              <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



{# Internal links (Flowlead meta.outgoing_links) #}
{% set has_out = outgoing_links|default([])|length > 0 %}
{% if has_out %}
<section class="container pt-5 mt-2 mt-sm-3 mt-md-4 mt-lg-5">
  <div class="row">
    <div class="col-12 col-lg-10">
      <h2 class="h3 mb-4">Retrouvé nous aussi ici</h2>

      <ul class="list-unstyled mb-0">
        {% for link in outgoing_links %}
          {% set linkUrl = path('local_page_show', {'_locale': app.request.locale, 'slug': link.slug}) %}
          <li class="mb-2">
            <a href="{{ linkUrl }}" class="d-inline-flex align-items-center text-decoration-none">
              <i class="ci-arrow-right me-2"></i>
              <span class="me-2">{{ link.title }}</span>
              {% if link.locality_name %}<span class="badge bg-secondary-subtle text-secondary-emphasis">{{ link.locality_name }}</span>{% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>
{% endif %}



<!-- FAQ -->
<section class="py-5">
  <div class="container py-2">
    <div class="row">
      <div class="col-xl-4 col-md-5 text-center text-md-start pb-2 pb-md-0 mb-4 mb-md-0">
        <h2 class="pb-3 mb-1 mb-lg-2">{{ data.h2_faq_01|default('') }}</h2>
        <p class="fs-lg pb-3 mb-2 mb-lg-3">{{ data.p_faq_intro_01|default('') }}</p>
      </div>
      <div class="col-md-7 offset-xl-1">
        {% set faqs = [
        {'q': data.q_faq_01|default(''), 'a': data.a_faq_01|default('')},
        {'q': data.q_faq_02|default(''), 'a': data.a_faq_02|default('')},
        {'q': data.q_faq_03|default(''), 'a': data.a_faq_03|default('')},
        {'q': data.q_faq_04|default(''), 'a': data.a_faq_04|default('')},
        {'q': data.q_faq_05|default(''), 'a': data.a_faq_05|default('')}
        ] %}
        <div class="accordion" id="faq">
          {% for item in faqs %}
          {% set index = loop.index %}
          {% set isFirst = loop.first %}
          {% set collapsedClass = isFirst ? '' : 'collapsed' %}
          {% set showClass = isFirst ? 'show' : '' %}
          <div class="accordion-item border-0 rounded-3 shadow-sm mb-3">
            <h2 class="accordion-header" id="faq-heading-{{ index }}">
              <button class="accordion-button shadow-none rounded-3 {{ collapsedClass }}" type="button"
                data-bs-toggle="collapse" data-bs-target="#faq-collapse-{{ index }}"
                aria-expanded="{{ isFirst ? 'true' : 'false' }}" aria-controls="faq-collapse-{{ index }}">
                {{ item.q }}
              </button>
            </h2>
            <div id="faq-collapse-{{ index }}" class="accordion-collapse collapse {{ showClass }}"
              aria-labelledby="faq-heading-{{ index }}" data-bs-parent="#faq">
              <div class="accordion-body fs-sm pt-0">
                <p>{{ item.a }}</p>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock %}