@extends('website.layouts.app')

@section('content')
    @include('website.components.header')

    <main>
        <section class="relative min-h-screen lg:min-h-screen flex items-start lg:items-center pt-24 md:pt-20 pb-10 md:pb-0 overflow-x-hidden bg-cream">
            <div class="absolute top-0 right-0 w-1/2 h-full opacity-5 pointer-events-none">
                <svg viewBox="0 0 200 200" class="w-full h-full fill-teal-deep">
                    <path d="M45.7,-76.3C58.9,-69.3,69.1,-55.6,76.3,-41.2C83.5,-26.8,87.7,-11.7,85.8,2.8C83.9,17.3,75.9,31.2,66.4,43.6C56.9,56,45.9,66.9,33.1,73.3C20.3,79.7,5.7,81.6,-8.2,79.8C-22.1,78,-35.3,72.5,-47.2,64.2C-59.1,55.9,-69.7,44.8,-76.8,31.7C-83.9,18.6,-87.5,3.5,-84.6,-10.2C-81.7,-23.9,-72.3,-36.2,-61.6,-45.8C-50.9,-55.4,-38.9,-62.3,-26.7,-69.8C-14.5,-77.3,-2.1,-85.4,11.2,-83.4C24.5,-81.4,49,-69.3,45.7,-76.3Z" transform="translate(100 100)"></path>
                </svg>
            </div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
                <div class="z-10">
                    <div class="inline-block px-4 py-1.5 rounded-full bg-amber-gold/10 text-amber-dark font-semibold text-sm mb-6 border border-amber-gold/20">✨ Sri Lanka's #1 Digital Savings Card</div>
                    <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-heading font-bold text-teal-deep leading-tight mb-5 md:mb-6">Smarter Savings. <br><span class="text-amber-gold">Better Living.</span></h1>
                    <p class="text-base sm:text-lg md:text-xl text-gray-600 mb-8 max-w-lg leading-relaxed">Unlock exclusive deals at 500+ partner locations across Sri Lanka. Dining, travel, shopping, and more. All in one digital card.</p>

                    <div class="flex flex-col sm:flex-row gap-4 items-center sm:items-start justify-center lg:justify-start">
                        <a href="{{ route('login.members') }}" class="w-full max-w-xs sm:max-w-none sm:w-auto flex items-center justify-center gap-2 bg-amber-gold hover:bg-amber-dark text-white px-8 py-4 rounded-full font-bold text-base sm:text-lg transition-all duration-300 shadow-xl hover:shadow-amber-gold/40 transform hover:-translate-y-1">
                            Get Your Card
                            <i data-lucide="arrow-right" class="w-5 h-5"></i>
                        </a>
                        <a href="#how-it-works" class="w-full max-w-xs sm:max-w-none sm:w-auto flex items-center justify-center gap-2 text-teal-deep hover:text-amber-gold px-8 py-4 rounded-full font-semibold text-base sm:text-lg transition-colors duration-300">
                            <i data-lucide="play-circle" class="w-5 h-5"></i>
                            See How It Works
                        </a>
                    </div>

                    <div class="mt-8 md:mt-10 mb-6 sm:mb-0 flex flex-wrap items-center gap-4 text-sm text-gray-500">
                        <div class="flex -space-x-2">
                            @for ($i = 1; $i <= 4; $i++)
                                <!-- <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-200 overflow-hidden">
                                    <div class="w-full h-full bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400"></div>
                                </div> -->
                            @endfor
                        </div>
                        <p>Join <span class="font-bold text-teal-deep">100,000+</span> members today</p>
                    </div>
                </div>

                <div class="relative mt-20 sm:mt-8 lg:mt-0 h-[320px] sm:h-[400px] md:h-[500px] flex items-center justify-center">
                    <div class="relative w-full max-w-md aspect-[3/4] rounded-3xl overflow-hidden shadow-2xl border border-teal-deep/10 bg-white">
                        @foreach (range(1, 5) as $poster)
                            <div class="hero-poster-slide absolute inset-0 transition-opacity duration-700 ease-in-out {{ $poster === 1 ? 'opacity-100 z-10' : 'opacity-0 pointer-events-none' }}">
                                <img src="{{ asset('images/posters/poster-' . $poster . '.svg') }}" alt="Poster {{ $poster }}" class="w-full h-full object-contain bg-white" loading="lazy">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        <!-- <section class="py-10 sm:py-12 bg-white border-b border-gray-100 overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8 text-center">
                <p class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Trusted by 500+ Partners Across Sri Lanka</p>
            </div>
            <div class="relative w-full overflow-hidden">
                <div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-white to-transparent z-10"></div>
                <div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-white to-transparent z-10"></div>
                <div class="flex items-center gap-10 sm:gap-16 whitespace-nowrap animate-marquee">
                    @foreach (['Odel', 'Keells', 'Cargills', 'Hilton Colombo', 'Jetwing', 'Spa Ceylon', 'Fashion Bug', 'Softlogic', 'Singer', 'Laugfs', 'Arpico', 'Hameedia', 'Glomark', 'Cool Planet', 'Nolimit', 'Odel', 'Keells', 'Cargills', 'Hilton Colombo', 'Jetwing', 'Spa Ceylon', 'Fashion Bug', 'Softlogic', 'Singer', 'Laugfs', 'Arpico', 'Hameedia', 'Glomark', 'Cool Planet', 'Nolimit'] as $partner)
                        <div class="text-xl sm:text-2xl font-heading font-bold text-gray-300 hover:text-teal-deep transition-colors duration-300 cursor-default select-none">{{ $partner }}</div>
                    @endforeach
                </div>
            </div>
        </section> -->

        <section id="how-it-works" class="py-16 sm:py-20 md:py-24 bg-white relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12 sm:mb-16 md:mb-20">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-heading font-bold text-teal-deep mb-4">How It Works</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-base sm:text-lg">Start saving in three simple steps. No complicated points systems, just direct discounts.</p>
                </div>

                <div class="relative grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="hidden lg:block absolute top-1/2 left-0 w-full h-0.5 border-t-2 border-dashed border-gray-200 -z-10 transform -translate-y-1/2"></div>

                    <div class="relative bg-white rounded-2xl p-6 sm:p-8 border border-gray-100 shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden group">
                        <div class="absolute -right-4 -bottom-8 text-[120px] font-heading font-bold text-gray-50 opacity-50 select-none pointer-events-none">01</div>
                        <div class="relative z-10">
                            <div class="w-16 h-16 rounded-2xl bg-teal-50 text-teal-deep flex items-center justify-center mb-6 shadow-sm"><i data-lucide="user-plus" class="w-8 h-8"></i></div>
                            <h3 class="text-2xl font-heading font-bold text-teal-deep mb-3">Sign Up</h3>
                            <p class="text-gray-600 leading-relaxed">Create your free account in seconds. No credit card required to start exploring.</p>
                        </div>
                    </div>

                    <div class="relative bg-white rounded-2xl p-6 sm:p-8 border border-gray-100 shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden group">
                        <div class="absolute -right-4 -bottom-8 text-[120px] font-heading font-bold text-gray-50 opacity-50 select-none pointer-events-none">02</div>
                        <div class="relative z-10">
                            <div class="w-16 h-16 rounded-2xl bg-amber-50 text-amber-dark flex items-center justify-center mb-6 shadow-sm"><i data-lucide="credit-card" class="w-8 h-8"></i></div>
                            <h3 class="text-2xl font-heading font-bold text-teal-deep mb-3">Get Digital Card</h3>
                            <p class="text-gray-600 leading-relaxed">Receive your unique membership card instantly on your phone via email or SMS.</p>
                        </div>
                    </div>

                    <div class="relative bg-white rounded-2xl p-6 sm:p-8 border border-gray-100 shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden group">
                        <div class="absolute -right-4 -bottom-8 text-[120px] font-heading font-bold text-gray-50 opacity-50 select-none pointer-events-none">03</div>
                        <div class="relative z-10">
                            <div class="w-16 h-16 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center mb-6 shadow-sm"><i data-lucide="sparkles" class="w-8 h-8"></i></div>
                            <h3 class="text-2xl font-heading font-bold text-teal-deep mb-3">Save Everywhere</h3>
                            <p class="text-gray-600 leading-relaxed">Show your card at 500+ partner locations to unlock exclusive discounts instantly.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="partners" class="py-16 sm:py-20 md:py-24 bg-cream relative">
            <div class="absolute top-0 left-0 w-64 h-64 opacity-[0.03] pointer-events-none rotate-45">
                <svg viewBox="0 0 100 100" class="w-full h-full fill-teal-deep"><path d="M50 0 C60 30 90 40 100 50 C90 60 60 70 50 100 C40 70 10 60 0 50 C10 40 40 30 50 0 Z"></path></svg>
            </div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12 sm:mb-16">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-heading font-bold text-teal-deep mb-4">Where You Can Save</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-base sm:text-lg">From fine dining in Colombo to luxury villas in Galle, our partners cover every aspect of your lifestyle.</p>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach ([
                        ['utensils-crossed', 'Dining', 'Restaurants, cafes & food delivery', 'bg-orange-100 text-orange-600'],
                        ['plane', 'Travel', 'Hotels, flights & tour packages', 'bg-blue-100 text-blue-600'],
                        ['heart', 'Health & Wellness', 'Spas, gyms & medical services', 'bg-red-100 text-red-600'],
                        ['shopping-bag', 'Shopping', 'Fashion, electronics & lifestyle', 'bg-purple-100 text-purple-600'],
                        ['music', 'Entertainment', 'Movies, events & attractions', 'bg-pink-100 text-pink-600'],
                        ['graduation-cap', 'Education', 'Courses, workshops & certifications', 'bg-green-100 text-green-600']
                    ] as $cat)
                        <div class="bg-white rounded-xl p-6 sm:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 group cursor-pointer">
                            <div class="w-14 h-14 rounded-full {{ $cat[3] }} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"><i data-lucide="{{ $cat[0] }}" class="w-7 h-7"></i></div>
                            <h3 class="text-xl font-bold text-teal-deep mb-2">{{ $cat[1] }}</h3>
                            <p class="text-gray-500 mb-6">{{ $cat[2] }}</p>
                            <div class="flex items-center text-amber-gold font-semibold group-hover:text-amber-dark transition-colors">View Partners <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="py-16 sm:py-20 md:py-24 bg-teal-deep text-white overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 sm:gap-12 lg:gap-16 items-center">
                    <div>
                        <h2 class="text-3xl sm:text-4xl md:text-5xl font-heading font-bold mb-5 sm:mb-6">Your Digital <br><span class="text-amber-gold">Membership Card</span></h2>
                        <p class="text-teal-100/80 text-base sm:text-lg mb-8 sm:mb-10 leading-relaxed">Carry your savings in your pocket. No plastic, no waiting. Your digital card is instantly active and ready to use at all partner locations.</p>
                        <div class="space-y-8">
                            <div class="flex items-start gap-4"><div class="bg-teal-light/20 p-3 rounded-lg"><i data-lucide="wifi" class="w-6 h-6 text-amber-gold"></i></div><div><h3 class="text-xl font-bold mb-1">Contactless & Secure</h3><p class="text-teal-100/60">Show your card on your phone. Safe, hygienic, and always with you.</p></div></div>
                            <div class="flex items-start gap-4"><div class="bg-teal-light/20 p-3 rounded-lg"><i data-lucide="lock" class="w-6 h-6 text-amber-gold"></i></div><div><h3 class="text-xl font-bold mb-1">Unique Member Code</h3><p class="text-teal-100/60">Every card has a unique identifier for secure verification at outlets.</p></div></div>
                            <div class="flex items-start gap-4"><div class="bg-teal-light/20 p-3 rounded-lg"><i data-lucide="zap" class="w-6 h-6 text-amber-gold"></i></div><div><h3 class="text-xl font-bold mb-1">Instant Activation</h3><p class="text-teal-100/60">Start saving immediately after signup. No shipping delays.</p></div></div>
                        </div>
                    </div>
                    <div class="relative flex justify-center perspective-1000">
                        <div class="absolute inset-0 bg-amber-gold/20 blur-[100px] rounded-full"></div>
                        <div class="relative w-full max-w-sm sm:max-w-lg aspect-[1.5/1] sm:aspect-[1.586/1] preserve-3d">
                            <div class="w-full h-full bg-gradient-to-br from-teal-900 to-black rounded-2xl p-4 sm:p-8 flex flex-col justify-between border border-amber-gold/30 shadow-2xl relative overflow-hidden">
                                <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
                                <div class="absolute top-0 -left-[100%] w-[50%] h-full bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12 animate-shine"></div>
                                <div class="relative flex justify-between items-start z-10">
                                    <div>
                                        <h3 class="text-white font-heading font-bold text-lg sm:text-2xl tracking-wide">SaveSmart<span class="text-amber-gold">.lk</span></h3>
                                        <p class="text-teal-100/60 text-xs uppercase tracking-widest mt-1">Premium Member</p>
                                    </div>
                                    <span class="bg-[#F5A623] text-[#0d4a4a] text-[10px] font-bold px-2 py-1 rounded">PREMIUM</span>
                                </div>
                                <img src="{{ asset('images/barcode.png') }}" alt="Barcode" class="relative w-20 h-14 sm:w-32 sm:h-24 object-contain">
                                <div class="relative z-10">
                                    <p class="text-white/90 font-mono text-[13px] sm:text-lg md:text-xl tracking-widest mb-1 sm:mb-2 shadow-black drop-shadow-md">SS-2024-8821-1234</p>
                                    <div class="flex justify-between items-end">
                                        <div class="flex items-center gap-2 sm:gap-3">
                                            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white/20 border border-white/30 flex items-center justify-center text-[10px] sm:text-xs font-bold">
                                                K
                                            </div>
                                            <div>
                                                <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Card Holder</p>
                                                <p class="text-white font-medium tracking-wide text-xs sm:text-base">KASUN PERERA</p>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Status</p>
                                            <p class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border bg-green-500/20 text-green-300 border-green-400/40">LIVE</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative z-10 grid grid-cols-3 gap-2 sm:gap-3 border-t border-white/10 pt-2 sm:pt-3 mt-1 sm:mt-2 text-[8px] sm:text-[10px]">
                                    <div>
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Package</p>
                                        <p class="text-white font-semibold">Membership - 6 Month</p>
                                    </div>
                                    <div>
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Purchased</p>
                                        <p class="text-white font-semibold">12 Jan 2026</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-teal-100/60 uppercase tracking-wider mb-1">Expires</p>
                                        <p class="text-white font-semibold">12 Jul 2026</p>
                                    </div>
                                </div>
                                <div class="hidden">
                                        <div>
                                            <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Card Holder</p>
                                            <p class="text-white font-medium tracking-wide">KASUN PERERA</p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-teal-100/60 text-[10px] uppercase tracking-wider mb-0.5">Expires</p>
                                            <p class="text-white font-medium tracking-wide">12/26</p>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="benefits" class="py-16 sm:py-20 bg-gradient-to-br from-amber-gold to-amber-dark text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:12px_12px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 text-center divide-y md:divide-y-0 md:divide-x divide-white/20">
                    <div class="pt-8 md:pt-0 px-4"><div class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-2">500+</div><div class="text-amber-100 font-medium text-base sm:text-lg">Partner Locations</div></div>
                    <div class="pt-8 md:pt-0 px-4"><div class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-2">50%</div><div class="text-amber-100 font-medium text-base sm:text-lg">Maximum Savings</div></div>
                    <div class="pt-8 md:pt-0 px-4"><div class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-2">100K+</div><div class="text-amber-100 font-medium text-base sm:text-lg">Happy Members</div></div>
                </div>

                <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 sm:p-8 md:p-12 border border-white/20">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach (['No hidden fees or monthly charges', 'Instant digital delivery via email', 'Works island-wide including Jaffna & Trinco', '24/7 dedicated customer support', 'Exclusive birthday rewards', 'Family add-on cards available'] as $benefit)
                            <div class="flex items-center gap-3"><i data-lucide="check-circle-2" class="w-6 h-6 text-teal-deep flex-shrink-0"></i><span class="text-base sm:text-lg font-medium">{{ $benefit }}</span></div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        <section id="testimonials" class="py-16 sm:py-20 md:py-24 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12 sm:mb-16"><h2 class="text-3xl sm:text-4xl md:text-5xl font-heading font-bold text-teal-deep mb-4">What Our Members Say</h2><p class="text-gray-600 text-sm sm:text-base">Join thousands of satisfied Sri Lankans saving every day.</p></div>

                <div class="relative max-w-4xl mx-auto">
                    <div class="overflow-hidden relative min-h-[300px] md:min-h-[250px]">
                        <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-4 testimonial-slide transition-opacity duration-700 ease-in-out opacity-100 z-10">
                            <i data-lucide="quote" class="w-12 h-12 text-amber-gold/30 mb-6"></i>
                            <p class="text-xl sm:text-2xl md:text-3xl font-heading text-teal-deep mb-8 leading-relaxed italic">"SaveSmart has completely changed how I dine out. I save at least Rs. 5,000 every month on family dinners alone!"</p>
                            <div class="flex items-center gap-1 mb-2">@for ($i = 0; $i < 5; $i++)<i data-lucide="star" class="w-5 h-5 text-amber-gold fill-amber-gold"></i>@endfor</div>
                            <div><h4 class="font-bold text-lg text-teal-deep">Amaya S.</h4><p class="text-gray-500 text-sm">Colombo</p></div>
                        </div>
                        <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-4 testimonial-slide transition-opacity duration-700 ease-in-out opacity-0 pointer-events-none">
                            <i data-lucide="quote" class="w-12 h-12 text-amber-gold/30 mb-6"></i>
                            <p class="text-xl sm:text-2xl md:text-3xl font-heading text-teal-deep mb-8 leading-relaxed italic">"The travel deals are incredible. Got 40% off my Ella trip accommodation. The card paid for itself instantly."</p>
                            <div class="flex items-center gap-1 mb-2">@for ($i = 0; $i < 5; $i++)<i data-lucide="star" class="w-5 h-5 text-amber-gold fill-amber-gold"></i>@endfor</div>
                            <div><h4 class="font-bold text-lg text-teal-deep">Ruwan P.</h4><p class="text-gray-500 text-sm">Kandy</p></div>
                        </div>
                        <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-4 testimonial-slide transition-opacity duration-700 ease-in-out opacity-0 pointer-events-none">
                            <i data-lucide="quote" class="w-12 h-12 text-amber-gold/30 mb-6"></i>
                            <p class="text-xl sm:text-2xl md:text-3xl font-heading text-teal-deep mb-8 leading-relaxed italic">"As a student, the education discounts have been a lifesaver. Best investment ever for my budget."</p>
                            <div class="flex items-center gap-1 mb-2">@for ($i = 0; $i < 5; $i++)<i data-lucide="star" class="w-5 h-5 text-amber-gold fill-amber-gold"></i>@endfor</div>
                            <div><h4 class="font-bold text-lg text-teal-deep">Dinusha K.</h4><p class="text-gray-500 text-sm">Galle</p></div>
                        </div>
                        <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-4 testimonial-slide transition-opacity duration-700 ease-in-out opacity-0 pointer-events-none">
                            <i data-lucide="quote" class="w-12 h-12 text-amber-gold/30 mb-6"></i>
                            <p class="text-xl sm:text-2xl md:text-3xl font-heading text-teal-deep mb-8 leading-relaxed italic">"Premium membership paid for itself in the first week. Absolutely worth it for the exclusive shopping offers."</p>
                            <div class="flex items-center gap-1 mb-2">@for ($i = 0; $i < 5; $i++)<i data-lucide="star" class="w-5 h-5 text-amber-gold fill-amber-gold"></i>@endfor</div>
                            <div><h4 class="font-bold text-lg text-teal-deep">Tharushi M.</h4><p class="text-gray-500 text-sm">Negombo</p></div>
                        </div>
                    </div>

                    <div class="flex justify-center gap-4 mt-8">
                        <button id="testimonialPrev" class="p-2 rounded-full border border-teal-deep/20 hover:bg-teal-deep hover:text-white transition-colors" type="button"><i data-lucide="chevron-left" class="w-6 h-6"></i></button>
                        <div class="flex items-center gap-2">
                            <button class="testimonial-dot w-2.5 h-2.5 rounded-full bg-teal-deep" data-index="0" type="button"></button>
                            <button class="testimonial-dot w-2.5 h-2.5 rounded-full bg-gray-300" data-index="1" type="button"></button>
                            <button class="testimonial-dot w-2.5 h-2.5 rounded-full bg-gray-300" data-index="2" type="button"></button>
                            <button class="testimonial-dot w-2.5 h-2.5 rounded-full bg-gray-300" data-index="3" type="button"></button>
                        </div>
                        <button id="testimonialNext" class="p-2 rounded-full border border-teal-deep/20 hover:bg-teal-deep hover:text-white transition-colors" type="button"><i data-lucide="chevron-right" class="w-6 h-6"></i></button>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" class="py-16 sm:py-20 md:py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12 sm:mb-16"><h2 class="text-3xl sm:text-4xl md:text-5xl font-heading font-bold text-teal-deep mb-4">Choose Your Plan</h2><p class="text-gray-600 text-sm sm:text-base">Pick the package that fits your lifestyle and start saving today.</p></div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                    <div class="bg-gray-50 rounded-2xl p-6 sm:p-8 border border-gray-200 flex flex-col">
                        <div class="mb-6"><h3 class="text-2xl font-bold text-teal-deep mb-2">1 Month</h3><div class="flex items-baseline"><span class="text-4xl font-bold text-gray-900">Rs. 499</span><span class="text-gray-500 ml-2">/month</span></div><p class="text-gray-500 mt-2">Perfect for trying SaveSmart</p></div>
                        <ul class="space-y-4 mb-8 flex-1">
                            @foreach (['Digital membership card', 'Access to partner deals', 'Priority support', 'Same member benefits'] as $item)
                                <li class="flex items-start gap-3 text-gray-700"><i data-lucide="check" class="w-5 h-5 text-teal-deep shrink-0"></i><span>{{ $item }}</span></li>
                            @endforeach
                        </ul>
                        <a href="{{ route('login.members') }}" class="w-full py-3 text-center rounded-lg border-2 border-teal-deep text-teal-deep font-bold hover:bg-teal-deep hover:text-white transition-colors">Choose 1 Month</a>
                    </div>

                    <div class="bg-white rounded-2xl p-6 sm:p-8 border-2 border-amber-gold shadow-xl relative flex flex-col transform md:-translate-y-4">
                        <div class="absolute top-0 right-0 bg-amber-gold text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
                        <div class="mb-6"><h3 class="text-2xl font-bold text-teal-deep mb-2">6 Month</h3><div class="flex items-baseline"><span class="text-4xl font-bold text-gray-900">Rs. 2,499</span><span class="text-gray-500 ml-2">/6 months</span></div><p class="text-amber-600 font-medium mt-2 text-sm">Best value for regular savers</p></div>
                        <ul class="space-y-4 mb-8 flex-1">
                            @foreach (['Digital membership card', 'Access to partner deals', 'Priority support', 'Same member benefits'] as $item)
                                <li class="flex items-start gap-3 text-gray-700"><i data-lucide="check" class="w-5 h-5 text-amber-gold shrink-0"></i><span @if($loop->first) class="font-medium" @endif>{{ $item }}</span></li>
                            @endforeach
                        </ul>
                        <a href="{{ route('login.members') }}" class="w-full py-3 text-center rounded-lg bg-amber-gold text-white font-bold hover:bg-amber-dark shadow-lg hover:shadow-amber-gold/30 transition-all">Choose 6 Month</a>
                    </div>

                    <div class="bg-gray-50 rounded-2xl p-8 border border-gray-200 flex flex-col">
                        <div class="mb-6"><h3 class="text-2xl font-bold text-teal-deep mb-2">Annual</h3><div class="flex items-baseline"><span class="text-4xl font-bold text-gray-900">Rs. 4,999</span><span class="text-gray-500 ml-2">/year</span></div><p class="text-gray-500 mt-2">Maximum savings for the full year</p></div>
                        <ul class="space-y-4 mb-8 flex-1">
                            @foreach (['Digital membership card', 'Access to partner deals', 'Priority support', 'Same member benefits'] as $item)
                                <li class="flex items-start gap-3 text-gray-700"><i data-lucide="check" class="w-5 h-5 text-teal-deep shrink-0"></i><span>{{ $item }}</span></li>
                            @endforeach
                        </ul>
                        <a href="{{ route('login.members') }}" class="w-full py-3 text-center rounded-lg border-2 border-teal-deep text-teal-deep font-bold hover:bg-teal-deep hover:text-white transition-colors">Choose Annual</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 sm:py-20 md:py-24 bg-cream text-gray-900 relative overflow-hidden">
            <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-teal-deep/10 to-transparent pointer-events-none"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 sm:gap-12 lg:gap-16 items-center">
                    <div>
                        <div class="inline-flex items-center px-4 py-1.5 rounded-full bg-amber-gold/15 text-amber-gold font-semibold text-sm mb-6 border border-amber-gold/30">Comming Soon</div>
                        <h2 class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-6 leading-tight">Take Your Savings <br><span class="text-amber-gold italic">Everywhere</span></h2>
                        <p class="text-gray-600 text-base sm:text-lg md:text-xl mb-8 sm:mb-10 max-w-2xl leading-relaxed">Download the SaveSmart app to access deals on the go, track your savings, and find partners near you with our interactive map.</p>

                        <div class="flex flex-col sm:flex-row gap-4 mb-12">
                            <button class="w-full sm:w-auto flex items-center gap-3 bg-white text-black px-6 py-3.5 rounded-xl hover:bg-gray-100 transition-colors duration-300" type="button"><i data-lucide="download" class="w-6 h-6"></i><div class="text-left"><div class="text-[10px] uppercase font-bold tracking-wider">Download on the</div><div class="text-lg font-bold leading-none">App Store</div></div></button>
                            <button class="w-full sm:w-auto flex items-center gap-3 bg-transparent border border-teal-deep/40 text-teal-deep px-6 py-3.5 rounded-xl hover:bg-teal-deep/5 transition-colors duration-300" type="button"><i data-lucide="smartphone" class="w-6 h-6"></i><div class="text-left"><div class="text-[10px] uppercase font-bold tracking-wider">Get it on</div><div class="text-lg font-bold leading-none">Google Play</div></div></button>
                        </div>

                        <div class="flex items-center gap-4">
                            <!-- <div class="flex -space-x-3">@for ($i = 0; $i < 4; $i++)<div class="w-10 h-10 rounded-full border-2 border-gray-900 bg-gray-700"></div>@endfor</div> -->
                            <div class="flex flex-col">
                                <div class="flex gap-1 text-amber-gold mb-1">@for ($i = 0; $i < 5; $i++)<i data-lucide="star" class="w-4 h-4 fill-amber-gold"></i>@endfor</div>
                                <p class="text-sm text-gray-500"><span class="font-bold text-teal-deep">4.9/5</span> from 10k+ reviews</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-center lg:justify-end">
                        <div class="relative w-full max-w-[320px] h-[580px] sm:h-[650px] bg-gray-900 rounded-[40px] border-[8px] border-gray-900 shadow-2xl overflow-hidden">
                            <div class="absolute top-0 left-0 right-0 h-8 bg-white z-20 flex justify-between px-6 items-center text-[10px] font-medium text-gray-900"><span>9:41</span><div class="flex gap-1"><div class="w-3 h-3 bg-gray-900 rounded-full opacity-20"></div><div class="w-3 h-3 bg-gray-900 rounded-full opacity-20"></div></div></div>
                            <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-gray-900 rounded-b-2xl z-20"></div>

                            <div class="w-full h-full bg-white pt-12 px-5 pb-6 flex flex-col overflow-y-auto no-scrollbar">
                                <h3 class="font-heading font-bold text-xl text-teal-deep mb-6">My Membership</h3>
                                <div class="w-full aspect-[1.58/1] bg-gradient-to-br from-teal-deep to-teal-dark rounded-xl p-5 text-white shadow-lg mb-8 relative overflow-hidden">
                                    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:12px_12px]"></div>
                                    <div class="relative z-10 flex justify-between items-start mb-8"><span class="font-heading font-bold text-lg">SaveSmart.lk</span><span class="text-[10px] font-bold border border-white/30 px-1.5 py-0.5 rounded bg-white/10">PREMIUM</span></div>
                                    <div class="relative z-10 mt-auto"><p class="text-[9px] text-teal-100 uppercase tracking-wider mb-0.5">MEMBER NAME</p><p class="font-medium text-lg">Sarah Fernando</p></div>
                                </div>

                                <div class="flex-1">
                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Recent Savings</h4>
                                    <div class="space-y-4">
                                        @for ($i = 0; $i < 3; $i++)
                                            <div class="flex items-center justify-between p-3 rounded-xl bg-gray-50 border border-gray-100">
                                                <div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600"><i data-lucide="shopping-bag" class="w-5 h-5"></i></div><div><p class="font-bold text-sm text-gray-900">Odel Store</p><p class="text-[10px] text-gray-500">Today, 10:30 AM</p></div></div>
                                                <span class="font-bold text-teal-deep text-sm bg-teal-50 px-2 py-1 rounded">- LKR 450</span>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('website.components.footer')
@endsection

@push('scripts')
<script>
    (function () {
        const slides = document.querySelectorAll('.testimonial-slide');
        const dots = document.querySelectorAll('.testimonial-dot');
        const prevBtn = document.getElementById('testimonialPrev');
        const nextBtn = document.getElementById('testimonialNext');
        let current = 0;
        let timer;

        function showSlide(index) {
            slides.forEach(function (slide, i) {
                slide.classList.toggle('opacity-100', i === index);
                slide.classList.toggle('z-10', i === index);
                slide.classList.toggle('opacity-0', i !== index);
                slide.classList.toggle('pointer-events-none', i !== index);
            });
            dots.forEach(function (dot, i) {
                dot.classList.toggle('bg-teal-deep', i === index);
                dot.classList.toggle('bg-gray-300', i !== index);
            });
            current = index;
            if (window.lucide) {
                window.lucide.createIcons();
            }
        }

        function nextSlide() {
            showSlide((current + 1) % slides.length);
        }

        function prevSlide() {
            showSlide((current - 1 + slides.length) % slides.length);
        }

        function startAuto() {
            timer = setInterval(nextSlide, 8000);
        }

        function restartAuto() {
            clearInterval(timer);
            startAuto();
        }

        if (slides.length) {
            if (prevBtn) {
                prevBtn.addEventListener('click', function () {
                    prevSlide();
                    restartAuto();
                });
            }
            if (nextBtn) {
                nextBtn.addEventListener('click', function () {
                    nextSlide();
                    restartAuto();
                });
            }
            dots.forEach(function (dot, index) {
                dot.addEventListener('click', function () {
                    showSlide(index);
                    restartAuto();
                });
            });
            showSlide(0);
            startAuto();
        }

        const heroPosterSlides = document.querySelectorAll('.hero-poster-slide');
        const heroPosterDots = document.querySelectorAll('.hero-poster-dot');
        let currentPoster = 0;
        let heroPosterTimer;

        function showPoster(index) {
            heroPosterSlides.forEach(function (slide, i) {
                slide.classList.toggle('opacity-100', i === index);
                slide.classList.toggle('z-10', i === index);
                slide.classList.toggle('opacity-0', i !== index);
                slide.classList.toggle('pointer-events-none', i !== index);
            });
            heroPosterDots.forEach(function (dot, i) {
                dot.classList.toggle('bg-teal-deep', i === index);
                dot.classList.toggle('bg-gray-300', i !== index);
                dot.classList.toggle('ring-2', i === index);
                dot.classList.toggle('ring-teal-deep/20', i === index);
            });
            currentPoster = index;
        }

        function nextPoster() {
            showPoster((currentPoster + 1) % heroPosterSlides.length);
        }

        function startPosterAuto() {
            heroPosterTimer = setInterval(nextPoster, 7000);
        }

        function restartPosterAuto() {
            clearInterval(heroPosterTimer);
            startPosterAuto();
        }

        if (heroPosterSlides.length) {
            heroPosterDots.forEach(function (dot, index) {
                dot.addEventListener('click', function () {
                    showPoster(index);
                    restartPosterAuto();
                });
            });
            showPoster(0);
            startPosterAuto();
        }
    })();
</script>
@endpush