@extends('layouts.public')

@section('content')
@php
    $label = fn ($bn, $en) => $lang === 'en' ? $en : $bn;
    $visionCards = [
        ['icon' => 'sprout', 'title' => 'কৃষি স্বনির্ভরতা', 'title_en' => 'Agricultural Self-Sufficiency', 'subtitle' => 'কৃষিতে স্বনির্ভরতা', 'subtitle_en' => 'Agricultural self-reliance', 'description' => 'দেশীয় কৃষি উৎপাদন বৃদ্ধি, কৃষকদের ন্যায্য মূল্য নিশ্চিতকরণ এবং খাদ্য নিরাপত্তা অর্জন', 'description_en' => 'Increase domestic agricultural production, ensure fair prices for farmers, and achieve food security'],
        ['icon' => 'factory', 'title' => 'শিল্প ও প্রযুক্তিতে স্বনির্ভরতা', 'title_en' => 'Self-Reliance in Industry & Technology', 'subtitle' => 'শিল্প ও প্রযুক্তি', 'subtitle_en' => 'Industry and technology', 'description' => 'দেশীয় শিল্প বিকাশ, প্রযুক্তি হস্তান্তর এবং আমদানি নির্ভরতা হ্রাসকরণ', 'description_en' => 'Develop local industry, promote technology transfer, and reduce import dependence'],
        ['icon' => 'scale', 'title' => 'সুশাসন ও ন্যায়বিচার', 'title_en' => 'Good Governance & Justice', 'subtitle' => 'সুশাসন ও ন্যায়বিচার', 'subtitle_en' => 'Governance and justice', 'description' => 'স্বচ্ছ প্রশাসন, দুর্নীতিমুক্ত শাসন এবং আইনের শাসন প্রতিষ্ঠা', 'description_en' => 'Establish transparent administration, corruption-free governance, and the rule of law'],
        ['icon' => 'check-circle', 'title' => 'জবাবদিহিতা নিশ্চিতকরণ', 'title_en' => 'Ensuring Accountability', 'subtitle' => 'জবাবদিহিতা', 'subtitle_en' => 'Accountability', 'description' => 'প্রতিটি সিদ্ধান্তে জনগণের কাছে জবাবদিহিতা এবং স্বচ্ছতা বজায় রাখা', 'description_en' => 'Maintain transparency and accountability to the people in every decision'],
        ['icon' => 'shield', 'title' => 'জাতীয় সার্বভৌমত্ব', 'title_en' => 'National Sovereignty', 'subtitle' => 'সার্বভৌমত্ব রক্ষা', 'subtitle_en' => 'Protecting sovereignty', 'description' => 'বহিঃশক্তির হস্তক্ষেপমুক্ত স্বাধীন পররাষ্ট্র নীতি এবং জাতীয় নিরাপত্তা সুদৃঢ়করণ', 'description_en' => 'Strengthen national security and pursue an independent foreign policy free from external interference'],
        ['icon' => 'globe', 'title' => 'মর্যাদাপূর্ণ আন্তর্জাতিক সম্পর্ক', 'title_en' => 'Dignified International Relations', 'subtitle' => 'আন্তর্জাতিক সম্পর্ক', 'subtitle_en' => 'International relations', 'description' => 'সমমর্যাদার ভিত্তিতে আন্তর্জাতিক সম্পর্ক এবং জাতীয় স্বার্থ সংরক্ষণ', 'description_en' => 'Build international relations on equality and protect national interests'],
    ];
@endphp

<section id="hero" class="relative w-full h-[600px] lg:h-[700px] overflow-hidden">
    @forelse($sliders as $index => $slide)
        <article class="hero-slide absolute inset-0 transition-opacity duration-1000 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}" data-slide="{{ $index }}">
            <img src="{{ $slide->image }}" alt="{{ $lang === 'en' ? $slide->title_en : $slide->title }}" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-[var(--primary-green)]/95 via-[var(--primary-green)]/85 to-transparent grain-texture"></div>
            <div class="relative h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
                <div class="max-w-3xl text-white space-y-6">
                    <div class="space-y-2">
                        <h1 class="text-5xl lg:text-7xl">{{ $lang === 'en' ? $slide->title_en : $slide->title }}</h1>
                        <p class="text-xl lg:text-2xl text-[var(--gold)] opacity-90">{{ $lang === 'en' ? $slide->subtitle_en : $slide->subtitle }}</p>
                    </div>
                    <p class="text-xl lg:text-2xl leading-relaxed opacity-95">{{ $lang === 'en' ? $slide->description_en : $slide->description }}</p>
                    <a href="{{ $slide->cta_link ?: '#vision' }}" class="inline-block mt-8 px-10 py-4 bg-[var(--primary-red)] hover:bg-[var(--primary-red)]/90 text-white rounded-full smooth-transition shadow-lg hover:shadow-xl">
                        {{ $lang === 'en' ? $slide->cta_en : $slide->cta }}
                    </a>
                </div>
            </div>
        </article>
    @empty
        <div class="absolute inset-0 bg-[var(--primary-green)]"></div>
    @endforelse
    <button type="button" class="js-hero-prev absolute left-4 lg:left-8 top-1/2 -translate-y-1/2 p-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full smooth-transition z-10 text-white" aria-label="Previous slide">@include('partials.icon', ['name' => 'chevron-left', 'class' => 'w-6 h-6 text-white'])</button>
    <button type="button" class="js-hero-next absolute right-4 lg:right-8 top-1/2 -translate-y-1/2 p-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full smooth-transition z-10 text-white" aria-label="Next slide">@include('partials.icon', ['name' => 'chevron-right', 'class' => 'w-6 h-6 text-white'])</button>
    @if($sliders->count() > 1)
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
            @foreach($sliders as $index => $slide)
                <button type="button" class="js-hero-dot h-2 rounded-full smooth-transition {{ $index === 0 ? 'w-12 bg-[var(--gold)]' : 'w-2 bg-white/50 hover:bg-white/70' }}" data-slide-target="{{ $index }}" aria-label="Go to slide {{ $index + 1 }}"></button>
            @endforeach
        </div>
    @endif
</section>

<section id="vision" class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <div class="absolute inset-0 fabric-texture opacity-30"></div>
    <div class="max-w-7xl mx-auto relative z-10">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-[var(--primary-green)]">{{ $label('আমাদের মূলনীতি', 'Our Core Principles') }}</h2>
            <p class="text-xl text-[var(--light-text)] max-w-3xl mx-auto">{{ $label('স্বনির্ভরতা, সুশাসন এবং সার্বভৌমত্ব—এই তিন স্তম্ভের উপর প্রতিষ্ঠিত নওজোয়ান গড়তে চায় একটি শক্তিশালী, স্বাধীন ও সমৃদ্ধ বাংলাদেশ।', 'Built on three pillars: self-reliance, good governance, and sovereignty.') }}</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($visionCards as $card)
                <article class="group bg-white rounded-3xl p-8 shadow-md hover:shadow-2xl smooth-transition border-2 border-transparent hover:border-[var(--gold)] relative overflow-hidden flex flex-col">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-[var(--primary-green)]/5 rounded-bl-full -mr-16 -mt-16 group-hover:bg-[var(--gold)]/10 smooth-transition"></div>
                    <div class="relative flex-grow flex flex-col">
                        <div class="w-16 h-16 bg-[var(--primary-green)]/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-[var(--primary-green)] smooth-transition">
                            @include('partials.icon', ['name' => $card['icon'], 'class' => 'w-8 h-8 text-[var(--primary-green)] group-hover:text-white smooth-transition'])
                        </div>
                        <h3 class="text-[var(--primary-green)] mb-2">{{ $lang === 'en' ? $card['title_en'] : $card['title'] }}</h3>
                        <p class="text-sm text-[var(--gold)] mb-3">{{ $lang === 'en' ? $card['subtitle_en'] : $card['subtitle'] }}</p>
                        <p class="text-[var(--light-text)] leading-relaxed mb-6 flex-grow">{{ $lang === 'en' ? $card['description_en'] : $card['description'] }}</p>
                        <a href="{{ route('blog', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="mt-auto inline-flex items-center gap-2 text-[var(--primary-green)] hover:text-[var(--primary-red)] smooth-transition">
                            <span class="text-sm font-medium">{{ $label('বিস্তারিত পড়ুন', 'Read More') }}</span>
                            @include('partials.icon', ['name' => 'arrow-right', 'class' => 'w-4 h-4'])
                        </a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section id="leadership" class="py-20 px-4 sm:px-6 lg:px-8 bg-white relative">
    <div class="max-w-7xl mx-auto relative z-10">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-[var(--primary-green)]">{{ $label('নেতৃত্ব', 'Leadership') }}</h2>
            <p class="text-xl text-[var(--light-text)] max-w-3xl mx-auto">{{ $label('অভিজ্ঞ, দক্ষ এবং জনগণের প্রতি প্রতিশ্রুতিবদ্ধ নেতৃত্ব—যারা দেশের সেবায় নিবেদিত।', 'Experienced and capable leadership, committed to the people and dedicated to serving the nation.') }}</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @forelse($leaders as $leader)
                @php $leaderImage = $leader->image ?: asset('assets/vercel-images/leader-portrait-1.jpg'); @endphp
                <article class="group text-center space-y-4">
                    <div class="relative mx-auto w-48 h-48 mb-6">
                        <div class="absolute inset-0 bg-gradient-to-br from-[var(--primary-green)] to-[var(--primary-red)] rounded-3xl transform rotate-6 group-hover:rotate-12 smooth-transition"></div>
                        <img src="{{ $leaderImage }}" alt="{{ $lang === 'en' ? $leader->name_en : $leader->name }}" class="relative w-full h-full object-cover rounded-3xl shadow-xl">
                    </div>
                    <h4 class="text-[var(--primary-green)] mb-1">{{ $lang === 'en' ? $leader->name_en : $leader->name }}</h4>
                    <p class="text-sm text-[var(--gold)] mb-1">{{ $lang === 'en' ? $leader->position_en : $leader->position }}</p>
                    @if($leader->bio)<p class="text-sm italic text-[var(--light-text)] px-4">"{{ $lang === 'en' ? $leader->bio_en : $leader->bio }}"</p>@endif
                </article>
            @empty
                <p class="col-span-full text-center text-[var(--light-text)]">{{ $label('নেতৃত্বের তথ্য শীঘ্রই প্রকাশ করা হবে।', 'Leadership information will be published soon.') }}</p>
            @endforelse
        </div>
        <div class="mt-16 text-center p-12 bg-gradient-to-r from-[var(--primary-green)]/5 via-[var(--primary-green)]/10 to-[var(--primary-green)]/5 rounded-3xl">
            <h3 class="text-[var(--primary-green)] mb-4">{{ $label('আমাদের সম্পূর্ণ টিম দেখুন', 'Meet Our Full Team') }}</h3>
            <a href="{{ route('team', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="inline-block px-8 py-3 bg-[var(--primary-green)] hover:bg-[var(--primary-green)]/90 text-white rounded-full smooth-transition">{{ $label('সম্পূর্ণ টিম', 'Full Team') }}</a>
        </div>
    </div>
</section>

<section id="programs" class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-gradient-to-b from-[var(--cream)] to-white">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-[var(--primary-green)]">{{ $label('আমাদের কর্মসূচি', 'Our Programs') }}</h2>
            <p class="text-xl text-[var(--light-text)] max-w-3xl mx-auto">{{ $label('সুনির্দিষ্ট পরিকল্পনা ও বাস্তবসম্মত কর্মসূচির মাধ্যমে প্রতিটি বাংলাদেশির জীবনমান উন্নয়নে প্রতিশ্রুতিবদ্ধ।', "Committed to improving every Bangladeshi's quality of life through clear plans and practical programs.") }}</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($programs as $program)
                @php $red = $program->color === 'primary-red'; $points = $lang === 'en' ? $program->points_en : $program->points; @endphp
                <article class="bg-white rounded-2xl p-8 shadow-md hover:shadow-xl smooth-transition relative overflow-hidden group">
                    <div class="absolute -right-8 -top-8 w-32 h-32 {{ $red ? 'bg-[var(--primary-red)]' : 'bg-[var(--primary-green)]' }}/5 rounded-full group-hover:scale-150 smooth-transition"></div>
                    <div class="relative">
                        <div class="w-14 h-14 {{ $red ? 'bg-[var(--primary-red)]' : 'bg-[var(--primary-green)]' }}/10 rounded-xl flex items-center justify-center mb-6 text-2xl">{{ $red ? '●' : '◆' }}</div>
                        <h4 class="{{ $red ? 'text-[var(--primary-red)]' : 'text-[var(--primary-green)]' }}">{{ $lang === 'en' ? $program->title_en : $program->title }}</h4>
                        <p class="text-sm text-[var(--gold)] mb-6">{{ $lang === 'en' ? $program->subtitle_en : $program->subtitle }}</p>
                        <ul class="space-y-3">
                            @foreach($points as $point)
                                <li class="flex items-start gap-3 text-[var(--light-text)]">
                                    <span class="w-1.5 h-1.5 {{ $red ? 'bg-[var(--primary-red)]' : 'bg-[var(--primary-green)]' }} rounded-full mt-2 flex-shrink-0"></span>
                                    <span class="text-sm leading-relaxed">{{ $point }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </article>
            @endforeach
        </div>
        <div class="mt-16 text-center p-12 bg-white rounded-3xl shadow-lg">
            <h3 class="text-[var(--primary-green)] mb-4">{{ $label('আমাদের সম্পূর্ণ ম্যানিফেস্টো পড়ুন', 'Read Our Complete Manifesto') }}</h3>
            <p class="text-[var(--light-text)] mb-6 max-w-2xl mx-auto">{{ $label('দেশ গঠনের বিস্তারিত পরিকল্পনা, অগ্রাধিকার এবং বাস্তবায়ন রূপরেখা জানতে ম্যানিফেস্টো দেখুন।', 'Explore our detailed plan, priorities, and implementation roadmap for building the country.') }}</p>
            <a href="{{ route('programs', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="inline-flex items-center gap-2 px-8 py-3 bg-[var(--primary-red)] hover:bg-[var(--primary-red)]/90 text-white rounded-full smooth-transition">
                <span>{{ $label('বিস্তারিত কর্মসূচি', 'Detailed Programs') }}</span>
                @include('partials.icon', ['name' => 'arrow-right', 'class' => 'w-4 h-4'])
            </a>
        </div>
    </div>
</section>

<section id="achievements" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
    <div class="max-w-7xl mx-auto">
        <div class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-[var(--primary-green)] mb-4">{{ $label('আমাদের অর্জন', 'Our Achievements') }}</h2>
                <p class="text-xl text-[var(--light-text)]">{{ $label('সংখ্যায় দেখুন আমাদের যাত্রা', 'Our journey in numbers') }}</p>
            </div>
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($achievements as $achievement)
                    <article class="text-center p-8 rounded-2xl bg-gradient-to-br from-[var(--primary-green)]/5 to-[var(--primary-green)]/10 hover:shadow-lg smooth-transition">
                        <div class="w-16 h-16 mx-auto mb-4 bg-[var(--primary-green)]/10 rounded-2xl flex items-center justify-center text-2xl">★</div>
                        <p class="text-4xl text-[var(--primary-green)]">{{ $lang === 'en' ? $achievement->number_en : $achievement->number }}</p>
                        <p class="text-[var(--dark-text)]">{{ $lang === 'en' ? $achievement->label_en : $achievement->label }}</p>
                    </article>
                @endforeach
            </div>
        </div>
        <div>
            <div class="text-center mb-12">
                <h2 class="text-[var(--primary-red)] mb-4">{{ $label('মানবিক সেবা', 'Humanitarian Service') }}</h2>
                <p class="text-xl text-[var(--light-text)] max-w-3xl mx-auto">{{ $label('দুর্যোগে, সংকটে, প্রতিটি মুহূর্তে জনগণের পাশে দাঁড়িয়েছি আমরা', 'In disasters and crises, we stand by the people.') }}</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($humanitarianWorks as $work)
                    @php $workImage = $work->image ?: asset('assets/vercel-images/slider-youth-bangladesh.jpg'); @endphp
                    <article class="group rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl smooth-transition">
                        <div class="relative h-64 overflow-hidden">
                            <img src="{{ $workImage }}" alt="{{ $lang === 'en' ? $work->title_en : $work->title }}" class="w-full h-full object-cover group-hover:scale-110 smooth-transition">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        </div>
                        <div class="p-6 bg-white">
                            <h4 class="text-[var(--primary-red)] mb-3">{{ $lang === 'en' ? $work->title_en : $work->title }}</h4>
                            <p class="text-[var(--light-text)]">{{ $lang === 'en' ? $work->description_en : $work->description }}</p>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </div>
</section>

<section id="donation" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[var(--primary-green)]/5 via-[var(--cream)] to-[var(--primary-red)]/5 relative overflow-hidden">
    <div class="max-w-5xl mx-auto relative z-10">
        <div class="text-center mb-12 space-y-4">
            <h2 class="text-[var(--primary-green)]">{{ $label('অবদান রাখুন', 'Make a Contribution') }}</h2>
            <p class="text-xl text-[var(--light-text)] max-w-2xl mx-auto">{{ $label('আপনার অবদান আমাদের শক্তিশালী করে। গণতান্ত্রিক আন্দোলন ও জনকল্যাণমূলক কার্যক্রমে সাহায্য করুন।', 'Your contribution strengthens us. Support democratic movements and people-first initiatives.') }}</p>
        </div>
        @if(session('donation_success'))<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg mb-8 text-green-700">{{ session('donation_success') }}</div>@endif
        <form method="post" action="{{ route('contributions.store') }}" class="bg-white rounded-3xl shadow-2xl overflow-hidden">
            @csrf
            <div class="p-8 md:p-12 space-y-8">
                <div>
                    <label class="block mb-4 text-[var(--primary-green)]">{{ $label('পরিমাণ নির্বাচন করুন (টাকা)', 'Select an amount (BDT)') }}</label>
                    <div class="grid grid-cols-3 md:grid-cols-5 gap-4 mb-4">
                        @foreach([500, 1000, 2000, 5000, 10000] as $amount)
                            <label class="p-4 rounded-xl border-2 border-gray-200 hover:border-[var(--primary-green)] text-center cursor-pointer smooth-transition">
                                <input type="radio" name="amount" value="{{ $amount }}" class="sr-only">
                                ৳{{ number_format($amount) }}
                            </label>
                        @endforeach
                    </div>
                    <input type="number" name="custom_amount" placeholder="{{ $label('অন্য পরিমাণ লিখুন...', 'Enter a custom amount...') }}" class="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <input name="name" required placeholder="{{ $label('আপনার নাম *', 'Your name *') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                    <input type="email" name="email" required placeholder="{{ $label('ইমেইল *', 'Email *') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                    <input name="phone" required placeholder="{{ $label('ফোন নম্বর *', 'Phone number *') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <select name="payment_method" required class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                        <option value="">{{ $label('পেমেন্ট পদ্ধতি', 'Payment method') }}</option>
                        <option value="bkash">bKash</option>
                        <option value="nagad">Nagad</option>
                        <option value="bank">Bank Transfer</option>
                        <option value="card">Card</option>
                    </select>
                    <input name="transaction_id" placeholder="{{ $label('লেনদেন নম্বর', 'Transaction ID') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none smooth-transition">
                </div>
                <button class="w-full py-4 bg-[var(--primary-red)] hover:bg-[var(--primary-red)]/90 text-white rounded-xl smooth-transition shadow-lg">{{ $label('দান করুন', 'Donate') }}</button>
            </div>
        </form>
        <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach([
                ['title' => $label('সময় দিন', 'Give Time'), 'text' => $label('স্বেচ্ছাসেবী কার্যক্রমে যুক্ত হোন।', 'Join volunteer activities.')],
                ['title' => $label('বার্তা ছড়ান', 'Spread the Message'), 'text' => $label('আমাদের কর্মসূচি পরিচিতদের জানাতে সাহায্য করুন।', 'Help share our programs with others.')],
                ['title' => $label('দক্ষতা দিন', 'Share Skills'), 'text' => $label('আপনার পেশাগত দক্ষতা দিয়ে নওজোয়ানকে শক্তিশালী করুন।', 'Strengthen NowJoan with your professional skills.')],
            ] as $item)
                <article class="bg-white/80 rounded-2xl p-6 shadow-md">
                    <h4 class="text-[var(--primary-green)] mb-2">{{ $item['title'] }}</h4>
                    <p class="text-[var(--light-text)] text-sm">{{ $item['text'] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-[var(--primary-red)] to-[var(--primary-red)]/80 relative overflow-hidden">
    <div class="absolute inset-0 grain-texture"></div>
    <div class="max-w-4xl mx-auto text-center relative z-10">
        <h2 class="text-white mb-6">{{ $label('একসাথে গড়ি নতুন বাংলাদেশ', 'Together We Build a New Bangladesh') }}</h2>
        <p class="text-white/90 text-xl mb-8 leading-relaxed">{{ $label('আপনার কণ্ঠস্বর গুরুত্বপূর্ণ। আপনার অংশগ্রহণ প্রয়োজন। আমাদের সাথে যোগ দিয়ে হোন পরিবর্তনের অংশীদার।', 'Your voice matters. Join us and become a partner in change.') }}</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('join', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="inline-block px-10 py-4 bg-white text-[var(--primary-red)] hover:bg-[var(--cream)] rounded-full smooth-transition shadow-xl">{{ $label('সদস্য হন', 'Become a Member') }}</a>
            <a href="{{ route('join', $lang === 'en' ? ['lang' => 'en'] : []) }}#volunteer" class="inline-block px-10 py-4 bg-transparent border-2 border-white text-white hover:bg-white/10 rounded-full smooth-transition">{{ $label('স্বেচ্ছাসেবক হন', 'Volunteer') }}</a>
        </div>
    </div>
</section>
@endsection