{% import '@SyliusShop/Common/Macro/sectionHeaders.html.twig' as headers %}

<section class="py-sm-1 py-md-2 py-lg-3">
    <div class="position-relative">
        <div class="position-absolute start-0 d-none d-md-block mt-md-n5 ms-md-5 mt-xl-n5 ms-xl-5 z-1">
            <img src="{{ asset('build/app/shop/images/newsletter.svg', 'app.shop') }}" alt="Actualités illustration"
                style="Height:200px;">
        </div>
    </div>
    <div class="text-center mx-auto">
        <h3 class="pb-1 mb-2 text-dark">{{ 'sylius.homepage.newsletter'|trans }}</h3>
        <p class="fs-sm text-body">{{ 'sylius.homepage.newsletter_description'|trans }}</p>

        <form action="{{ path('newsletter_subscribe') }}" method="POST"
            class="needs-validation position-relative d-flex flex-column flex-sm-row gap-2 pt-3 w-50 mx-auto"
            novalidate>
            <input type="email" name="email" class="form-control form-control-lg rounded-pill text-start"
                placeholder="{{ 'sylius.ui.email'|trans }}" aria-label="{{ 'sylius.ui.email'|trans }}" required>
            <div class="invalid-tooltip bg-transparent p-0">Veuillez entrer une adresse e-mail valide !</div>
            <button type="submit" class="btn btn-lg btn-primary rounded-pill">
                {{ 'sylius.homepage.subscribe'|trans }}
            </button>
        </form>
    </div>
</section>