<div class="bg-white py-12 fade-in-box">
    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
        <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
    </div>
    <div class="relative pt-16 sm:pt-24">
        <div class="absolute inset-x-0 top-48 bottom-0"></div>
        <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
            <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
                {% for plan in section.extra.plans %}
                <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
                    <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
                        <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
                            <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
                            <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
                            <div class="mt-4 flex items-center gap-4">
                                <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
                                <div class="text-sm text-gray-600">
                                </div>
                            </div>
                            <div class="mt-6">
                                <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
                                <ul class="mt-3 space-y-2">
                                    {% for feature in plan.features %}
                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
                                        <span class="inline-flex h-6 items-center">
                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                                            </svg>
                                        </span>
                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
                                        {{ feature.name }}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="mt-6">
                                <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
                                <ul class="mt-3 space-y-2">
                                    {% for feature in plan.rewards %}
                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
                                        <span class="inline-flex h-6 items-center">
                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
                                            </svg>
                                        </span>
                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
                                        {{ feature.name }}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<style>
    /* Fade-in animation for the grid items */
    .fade-in-box {
        opacity: 0;
        animation: fadeIn 2.2s ease-in-out forwards;
    }

    /* Fading in each grid item with a slight delay */
    .fade-in-box:nth-child(1) { animation-delay: 0s; }
    .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
    .fade-in-box:nth-child(3) { animation-delay: 0.4s; }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const textElement = document.getElementById("typing-text2");
        let loopCount = 0;
        const maxLoops = 5;

        function typeText(i, callback) {
            if (i < text.length) {
                textElement.textContent += text.charAt(i);
                setTimeout(() => typeText(i + 1, callback), 100);
            } else {
                setTimeout(callback, 1000);
            }
        }

        function deleteText(callback) {
            let currentText = textElement.textContent;
            if (currentText.length > 0) {
                textElement.textContent = currentText.substring(0, currentText.length - 1);
                setTimeout(() => deleteText(callback), 50);
            } else {
                setTimeout(callback, 100);
            }
        }

        function loopTyping() {
            if (loopCount < maxLoops) {
                typeText(0, () => {
                    deleteText(() => {
                        loopCount++;
                        loopTyping();
                    });
                });
            } else {
                typeText(0, () => {}); // Final typing with no delete
            }
        }

        loopTyping();
    });
</script>
