@props([])

<section {{ $attributes }}>
    <div class="max-w-3xl bg-brand mx-auto px-16 py-16  flex flex-col items-center text-center gap-8 border-1">
        <p class="text-h3 leading-snug">Γράψου στο newsletter για <span class="font-extrabold italic">5% έκπτωση</span> στην πρώτη σου παραγγελία</p>

        <form method="POST" action="#" class="w-full flex flex-col gap-5">
            @csrf
            <x-ui.input
                name="email"
                type="email"
                :required="true"
                autocomplete="email"
                placeholder="hello@email.com"
                class="text-center border-black"
                placeholderClass="placeholder:text-black/40 placeholder:text-base"
                aria-label="Email"
            />
            <div class="flex items-center justify-center">
                <x-ui.checkbox name="gdpr_consent" :required="true" id="gdpr_consent" class="after:mix-blend-multiply">
                    <span class="text-sm text-left">Επιθυμώ διακαώς 🔥 να εγγραφώ στη λίστα αποστολής ενημερωτικού υλικού</span>
                </x-ui.checkbox>
            </div>
            <div class="flex justify-center mt-4">
                <x-ui.button type="submit">Εγγραφή</x-ui.button>
            </div>
        </form>
    </div>
</section>