@extends('layouts.guest-landing') {{-- Use the simple public layout --}}

@section('title', 'Welcome to Mindful Giving')

@section('content')
    {{-- Use a container for overall padding and max-width --}}
    <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
        {{-- Two-column grid layout --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20 items-center"> {{-- Increased gap --}}

            {{-- Left Column: Text Content --}}
            <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-4">
                    Welcome to OneEach<br> Mindful Giving
                </h1>
                <p class="text-base text-gray-600 dark:text-gray-300 leading-relaxed">
                    Join us in our mission to make a positive impact on
                    the world through our donation drive. Your
                    contribution can make a significant difference in the
                    lives of those who are in need. Your donation can
                    provide food, shelter, education, and medical care to
                    people who are struggling.
                </p>
                {{-- Removed CTA Buttons --}}
            </div>

            {{-- Right Column: Campaign Cards Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {{-- Ensure controller passes $campaigns->take(4) --}}
                @forelse ($campaigns->take(4) as $campaign)
                    {{-- Campaign Card --}}
                    {{-- Card has white background always, dark text --}}
                    <a href="{{ route('landing.campaign.products', $campaign) }}"
                        class="relative block p-6 rounded-lg shadow-lg group
                              bg-white {{-- Always white background --}}
                              text-gray-900 {{-- Dark text for contrast --}}
                              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-[180px] flex flex-col justify-between border border-gray-100">
                        {{-- Adjusted min-height --}}

                        {{-- Removed Overlay Icon Image Logic --}}

                        <div> {{-- Container for top content --}}
                            <h2
                                class="text-xl font-semibold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">
                                {{ $campaign->title }}
                            </h2>
                            @if ($campaign->description)
                                <p class="text-sm text-gray-600 mb-4 line-clamp-3">
                                    {{ $campaign->description }}
                                </p>
                            @endif
                        </div>

                        {{-- View Wishlist Link (Bottom) --}}
                        <div class="mt-auto">
                            <span
                                class="inline-flex items-center font-medium text-sm text-indigo-600 group-hover:underline">
                                View wishlist
                                {{-- SVG Arrow Icon --}}
                                <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>
                @empty
                    <p class="sm:col-span-2 text-center text-gray-500 dark:text-gray-400 py-10">
                        No featured campaigns to display currently.
                    </p>
                @endforelse
            </div> {{-- End Inner Grid --}}

        </div> {{-- End Outer Grid --}}
    </div> {{-- End Container --}}

    {{-- Other Landing Page Sections --}}
    {{-- ... --}}
@endsection