@props([
    'totalMembersCount' => 0,
    'formattedTotalMembersCount' => '',
    'latestMembers' => [],
])

<section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">

    <div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">

            <div class="space-y-8">
                <h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-home-background">
                    Jadi Bagian Keluarga Eksklusif Kami! 👑✨
                </h2>
                <p class="text-home-background/40 text-lg leading-relaxed max-w-md">
                    Dapetin akses VIP ke koleksi terbaru, diskon spesial, dan tips wangi-wangian eksklusif cuma buat
                    kamu! 😉🎉
                </p>

                <form onsubmit="event.preventDefault();" class="flex flex-col sm:flex-row gap-4 w-full">
                    <button type="submit"
                        class="px-8 py-4 rounded-xl bg-home-background text-home-foreground font-bold hover:bg-home-secondary hover:text-home-foreground transition-all duration-300 shadow-lg shadow-home-background/20 whitespace-nowrap">
                        Join Sekarang Yuk! 🚀
                    </button>
                </form>

                <div class="flex items-center gap-4 text-sm text-home-background/40">
                    <div class="flex -space-x-2">
                        @foreach ($latestMembers as $member)
                            <img class="w-8 h-8 rounded-full border-2 border-white" src="{{ $member['avatar_url'] }}"
                                alt="{{ $member['name'] }}">
                        @endforeach
                    </div>
                    <p>Gabung sama <span
                            class="text-home-background font-bold">{{ $formattedTotalMembersCount }}+</span>
                        parfum lovers lainnya! 💕</p>
                </div>
            </div>

            <div class="relative hidden lg:block">
                <div
                    class="w-full h-full min-h-[300px] bg-gradient-to-tr from-home-secondary/30 to-home-primary/10 rounded-full blur-3xl absolute inset-0">
                </div>

                <div
                    class="relative bg-home-foreground text-white rounded-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-500 shadow-2xl">
                    <div class="flex items-center justify-between mb-8">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-home-primary rounded-full flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
                                    </path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-white">Member Card</h3>
                                <p class="text-xs text-gray-400">Exclusive Access</p>
                            </div>
                        </div>
                        <img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
                            class="w-8 h-8 opacity-80 brightness-0 invert">
                    </div>
                    <div class="space-y-3">
                        <div class="h-2 w-2/3 bg-white/10 rounded-full"></div>
                        <div class="h-2 w-1/2 bg-white/10 rounded-full"></div>
                    </div>
                    <div class="mt-8 flex justify-between items-end">
                        <div class="text-xs text-gray-400">Valid thru<br><span class="text-white font-mono">12/28</span>
                        </div>
                        <div class="text-2xl font-bold text-white tracking-widest">•••• 8892</div>
                    </div>

                    <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl pointer-events-none">
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>