{% extends "base.html" %} {% load static %} {% block content %}

    <div class="container text-center">
        <div class="row">
            <div class="px-4 py-5 mt-5 mb-0">
                <h1 class="display-1 fw-bold">Alphabet Learning</h1>
                <p class="display-6 mb-4 mt-4 p-4 rounded" style="color: #919191">
                    High quality educational resources focused on simple concepts
                    and the first steps in learning.
                </p>
            </div>
        </div>

        <hr
                style="
            border: none;
            height: 10px;
            background: linear-gradient(
                to right,
                red,
                orange,
                yellow,
                green,
                #1a87ee,
                indigo,
                violet
            );
            width: 100%;
            margin: 20px 0;
        "
        />

        <div class="row justify-content-center my-5">
            <div class="col-lg-12">
                <h2 class="display-4 font-weight-bolder my-3">Sign up</h2>
                <div>
                    <p class="display-6 mb-4" style="color: darkgray">
                        To be informed of the site launch and receive FREE resource
                        credits, join our new customer mailing list...
                    </p>
                </div>
                <form
                        method="post"
                        action="{% url 'payments:email_signup_verification' %}"
                        class="mb-4"
                        style="padding: 30px 0"
                >
                    {% csrf_token %}
                    {{ form.non_field_errors }}
                    <div class="my-5">
                        {% if form.email.errors %}
                            <div class="text-start my-2 border border-danger text-danger rounded">
                                <p>
                                    {{ form.email.errors }}
                                </p>
                            </div>
                        {% endif %}
                        <div class="mb-4 text-start">
                            <input
                                    type="email"
                                    class="sign-up-form-input"
                                    id="email"
                                    name="email"
                                    required
                                    placeholder="Your email address..."
                            />
                        </div>
                        <div>
                            {{ form.captcha }}
                        </div>
                        <div>
                           {% if form.captcha.errors %}
                           <div class="error">
                               {{ form.captcha.errors }}
                            </div>
                            {% endif %}
                        </div>
                        <button
                                type="submit"
                                style="
                            background-color: red;
                            color: white;
                            border: none;
                            padding: 20px 50px;
                            border-radius: 10px;
                            font-size: 1.5rem;
                            font-weight: bold;
                        "
                        >
                            Submit
                        </button>
                    </div>
                    <p class="text-muted text-center mt-3">
                        <small
                        >By joining our list, you agree to our
                            <a
                                    href="{% url 'payments:privacy_policy' %}"
                                    class="text-decoration-none"
                            >Privacy and Legal Notice</a
                            >.</small
                        >
                    </p>
                </form>
                <div id="spinner-overlay" class="spinner-overlay">
                    <div class="spinner"></div>
                </div>
            </div>
            <div class="col-lg-12">
                <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2>
                <p class="display-6 mb-4" style="color: darkgray">
                    As a thank-you, the first fifty customers who join our mailing
                    list will receive a 50% discount once the site is live.
                </p>
            </div>
        </div>

        <hr
                style="
            border: none;
            height: 10px;
            background: linear-gradient(
                to right,
                red,
                orange,
                yellow,
                green,
                #1a87ee,
                indigo,
                violet
            );
            width: 100%;
            margin: 20px 0;
        "
        />

        <div class="row justify-content-center">
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel1.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 1"
                />
            </div>
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel2.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 2"
                />
            </div>
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel3.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 3"
                />
            </div>

        </div>

        <div class="row my-5 d-flex align-items-stretch">
            <div class="col-md-12 d-flex">
                <div class="p-4 flex-fill">
                    <h2 class="display-4 font-weight-bolder my-3">
                        Learning from A to Z
                    </h2>
                    <p
                            class="display-6"
                            style="margin-bottom: 20px; color: darkgray"
                    >
                        Focused on early concepts, these resources are designed to
                        be accessible to all learners.
                    </p>
                </div>
            </div>
            <div class="display-4 font-weight-bolder my-5">
                <h2 class="display-4 font-weight-bolder mb-2">
                    No commitment required
                </h2>
                <p class="display-6" style="margin-bottom: 20px; color: darkgray">
                    Resources will be available to purchase individually without a
                    subscription.
                </p>
            </div>
        </div>

        <div class="row justify-content-center my-5">
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel4.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 1"
                />
            </div>
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel5.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 2"
                />
            </div>
            <div class="col-md-4 mb-5 mb-md-0">
                <img
                        src="{% static 'images/funnel6.png' %}"
                        class="img-fluid rotated-image"
                        alt="Funnel 3"
                />
            </div>
        </div>
        <p
                class="display-6 mb-4 mt-4 p-4 col-12 rounded text-center"
                style="color: darkgray"
        >
            Alphabet Learning is currently in active <br/>development and will be
            launched in Spring 2025.
        </p>
    </div>
{% block inline_javascript %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form'); // Adjust this selector for your form
    const spinnerOverlay = document.getElementById('spinner-overlay');

    if (form) {
        form.addEventListener('submit', () => {
            spinnerOverlay.style.display = 'flex'; // Show the spinner overlay
        });
    }
});
</script>

{% endblock inline_javascript %}
{% endblock content %}