<?php
	/**
	 * Footer Template
	 */

	if ( ! defined( 'ABSPATH' ) ) {
		exit;
	}

?>
<footer class="g-4d4d7586" data-bs-track="514c5b0" data-test-track="c0a25ed4f20" data-component-priority="medium" data-block-trigger="125ff9abc" data-analytics-metric="357a8548c22">
	<div class="g-957a8097" id="elem-7212a4029bfe65b2">
		<div class="g-f4b7a06e" data-mui-variant="contained" data-element-action="focus" data-module-type="secondary">
			<div class="g-74024ba0" id="subscribe-toast" id="elem-51bf8d34dd819ed8"></div>
			<div class="g-4a44a45f" data-bs-source="71178a" data-bs-e2e="8fc0e8ce5" data-analytics-interval="31aa2e4a" data-mui-category="navigation">
				<h2 class="g-d2171c45 g-2ec69fc9" id="elem-89ecd5db16b1a6d1">
					Get car care tips delivered to your inbox
				</h2>
				<p class="g-7107d0b0 g-ac617201" data-module-type="secondary" data-widget-content="4670b1e7b" data-section-size="small" data-widget-config="038ceb8cf45">
					Each issue covers vehicle selection, maintenance advice, and repair guidance for car owners and beginners.
				</p>
			</div>
			<form
				class="g-05bb7739"
				id="subscribe-form"
				novalidate
				id="elem-5001ea26470c660f"
			>
				<div class="g-e4d01ab1 g-ac617201" data-module-priority="high" data-analytics-focus="b024deca000e" data-element-type="secondary" data-module-variant="outlined">
					Stay up to date with the latest news
				</div>
				<div class="g-4cfd3402" id="elem-7daf45bd13b6952c">
					<input
						type="email"
						name="email"
						class="g-730dd04b"
						placeholder="E-mail"
						required
						data-test-dismiss="fdc3b2c" data-widget-handler="bb6401639"
					>
					<button
						type="submit"
						class="g-12429387"
					>
                    Submit
					</button>
				</div>
				<label class="g-f4f3727a g-72872471" data-mui-cy="c210cb50642" data-mui-fixture="7e4b82c" data-module-type="button">
					<input
						class="g-3853b251"
						type="checkbox"
						name="policy"
						required
						id="elem-e3368318294dbae4"
					>
					<span>
                    By submitting your email, you agree to the processing of personal data
		</span>
				</label>
				<div
					class="g-92a46ea2"
					id="subscribe-message"
					aria-live="polite"
					data-analytics-selected="8abb3f80eb" data-section-variant="text" data-analytics-category="navigation"
				></div>
			</form>
		</div>
	</div>
	<div class="g-de46542a" id="elem-91db18434f7f0d02">
		<div class="g-957a8097" data-module-role="navigation" data-block-size="medium" data-analytics-qa="e28ae3" data-test-disabled="30b8770" data-mui-selector="2e593f137b3">
			<div class="g-01a831cb" id="elem-1fa75504473e44ec">
				<div class="g-7c27aaea" data-element-variant="text" data-widget-action="expand" data-analytics-source="4c3ba29">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="g-2daa9df2 g-9a3324bd"
					   aria-label="<?php bloginfo( 'name' ); ?>" id="elem-c6b302616933a5c6">
						<span class="g-7d2082df">🚗</span>
						<strong class="g-32858b3b"><?php bloginfo( 'name' ); ?></strong>
					</a>
					<div class="g-a2ad5997" data-analytics-disabled="f9bdfd" data-module-variant="filled" data-analytics-e2e="e08ea75f" data-block-theme="auto">
						<nav id="footer-menu" role="navigation"
						     aria-label="<?php esc_attr_e( 'Primary Navigation', 'blankslate' ); ?>"
						     itemscope itemtype="https://schema.org/SiteNavigationElement" id="elem-f37d11cc94cf0946">
							<?php wp_nav_menu( array(
								'theme_location' => 'main-menu',
					'fallback_cb'    => false,
								'container'      => 'ul',
								'menu_class'     => 'g-c048bfe8 g-69d5938a',
								'link_before'    => '<span itemprop="name">',
								'link_after'     => '</span>'
							) ); ?>
						</nav>
					</div>
				</div>
				<hr class="g-be7ada4c" />
				<div class="g-43a4585a" data-analytics-dimension="ca1b6bba1" data-analytics-interval="47cd25880" data-test-expanded="5ae94389663c" data-component-trigger="793de1a031" data-element-theme="light">
					<?php

						$privacy_page_id = get_option( 'wp_page_for_privacy' );
						if ( $privacy_page_id ) :

							?>
							<a href="<?php echo esc_url( get_permalink( $privacy_page_id ) ); ?>"
							   class="g-d35f2f8b" id="elem-2b1a94f8f7724ef2">
								<?php esc_html_e( 'Privacy Policy', 'theme' ); ?>
							</a>
						<?php endif; ?>
					<div class="g-40ec41b2" data-component-priority="low" data-analytics-value="0cccfb8" data-analytics-loading="980b0b" data-test-ride="f4bbe3" data-component-role="footer">
						© <?php echo esc_html( date( 'Y' ) ); ?>
						<?php bloginfo( 'name' ); ?>.
						<?php esc_html_e( 'All rights reserved.', 'theme' ); ?>
					</div>
					<?php

						$terms_page_id = get_option( 'wp_page_for_terms' );
						if ( $terms_page_id ) :

							?>
							<a href="<?php echo esc_url( get_permalink( $terms_page_id ) ); ?>"
							   class="g-d35f2f8b" id="elem-bc5c0c9552efa799">
								<?php esc_html_e( 'Terms of Use', 'theme' ); ?>
							</a>
						<?php endif; ?>
				</div>
			</div>
		</div>
	</div>
</footer>
<script>
    document.addEventListener('DOMContentLoaded', () => {

        const $ = (
            selector,
            scope = document
        ) => scope.querySelector(selector);

        const ui = {
            form: $('#subscribe-form'),
            toast: $('#subscribe-toast'),
            message: $('#subscribe-message')
        };

        // Initialization guard
        if (
            !ui.form ||
            !ui.toast ||
            typeof subscribeData === 'undefined'
        ) {
            return;
        }

        const emailPattern =
            /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        const notify = (text) => {

            ui.toast.textContent = text;

            ui.toast.classList.add('g-0097f342');

            clearTimeout(ui.toast.timeoutId);

            ui.toast.timeoutId = setTimeout(
                () => {

                    ui.toast.classList.remove(
                        'g-0097f342'
                    );

                },
                3000
            );

        };

        const sendSubscription = (
            email
        ) => {

            const data = new FormData();

            data.append(
                'action',
                'subscribe'
            );

            data.append(
                'email',
                email
            );

            data.append(
                'nonce',
                subscribeData.nonce
            );

            return fetch(
                subscribeData.ajaxUrl,
                {
                    method: 'POST',
                    body: data,
                    credentials: 'same-origin'
                }
            )
                .then(response =>
                    response.json()
                );

        };

        ui.form.addEventListener(
            'submit',
            async event => {

                event.preventDefault();

                const emailInput =
                    $('[name="email"]', ui.form);

                const policyInput =
                    $('[name="policy"]', ui.form);

                const button =
                    $('button', ui.form);

                const email =
                    emailInput.value.trim();

                // Basic validation layer
                if (
                    !emailPattern.test(email)
                ) {

                    notify(
                        'Please enter a valid email'
                    );

                    return;
                }

                if (!policyInput.checked) {

                    notify(
                        'You must agree to the personal data processing policy'
                    );

                    return;
                }

                button.disabled = true;

                notify('Sending...');

                try {

                    const response =
                        await sendSubscription(
                            email
                        );

                    notify(
                        'Thank you! Your information has been successfully sent.'
                    );

                    if (
                        response.success
                    ) {

                        ui.form.reset();

                    }

                } catch (error) {

                    /**
                     * TODO:
                     * send frontend errors
                     * to monitoring service.
                     */
                    notify('Error');

                } finally {

                    button.disabled = false;

                }

            }
        );

    });
</script>