<!-- Accordion (Requires AlpineJS Collapse Plugin) -->
<div class="mx-auto">
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape LaunchPad
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>Propel your startup to new heights with our comprehensive incubation program. Tailored for early-stage tech ventures, LaunchPad offers resources, mentorship, and the initial push every visionary founder seeks.</p>
            </div>
        </div>
    </div>
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape Beacon
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>A specialized consulting service dedicated to refining business models and growth strategies. Beacon is the guiding light for established tech businesses aiming to pivot or expand their horizons.</p>
            </div>
        </div>
    </div>
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape Nexus
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>Bridging the gap between startups and industry veterans, Nexus facilitates invaluable networking events, partnerships, and collaborative opportunities. Connect, collaborate, and conquer.</p>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
        [x-cloak] { display: none !important; }
</style>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('accordion', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            },
            show() {
                this.open = true
            },
            close() {
                this.open = false
            },
        }))
    })
</script>
<!-- /Accordion -->