Tailwind Photography Services Accordion

<section class="mt-12">
                    <div class="relative overflow-hidden bg-neutral-900 rounded-3xl">
                        <div class="relative z-10 sm:p-8 md:p-12 pt-5 pr-5 pb-5 pl-5">
                            <!-- Header -->
                            <div class="flex items-start justify-between">
                                <div class="flex items-center gap-2 text-white/80 text-xs">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="camera" class="lucide lucide-camera h-3.5 w-3.5" style="stroke-width: 1.5;"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path><circle cx="12" cy="13" r="3" class=""></circle></svg>
                                    <span class="font-geist">Photography Services</span>
                                </div>
                                <div class="flex items-baseline gap-2">
                                    <h2 class="sm:text-6xl md:text-7xl leading-[1.05] text-5xl text-white tracking-tight font-geist font-medium">Services.</h2>
                                </div>
                            </div>

                            <!-- Services List -->
                            <div class="ring-1 ring-white/10 overflow-hidden bg-white/5 rounded-2xl mt-8 backdrop-blur-3xl">
                                <!-- Wedding Photography -->
                                <details class="group open:bg-white/5" open="">
                                    <summary class="list-none">
                                        <div class="flex items-center gap-4 justify-between border-b border-white/10 p-4 sm:p-5">
                                            <div class="text-white/50 text-[11px] font-geist">(001)</div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-white font-medium tracking-tight font-geist">Wedding Photography</p>
                                            </div>
                                            <div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4 group-open:hidden" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus h-4 w-4 hidden group-open:block" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path></svg>
                                            </div>
                                        </div>
                                    </summary>
                                    <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4">
                                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                                            <div class="lg:col-span-7 flex items-start gap-4">
                                                <div class="shrink-0 h-14 w-20 rounded-xl overflow-hidden ring-1 ring-white/20 bg-white/10">
                                                    <img src="https://images.unsplash.com/photo-1519741497674-611481863552?w=320&amp;h=240&amp;fit=crop" alt="Wedding preview" class="h-full w-full object-cover" style="">
                                                </div>
                                                <div class="">
                                                    <h3 class="text-white font-medium tracking-tight font-geist">Your perfect day, captured perfectly</h3>
                                                    <p class="text-neutral-300 text-sm mt-1 font-geist">Full-day wedding coverage including ceremony, reception, portraits, and candid moments that tell your unique love story.</p>
                                                </div>
                                            </div>
                                            <div class="lg:col-span-5">
                                                <div class="flex items-center justify-between">
                                                    <p class="text-white/80 text-xs font-geist">Includes</p>
                                                </div>
                                                <div class="mt-3 flex flex-wrap gap-2">
                                                    <span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">8-10 hours</span>
                                                    <span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Online gallery</span>
                                                    <span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Edited photos</span>
                                                    <span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">USB drive</span>
                                                    <span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Print release</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-6">
                                            <a href="#" class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-amber-400 transition-colors font-geist">
                                                Book Consultation
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                                            </a>
                                        </div>
                                    </div>
                                </details>

                                <!-- Portrait Sessions -->
                                <details class="group">
                                    <summary class="list-none">
                                        <div class="flex items-center gap-4 justify-between border-t border-b border-white/10 p-4 sm:p-5">
                                            <div class="text-white/50 text-[11px] font-geist">(002)</div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-white font-medium tracking-tight font-geist">Portrait Sessions</p>
                                            </div>
                                            <div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4 group-open:hidden" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus h-4 w-4 hidden group-open:block" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path></svg>
                                            </div>
                                        </div>
                                    </summary>
                                    <div class="p-4 sm:p-6">
                                        <p class="text-neutral-300 text-sm max-w-3xl font-geist">Individual, couple, family, and lifestyle portraits that capture your personality and connections in beautiful, natural settings.</p>
                                    </div>
                                </details>

                                <!-- Event Photography -->
                                <details class="group">
                                    <summary class="list-none">
                                        <div class="flex items-center gap-4 justify-between border-t border-b border-white/10 p-4 sm:p-5">
                                            <div class="text-white/50 text-[11px] font-geist">(003)</div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-white font-medium tracking-tight font-geist">Event Photography</p>
                                            </div>
                                            <div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4 group-open:hidden" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus h-4 w-4 hidden group-open:block" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path></svg>
                                            </div>
                                        </div>
                                    </summary>
                                    <div class="p-4 sm:p-6">
                                        <p class="text-neutral-300 text-sm max-w-3xl font-geist">Corporate events, celebrations, and special occasions documented with professionalism and artistic flair.</p>
                                    </div>
                                </details>

                                <!-- Commercial Work -->
                                <details class="group">
                                    <summary class="list-none">
                                        <div class="flex items-center gap-4 justify-between border-t border-white/10 p-4 sm:p-5">
                                            <div class="text-white/50 text-[11px] font-geist">(004)</div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-white font-medium tracking-tight font-geist">Commercial Photography</p>
                                            </div>
                                            <div class="shrink-0 h-8 w-8 rounded-full bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-white">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4 group-open:hidden" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus h-4 w-4 hidden group-open:block" style="stroke-width: 1.5;"><path d="M5 12h14" class=""></path></svg>
                                            </div>
                                        </div>
                                    </summary>
                                    <div class="p-4 sm:p-6">
                                        <p class="text-neutral-300 text-sm max-w-3xl font-geist">Professional headshots, product photography, and brand imagery that elevates your business presence.</p>
                                    </div>
                                </details>
                            </div>
                        </div>
                    </div>
                </section>