<section
    class="relative w-full lg:w-[35%] pt-24 lg:pt-0 py-0 px-6 lg:px-10 lg:pb-8 flex flex-col lg:min-h-screen lg:justify-between space-y-6 lg:space-y-0 z-20 bg-white">
    <div class="flex flex-col justify-center flex-1 space-y-6 lg:pt-48">
        @if ($totalMembersCount > 0)
            <header class="flex flex-wrap items-center gap-4">
                <div class="flex items-center">
                    @foreach ($latestMembers as $member)
                        <figure
                            class="border-2 border-home-background w-8 h-8 lg:w-10 lg:h-10 rounded-full overflow-hidden shadow-sm {{ !$loop->first ? '-ms-2' : '' }}">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($member->user->name ?? $member->name) }}&background=random&color=fff"
                                alt="{{ $member->user->name ?? $member->name }}" class="w-full h-full object-cover">
                        </figure>
                    @endforeach
                </div>

                <div class="border border-home-primary/30 py-1 px-3 rounded-full text-sm lg:text-lg text-home-primary">
                    <span class="text-home-primary font-bold">{{ $totalMembersCount }}</span>+ Customer Mempercayai Kami
                </div>
            </header>
        @endif

        <h1 class="text-home-foreground text-4xl lg:text-6xl leading-tight text-start font-bold">
            Temukan<br>
            <span class="italic font-serif font-light text-home-primary">
                signature scent-mu
            </span> hari ini
        </h1>

        <p class="text-lg w-[90%] lg:w-full lg:text-lg text-home-foreground/80">
            Setiap parfum punya cerita. Pilih aroma yang sesuai dengan gaya hidupmu dan kesan yang ingin kamu tampilkan.
        </p>

        <div class="flex items-center">
            <a href="{{ route('product.index') }}" wire:navigate
                class="bg-home-primary text-home-background py-3 px-6 rounded-full hover:shadow-lg hover:shadow-home-primary/30 transition-all font-medium">
                Jelajahi Toko
            </a>
            <span class="w-8 h-[2px] bg-home-primary/20"></span>
            <button
                class="flex items-center justify-center w-12 h-12 border border-home-primary rounded-full hover:bg-home-background transition-colors group bg-transparent">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                    stroke="currentColor" class="w-5 h-5 text-home-primary">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
                </svg>
            </button>
        </div>
    </div>
    @include('livewire.home.partials.jumbotron.testimonial')
</section>
