{{ partial:components/section max-width="sm" }}
    {{ partial:components/section-title :text="contact_block_title" class="mb-[22px] xl:mt-[94px] font-lead uppercase text-[30px] font-normal tracking-[3px] text-left" }}

    {{ partial:components/text-wrapper :text="contact_block_text" }}

    <div
        class=""
        x-data="{
            ...ajaxHelper(),

            formData: {
                full_name: '',
                email: '',
                message: '',
                opt_in_newsletter: false,
                _token: '{{ csrf_token }}',
                name: ''
            }
        }"
    >
        {{ form:contact x-on:submit.prevent="onSubmitForm" }}
            <div class="pt-8 pb-4 text-center text-white" x-show="showSuccess" x-collapse x-cloak>
                <h4 class="text-2xl font-headline">Success!</h4>
                <p class="text-sm">Your message has been sent.</p>
            </div>
            <div class="text-left" x-show="!showSuccess" x-collapse>
                {{ partial:components/form-group name="full_name" label="Full Name" label-for="contact-full-name" bg-color="red" }}
                    {{ partial:components/input id="contact-full-name" x-model="formData.full_name" type="full_name" name="full_name" full-width="true" placeholder="Enter your full name" required="required" }}
                {{ /partial:components/form-group }}

                {{ partial:components/form-group name="email" label="Email" label-for="contact-email" bg-color="red" }}
                    {{ partial:components/input id="contact-email" x-model="formData.email" type="email" name="email" full-width="true" placeholder="Enter your email" required="required" }}
                {{ /partial:components/form-group }}

                {{ partial:components/form-group name="message" label="Message" label-for="contact-message" bg-color="red" }}
                    {{ partial:components/textarea id="contact-message" x-model="formData.message" name="message" placeholder="Enter your message" rows="8" required="required" }}
                {{ /partial:components/form-group }}

                <label class="block mb-[25px] mt-[22px]">
                    <input type="checkbox" value="1" name="opt_in_newsletter" x-model="formData.opt_in_newsletter"> Sign me up for the Beesponsible e&#8209;Newsletter.
                </label>

                {{ partial:components/button class="primary-button" text="Submit"  }}

                <input type="text" name="name" x-model="formData.name" class="h-0" />
            </div>
        {{ /form:contact }}
    </div>
{{ /partial:components/section }}