@extends('layouts.guest-landing')

@section('title', $landingPageTitle ?? 'Welcome to Mindful Giving')

@section('content')
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">

        {{-- Layout 1: Classic Layout (Text Left, 2x2 Campaign Grid Right) --}}
        @if ($layoutChoice === 'classic')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">
                <div class="text-center md:text-left">
                    <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight mb-6">
                        {!! nl2br(e($landingPageTitle)) !!}
                    </h1>
                    <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
                        {!! nl2br(e($landingPageWelcomeMessage)) !!}
                    </p>
                </div>
                @if ($campaigns->isNotEmpty())
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        @foreach ($campaigns->take(4) as $campaign)
                            <a href="{{ route('landing.campaign.products', $campaign) }}"
                                class="block p-6 rounded-lg shadow-lg group bg-white dark:bg-gray-800 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 ease-in-out min-h-[200px] flex flex-col justify-between border border-gray-200 dark:border-gray-700">
                                <div>
                                    @if ($campaign->image_path)
                                        <div class="h-32 mb-4 rounded-md overflow-hidden bg-gray-200 dark:bg-gray-700">
                                            <img src="{{ asset('storage/' . $campaign->image_path) }}"
                                                alt="{{ $campaign->title }}" class="w-full h-full object-cover">
                                        </div>
                                    @else
                                        <div
                                            class="h-32 mb-4 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500">
                                            <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                            </svg>
                                        </div>
                                    @endif
                                    <h2
                                        class="text-lg font-semibold mb-1 text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors line-clamp-2">
                                        {{ $campaign->title }}
                                    </h2>
                                    @if ($campaign->description)
                                        <p class="text-xs text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
                                            {{ Str::limit($campaign->description, 60) }}
                                        </p>
                                    @endif
                                </div>
                                <div class="mt-auto">
                                    <span
                                        class="inline-flex items-center font-medium text-sm text-indigo-600 dark:text-indigo-400 group-hover:underline">
                                        {!! __('landing.view_wishlist_arrow') !!}
                                    </span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <div class="flex items-center justify-center h-full">
                        <p class="text-center text-gray-500 dark:text-gray-400 py-10">
                            {{ __('landing.no_campaigns_layout') }}</p>
                    </div>
                @endif
            </div>

            {{-- Enhanced carousel with touch/swipe support --}}
        @elseif($layoutChoice === 'carousel')
            <div class="text-center mb-12">
                <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight mb-4">
                    {!! nl2br(e($landingPageTitle)) !!}
                </h1>
                <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
                    {!! nl2br(e($landingPageWelcomeMessage)) !!}
                </p>
            </div>

            @if ($campaigns->isNotEmpty())
                <div x-data="{
                    currentSlide: 0,
                    itemsPerSlide: window.innerWidth >= 1024 ? 3 : (window.innerWidth >= 640 ? 2 : 1),
                    campaigns: {{ Js::from($campaigns->map->only(['id', 'title', 'description', 'image_path', 'slug'])) }},
                    isAutoPlaying: true,
                    touchStartX: 0,
                    touchEndX: 0,
                
                    get totalSlides() {
                        return Math.ceil(this.campaigns.length / this.itemsPerSlide);
                    },
                
                    nextSlide() {
                        this.currentSlide = this.currentSlide >= this.totalSlides - 1 ? 0 : this.currentSlide + 1;
                    },
                
                    prevSlide() {
                        this.currentSlide = this.currentSlide <= 0 ? this.totalSlides - 1 : this.currentSlide - 1;
                    },
                
                    goToSlide(index) {
                        this.currentSlide = index;
                    },
                
                    handleTouchStart(e) {
                        this.touchStartX = e.touches[0].clientX;
                        this.isAutoPlaying = false; // Pause auto-play when user interacts
                    },
                
                    handleTouchEnd(e) {
                        this.touchEndX = e.changedTouches[0].clientX;
                        this.handleSwipe();
                
                        // Resume auto-play after 3 seconds
                        setTimeout(() => {
                            this.isAutoPlaying = true;
                        }, 3000);
                    },
                
                    handleSwipe() {
                        const swipeThreshold = 50;
                        const diff = this.touchStartX - this.touchEndX;
                
                        if (Math.abs(diff) > swipeThreshold) {
                            if (diff > 0) {
                                this.nextSlide(); // Swipe left - next slide
                            } else {
                                this.prevSlide(); // Swipe right - previous slide
                            }
                        }
                    },
                
                    startAutoPlay() {
                        setInterval(() => {
                            if (this.isAutoPlaying && this.totalSlides > 1) {
                                this.nextSlide();
                            }
                        }, 5000);
                    },
                
                    init() {
                        // Update items per slide on resize
                        window.addEventListener('resize', () => {
                            this.itemsPerSlide = window.innerWidth >= 1024 ? 3 : (window.innerWidth >= 640 ? 2 : 1);
                            if (this.currentSlide >= this.totalSlides) {
                                this.currentSlide = 0;
                            }
                        });
                
                        // Start auto-play
                        this.startAutoPlay();
                    }
                }" class="relative" @mouseenter="isAutoPlaying = false"
                    @mouseleave="isAutoPlaying = true">

                    {{-- Carousel Container --}}
                    <div class="overflow-hidden rounded-lg" @touchstart="handleTouchStart($event)"
                        @touchend="handleTouchEnd($event)">
                        <div class="flex transition-transform duration-500 ease-in-out"
                            :style="`transform: translateX(-${currentSlide * 100}%)`">

                            <template x-for="slideIndex in totalSlides" :key="slideIndex">
                                <div class="w-full flex-shrink-0">
                                    <div class="grid gap-8 px-4"
                                        :class="{
                                            'grid-cols-1': itemsPerSlide === 1,
                                            'grid-cols-2': itemsPerSlide === 2,
                                            'grid-cols-3': itemsPerSlide === 3
                                        }">
                                        <template
                                            x-for="campaign in campaigns.slice((slideIndex - 1) * itemsPerSlide, slideIndex * itemsPerSlide)"
                                            :key="campaign.id">
                                            <a :href="`{{ url('campaigns') }}/${campaign.slug}/products`"
                                                class="block p-6 rounded-lg shadow-lg group bg-white dark:bg-gray-800 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 ease-in-out min-h-[280px] flex flex-col justify-between border border-gray-200 dark:border-gray-700">

                                                <div>
                                                    <template x-if="campaign.image_path">
                                                        <div
                                                            class="h-40 mb-4 rounded-md overflow-hidden bg-gray-200 dark:bg-gray-700">
                                                            <img :src="`{{ asset('storage') }}/${campaign.image_path}`"
                                                                :alt="campaign.title" class="w-full h-full object-cover">
                                                        </div>
                                                    </template>
                                                    <template x-if="!campaign.image_path">
                                                        <div
                                                            class="h-40 mb-4 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500">
                                                            <svg class="h-12 w-12" xmlns="http://www.w3.org/2000/svg"
                                                                fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                                stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                                            </svg>
                                                        </div>
                                                    </template>

                                                    <h2 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
                                                        x-text="campaign.title"></h2>

                                                    <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3"
                                                        x-text="campaign.description ? (campaign.description.length > 100 ? campaign.description.substring(0, 100) + '...' : campaign.description) : ''">
                                                    </p>
                                                </div>

                                                <div class="mt-auto">
                                                    <span
                                                        class="inline-flex items-center font-medium text-sm text-indigo-600 dark:text-indigo-400 group-hover:underline">
                                                        {!! __('landing.view_wishlist_arrow') !!}
                                                    </span>
                                                </div>
                                            </a>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Navigation Arrows (hidden on mobile) --}}
                    <template x-if="totalSlides > 1">
                        <div class="hidden sm:block">
                            {{-- Previous Button --}}
                            <button
                                @click="prevSlide(); isAutoPlaying = false; setTimeout(() => isAutoPlaying = true, 3000)"
                                class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-white dark:bg-gray-800 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 border border-gray-200 dark:border-gray-700 z-10">
                                <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 19l-7-7 7-7"></path>
                                </svg>
                            </button>

                            {{-- Next Button --}}
                            <button
                                @click="nextSlide(); isAutoPlaying = false; setTimeout(() => isAutoPlaying = true, 3000)"
                                class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-white dark:bg-gray-800 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 border border-gray-200 dark:border-gray-700 z-10">
                                <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </template>

                    {{-- Slide Indicators --}}
                    <template x-if="totalSlides > 1">
                        <div class="flex justify-center space-x-2 mt-8">
                            <template x-for="(slide, index) in Array(totalSlides)" :key="index">
                                <button
                                    @click="goToSlide(index); isAutoPlaying = false; setTimeout(() => isAutoPlaying = true, 3000)"
                                    class="w-3 h-3 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
                                    :class="{
                                        'bg-indigo-600 dark:bg-indigo-500': currentSlide === index,
                                        'bg-gray-300 dark:bg-gray-400 hover:bg-gray-400 dark:hover:bg-gray-300': currentSlide !==
                                            index
                                    }">
                                </button>
                            </template>
                        </div>
                    </template>

                    {{-- Mobile swipe hint (shows briefly on mobile) --}}
                    <div class="sm:hidden text-center mt-4" x-data="{ showHint: true }" x-init="setTimeout(() => showHint = false, 3000)">
                        <p x-show="showHint" x-transition class="text-xs text-gray-500 dark:text-gray-400">
                            👈 Swipe to navigate campaigns 👉
                        </p>
                    </div>
                </div>
            @else
                <p class="text-center text-gray-500 dark:text-gray-400 py-10">{{ __('landing.no_campaigns') }}</p>
            @endif

            {{-- Layout 3: Featured Campaign with Dropdown --}}
        @elseif($layoutChoice === 'featured_dropdown')
            <div x-data="{
                campaigns: {{ Js::from($campaigns->map->only(['id', 'title', 'description', 'image_path', 'slug'])) }},
                featuredCampaignId: {{ $featuredCampaign ? $featuredCampaign->id : 'null' }},
                get featured() {
                    if (!this.featuredCampaignId && this.campaigns.length > 0) this.featuredCampaignId = this.campaigns[0].id;
                    if (!this.featuredCampaignId) return null;
                    return this.campaigns.find(c => c.id == this.featuredCampaignId);
                }
            }" class="space-y-12">

                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight">
                        {{ $landingPageTitle }}
                    </h1>
                    <div class="flex-shrink-0">
                        <label for="campaign_select" class="sr-only">{{ __('landing.select_campaign') }}</label>
                        <select id="campaign_select" x-model="featuredCampaignId"
                            class="block w-full sm:w-auto pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 appearance-none">
                            <template x-for="campaign in campaigns" :key="campaign.id">
                                <option :value="campaign.id" x-text="campaign.title"></option>
                            </template>
                            <option x-show="campaigns.length === 0" value="" disabled>
                                {{ __('landing.no_campaigns_available') }}</option>
                        </select>
                    </div>
                </div>

                <div x-show="featured" x-transition
                    class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
                    <div class="md:flex">
                        <div class="md:flex-shrink-0 md:w-1/2 lg:w-2/5">
                            <template x-if="featured?.image_path">
                                <img class="h-64 w-full object-cover md:h-full"
                                    :src="'{{ asset('storage') }}/' + featured.image_path" :alt="featured.title">
                            </template>
                            <template x-if="!featured?.image_path">
                                <div
                                    class="h-64 w-full object-cover md:h-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                                    <svg class="h-24 w-24 text-gray-400 dark:text-gray-500"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                    </svg>
                                </div>
                            </template>
                        </div>
                        <div class="p-8 md:p-10 flex flex-col justify-between">
                            <div>
                                <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-3"
                                    x-text="featured?.title"></h2>
                                <p class="text-gray-600 dark:text-gray-300 mb-6 line-clamp-4"
                                    x-text="featured?.description"></p>
                            </div>
                            <div class="mt-auto">
                                <a :href="featured ? '{{ url('campaigns') }}/' + featured.slug + '/products' : '#'"
                                    class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150">
                                    {{ __('landing.view_wishlist_donate') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div x-show="!featured && campaigns.length > 0"
                    class="text-center py-10 text-gray-500 dark:text-gray-400">
                    <p>{{ __('landing.select_campaign_details') }}</p>
                </div>
                <div x-show="campaigns.length === 0" class="text-center py-10 text-gray-500 dark:text-gray-400">
                    <p>{{ __('landing.no_campaigns') }}</p>
                </div>
            </div>

            {{-- Layout 4: Grid of Cards with Images --}}
        @elseif($layoutChoice === 'grid_cards_images')
            <div class="text-center mb-12">
                <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight mb-4">
                    {!! nl2br(e($landingPageTitle)) !!}
                </h1>
                <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
                    {!! nl2br(e($landingPageWelcomeMessage)) !!}
                </p>
            </div>
            @if ($campaigns->isNotEmpty())
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-8">
                    @foreach ($campaigns->take(4) as $campaign)
                        <a href="{{ route('landing.campaign.products', $campaign) }}"
                            class="relative block p-6 rounded-xl shadow-lg group bg-white dark:bg-gray-800 hover:shadow-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 ease-in-out border border-gray-200 dark:border-gray-700">

                            <div class="flex justify-between items-start mb-4">
                                <h2
                                    class="text-xl font-semibold text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors pr-10">
                                    {{ $campaign->title }}
                                </h2>
                                @if ($campaign->image_path)
                                    <img src="{{ asset('storage/' . $campaign->image_path) }}"
                                        alt="{{ $campaign->title }}"
                                        class="w-12 h-12 rounded-full object-cover flex-shrink-0 border-2 border-white dark:border-gray-700 shadow-sm">
                                @else
                                    <span
                                        class="flex-shrink-0 inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 border-2 border-white dark:border-gray-700 shadow-sm">
                                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                        </svg>
                                    </span>
                                @endif
                            </div>

                            @if ($campaign->description)
                                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                                    {{ Str::limit($campaign->description, 80) }}
                                </p>
                            @endif

                            <div class="mt-auto pt-4 border-t border-gray-100 dark:border-gray-700">
                                <span
                                    class="inline-flex items-center font-medium text-sm text-indigo-600 dark:text-indigo-400 group-hover:underline">
                                    {{ __('landing.view_wishlist') }}
                                    <svg class="ml-1.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                                    </svg>
                                </span>
                            </div>
                        </a>
                    @endforeach
                </div>
            @else
                <p class="text-center text-gray-500 dark:text-gray-400 py-10">{{ __('landing.no_campaigns') }}</p>
            @endif

            {{-- Layout 5: Full-Width Hero with Grid (NEW) --}}
        @elseif($layoutChoice === 'full_width_hero_grid')
            <div class="space-y-16">
                {{-- Hero Section --}}
                <div
                    class="text-center py-12 px-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
                    <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white leading-tight mb-4">
                        {!! nl2br(e($landingPageTitle)) !!}
                    </h1>
                    <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">
                        {!! nl2br(e($landingPageWelcomeMessage)) !!}
                    </p>
                </div>

                {{-- Grid Section --}}
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-10">
                        {{ __('landing.explore_campaigns') }}
                    </h2>
                    @if ($campaigns->isNotEmpty())
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
                            @foreach ($campaigns as $campaign)
                                <a href="{{ route('landing.campaign.products', $campaign) }}"
                                    class="block p-6 rounded-lg shadow-lg group bg-white dark:bg-gray-800 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 ease-in-out min-h-[200px] flex flex-col justify-between border border-gray-200 dark:border-gray-700">
                                    <div>
                                        @if ($campaign->image_path)
                                            <div class="h-40 mb-4 rounded-md overflow-hidden bg-gray-200 dark:bg-gray-700">
                                                <img src="{{ asset('storage/' . $campaign->image_path) }}"
                                                    alt="{{ $campaign->title }}" class="w-full h-full object-cover">
                                            </div>
                                        @else
                                            <div
                                                class="h-40 mb-4 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500">
                                                <svg class="h-12 w-12" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                                                </svg>
                                            </div>
                                        @endif
                                        <h2
                                            class="text-xl font-semibold mb-2 text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                                            {{ $campaign->title }}
                                        </h2>
                                        @if ($campaign->description)
                                            <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                                                {{ Str::limit($campaign->description, 100) }}
                                            </p>
                                        @endif
                                    </div>
                                    <div class="mt-auto">
                                        <span
                                            class="inline-flex items-center font-medium text-sm text-indigo-600 dark:text-indigo-400 group-hover:underline">
                                            {!! __('landing.view_wishlist_arrow') !!}
                                        </span>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    @else
                        <p class="text-center text-gray-500 dark:text-gray-400 py-10">{{ __('landing.no_campaigns') }}</p>
                    @endif
                </div>
            </div>
        @else
            <p class="text-center text-gray-500 dark:text-gray-400">{{ __('landing.layout_not_configured') }}</p>
        @endif
    </div>
@endsection

@push('scripts')
    @if ($layoutChoice === 'featured_dropdown')
        <script>
            // Any specific JS for featured_dropdown if Alpine isn't enough
        </script>
    @endif
@endpush