@props([
    'image' => null,
])

<section {{ $attributes }}>
    <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 border border-black">
        <div class="flex flex-col justify-center gap-8 px-8 py-16 lg:px-16">
            <h2
                class="text-h2 leading-tight"
                aria-label="Γράψου στο newsletter μας"
                data-controller="appear"
                data-appear-visible-class="is-visible"
            >
                <span class="text-dance" data-text="Γράψου">Γράψου</span>
                στο
                <span class="text-dance [--dance-delay:200ms]" data-text="newsletter">newsletter</span>
                μας
            </h2>

            <p class="max-w-md text-neutral-600">
                Γίνε μέλος της λίστας μας και κέρδισε <span class="font-bold">5% έκπτωση</span> στην πρώτη σου παραγγελία, μαζί με αποκλειστικές προσφορές και νέα.
            </p>

            <form method="POST" action="#" class="flex flex-col gap-6 max-w-md">
                @csrf
                <div class="relative">
                    <x-ui.input
                        name="email"
                        type="email"
                        :required="true"
                        autocomplete="email"
                        placeholder="Το email σου"
                        class="pr-10 text-lg"
                        placeholderClass="placeholder:text-black/40"
                        aria-label="Το email σου"
                    />
                    <button
                        type="submit"
                        aria-label="Εγγραφή στο newsletter"
                        class="absolute right-0 bottom-2 cursor-pointer"
                    >
                        <x-ui.icon name="arrow-right" size="22" />
                    </button>
                </div>

                <x-ui.checkbox name="gdpr_consent" :required="true" id="newsletter_split_gdpr_consent" class="after:mix-blend-multiply">
                    <span class="text-sm text-left">Επιθυμώ διακαώς 🔥 να εγγραφώ στη λίστα αποστολής ενημερωτικού υλικού</span>
                </x-ui.checkbox>
            </form>
        </div>

        <div class="relative bg-neutral-300 min-h-[320px] lg:min-h-full border-t border-black lg:border-t-0 lg:border-l">
            @if($image)
                <img src="{{ $image }}" alt="" aria-hidden="true" loading="lazy" width="800" height="800" class="w-full h-full object-cover">
            @else
                <div class="absolute inset-0 flex items-center justify-center text-neutral-500 text-sm">
                    Χωρίς εικόνα
                </div>
            @endif
        </div>
    </div>
</section>