@php
    $user = auth()->user();
    $images = $fundraise->images;
    $mainImage = $images[0]->image_path ?? null;
    $totalRaised = $fundraise->contributions?->sum('amount') ?? 0;
    $goalAmount = $fundraise->goal_amount ?? 10000;
    $progressPercentage = $goalAmount > 0 ? min(($totalRaised / $goalAmount) * 100, 100) : 0;
    $contributorCount = $fundraise->contributions?->count() ?? 0;
    $daysLeft = $fundraise->end_time ? max(0, \Carbon\Carbon::parse($fundraise->end_time)->diffInDays(now())) : null;
@endphp

<div>
    <section id="content" class="fundraise-page">
        <div class="container-fluid" style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
            <!-- Enhanced Hero Section -->
            <div class="fundraise-hero" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 20px; padding: 60px 40px; margin-bottom: 40px; position: relative; overflow: hidden;">
                <div class="hero-background-pattern" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.05; background-image: url('data:image/svg+xml,<svg xmlns=`http://www.w3.org/2000/svg` viewBox=`0 0 100 100`><circle cx=`50` cy=`50` r=`2` fill=`%23000`/></svg>'); background-size: 20px 20px;"></div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1;">
                <div class="hero-content">
                    <!-- Category Badge -->
                    <div style="display: inline-block; background: #10b981; color: white; padding: 8px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px;">Fundraising Campaign</div>

                    <h1 style="font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin: 0 0 20px 0; color: #1a202c; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">{{ $fundraise->title }}</h1>

                    @if($fundraise->tagline)
                        <p style="font-size: 1.25rem; color: #4a5568; margin-bottom: 30px; line-height: 1.6;">{{ $fundraise->tagline }}</p>
                    @endif

                    <!-- Progress Stats -->
                    <div class="progress-stats" style="background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-bottom: 30px;">
                        <div class="stats-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px;">
                            <div class="stat-item" style="text-align: center;">
                                <div style="font-size: 1.5rem; font-weight: 700; color: #10b981;">${{ number_format($totalRaised) }}</div>
                                <div style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Raised</div>
                            </div>
                            <div class="stat-item" style="text-align: center;">
                                <div style="font-size: 1.5rem; font-weight: 700; color: #3b82f6;">{{ $contributorCount }}</div>
                                <div style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Supporters</div>
                            </div>
                            <div class="stat-item" style="text-align: center;">
                                <div style="font-size: 1.5rem; font-weight: 700; color: #f59e0b;">{{ $daysLeft ?? '∞' }}</div>
                                <div style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">{{ $daysLeft ? 'Days Left' : 'No Deadline' }}</div>
                            </div>
                        </div>

                        <!-- Progress Bar -->
                        <div class="progress-container" style="background: #f3f4f6; height: 12px; border-radius: 6px; overflow: hidden; position: relative;">
                            <div class="progress-bar" style="background: linear-gradient(90deg, #10b981 0%, #059669 100%); height: 100%; width: {{ $progressPercentage }}%; transition: width 0.3s ease; border-radius: 6px;"></div>
                            <div style="position: absolute; right: 10px; top: -25px; font-size: 0.875rem; font-weight: 600; color: #374151;">{{ number_format($progressPercentage, 1) }}% of ${{ number_format($goalAmount) }}</div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="action-buttons" style="display: flex; gap: 15px; flex-wrap: wrap;">
                        <a href="{{ route('fundraise-contribute', ['fundraiserId' => $fundraise->fundraise_id]) }}"
                           class="btn-primary"
                           style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); transition: all 0.3s ease; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;">
                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                            </svg>
                            Support This Cause
                        </a>

                        @if($fundraise->user?->id === $user?->user_id)
                            <a href="/" class="btn-secondary" style="background: white; color: #374151; padding: 15px 25px; border-radius: 50px; text-decoration: none; font-weight: 600; border: 2px solid #d1d5db; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;">
                                <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                                </svg>
                                Edit Fundraise
                            </a>
                        @endif

                        <!-- Share Button -->
                        <button onclick="shareContent()" class="btn-share" style="background: #6366f1; color: white; padding: 15px 25px; border-radius: 50px; border: none; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;">
                            <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"/>
                            </svg>
                            Share
                        </button>
                    </div>
                </div>

                @if($mainImage)
                    <div class="hero-image" style="position: relative;">
                        <div style="position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.15);">
                            <img src="/{{ $mainImage }}" alt="{{ $fundraise->title }}" style="width: 100%; height: 400px; object-fit: cover;">
                            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);"></div>
                        </div>
                        <!-- Floating Elements -->
                        <div style="position: absolute; -top: 10px; -right: 10px; background: white; padding: 10px; border-radius: 50px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
                            <svg width="24" height="24" fill="#10b981" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Enhanced Information Cards Section -->
        <div class="info-cards-section" style="margin: 40px 0;">
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 40px;">

                <!-- Main Content Area -->
                <div class="main-content">

                    <!-- Campaign Information Card -->
                    <div class="info-card" style="background: white; border-radius: 16px; padding: 35px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px; border: 1px solid #f1f5f9;">
                        <div style="display: flex; align-items: center; margin-bottom: 25px;">
                            <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 12px; border-radius: 12px; margin-right: 15px;">
                                <svg width="24" height="24" fill="white" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 1.5rem; font-weight: 700; margin: 0; color: #1a202c;">Campaign Details</h3>
                        </div>

                        <div class="details-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px;">
                            <div class="detail-item">
                                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                    <svg width="16" height="16" fill="#6b7280" viewBox="0 0 20 20" style="margin-right: 8px;">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                    </svg>
                                    <span style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Organizer</span>
                                </div>
                                <div style="font-weight: 600; color: #1a202c; font-size: 1rem;">{{ $fundraise->user?->name() }}</div>
                            </div>

                            <div class="detail-item">
                                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                    <svg width="16" height="16" fill="#6b7280" viewBox="0 0 20 20" style="margin-right: 8px;">
                                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                                    </svg>
                                    <span style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Contact</span>
                                </div>
                                <a href="mailto:{{ $fundraise->user?->email }}" style="font-weight: 600; color: #10b981; text-decoration: none; font-size: 1rem;">{{ $fundraise->user?->email }}</a>
                            </div>

                            <div class="detail-item">
                                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                    <svg width="16" height="16" fill="#6b7280" viewBox="0 0 20 20" style="margin-right: 8px;">
                                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                                    </svg>
                                    <span style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Created</span>
                                </div>
                                <div style="font-weight: 600; color: #1a202c; font-size: 1rem;">{{ (new DateTime($fundraise->created_at))->format('M j, Y') }}</div>
                            </div>

                            @if($fundraise->end_time)
                                <div class="detail-item">
                                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                        <svg width="16" height="16" fill="#ef4444" viewBox="0 0 20 20" style="margin-right: 8px;">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                                        </svg>
                                        <span style="font-size: 0.875rem; color: #6b7280; font-weight: 500;">Deadline</span>
                                    </div>
                                    <div style="font-weight: 600; color: #ef4444; font-size: 1rem;">{{ (new DateTime($fundraise->end_time))->format('M j, Y') }}</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Description Section -->
                    @if($fundraise->description)
                        <div class="description-card" style="background: white; border-radius: 16px; padding: 35px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px; border: 1px solid #f1f5f9;">
                            <div style="display: flex; align-items: center; margin-bottom: 25px;">
                                <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 12px; border-radius: 12px; margin-right: 15px;">
                                    <svg width="24" height="24" fill="white" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <h3 style="font-size: 1.5rem; font-weight: 700; margin: 0; color: #1a202c;">About This Campaign</h3>
                            </div>
                            <div style="color: #4a5568; line-height: 1.8; font-size: 1.1rem;">
                                {!! $fundraise->description !!}
                            </div>
                        </div>
                    @endif

                </div>

                <!-- Sidebar -->
                <div class="sidebar">

                    <!-- Quick Donate Card -->
                    <div class="donate-card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 16px; padding: 30px; box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3); margin-bottom: 25px; color: white;">
                        <h3 style="font-size: 1.25rem; font-weight: 700; margin: 0 0 20px 0; text-align: center;">Support This Cause</h3>

                        <div class="quick-amounts" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;">
                            <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px; text-align: center; font-weight: 600;">$25</div>
                            <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px; text-align: center; font-weight: 600;">$50</div>
                            <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px; text-align: center; font-weight: 600;">$100</div>
                            <div style="background: rgba(255,255,255,0.2); padding: 12px; border-radius: 8px; text-align: center; font-weight: 600;">$250</div>
                        </div>

                        <a href="{{ route('fundraise-contribute', ['fundraiserId' => $fundraise->fundraise_id]) }}"
                           style="display: block; background: white; color: #10b981; padding: 15px; border-radius: 10px; text-decoration: none; font-weight: 700; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                            Donate Now
                        </a>
                    </div>

                    <!-- Trust Badges -->
                    <div class="trust-card" style="background: white; border-radius: 16px; padding: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #f1f5f9;">
                        <h4 style="font-size: 1.1rem; font-weight: 700; margin: 0 0 20px 0; color: #1a202c; text-align: center;">Safe & Secure</h4>

                        <div class="trust-items" style="display: flex; flex-direction: column; gap: 15px;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="background: #dcfdf7; padding: 8px; border-radius: 8px;">
                                    <svg width="16" height="16" fill="#10b981" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: #1a202c; font-size: 0.9rem;">Secure Payments</div>
                                    <div style="color: #6b7280; font-size: 0.8rem;">Protected by Stripe</div>
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="background: #dbeafe; padding: 8px; border-radius: 8px;">
                                    <svg width="16" height="16" fill="#3b82f6" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: #1a202c; font-size: 0.9rem;">No Hidden Fees</div>
                                    <div style="color: #6b7280; font-size: 0.8rem;">100% transparent</div>
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="background: #fef3c7; padding: 8px; border-radius: 8px;">
                                    <svg width="16" height="16" fill="#f59e0b" viewBox="0 0 20 20">
                                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: #1a202c; font-size: 0.9rem;">Verified Campaign</div>
                                    <div style="color: #6b7280; font-size: 0.8rem;">Authenticated organizer</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Enhanced Image Gallery -->
        @if(count($images) > 1)
            <div class="gallery-section" style="margin: 50px 0;">
                <div style="text-align: center; margin-bottom: 40px;">
                    <h2 style="font-size: 2.5rem; font-weight: 800; margin: 0 0 15px 0; color: #1a202c;">Campaign Gallery</h2>
                    <p style="color: #6b7280; font-size: 1.1rem;">See more images from this fundraising campaign</p>
                </div>

                <div class="image-gallery" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px;">
                    @foreach($images as $index => $image)
                        <div class="gallery-item" onclick="openLightbox({{ $index }})"
                             style="position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; background: #f8fafc; aspect-ratio: 4/3;">
                            <img src="/{{ $image->image_path }}"
                                 alt="Fundraise image {{ $index + 1 }}"
                                 style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">

                            <!-- Overlay on hover -->
                            <div class="gallery-overlay"
                                 style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;">
                                <div style="background: white; padding: 15px; border-radius: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
                                    <svg width="24" height="24" fill="#10b981" viewBox="0 0 20 20">
                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Call to Action Footer -->
        <div class="cta-footer" style="background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border-radius: 20px; padding: 60px 40px; text-align: center; color: white; margin: 60px 0;">
            <h2 style="font-size: 2.5rem; font-weight: 800; margin: 0 0 20px 0;">Ready to Make a Difference?</h2>
            <p style="font-size: 1.25rem; margin: 0 0 40px 0; color: #d1d5db; max-width: 600px; margin-left: auto; margin-right: auto;">Every contribution, no matter the size, brings us closer to our goal. Join our community of supporters today.</p>

            <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                <a href="{{ route('fundraise-contribute', ['fundraiserId' => $fundraise->fundraise_id]) }}"
                   style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 18px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
                    </svg>
                    Donate Now
                </a>

                <button onclick="shareContent()"
                        style="background: rgba(255,255,255,0.1); color: white; padding: 18px 35px; border-radius: 50px; border: 2px solid rgba(255,255,255,0.2); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"/>
                    </svg>
                    Share Campaign
                </button>
            </div>
        </div>

</div>
</section>

<!-- Lightbox Modal -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; cursor: pointer;">
    <div class="lightbox-content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%;">
        <img id="lightbox-img" src="" alt="" style="max-width: 100%; max-height: 100%; border-radius: 8px;">
        <button onclick="closeLightbox()" style="position: absolute; top: -40px; right: -40px; background: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; color: #333;">&times;</button>

        <!-- Navigation arrows -->
        <button onclick="previousImage(); event.stopPropagation();" style="position: absolute; left: -50px; top: 50%; transform: translateY(-50%); background: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #333;">&larr;</button>
        <button onclick="nextImage(); event.stopPropagation();" style="position: absolute; right: -50px; top: 50%; transform: translateY(-50%); background: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #333;">&rarr;</button>
    </div>
</div>

<style>
    /* Hover Effects */
    .gallery-item:hover img {
        transform: scale(1.05);
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4) !important;
    }

    .btn-secondary:hover {
        background: #f9fafb !important;
        border-color: #10b981 !important;
        color: #10b981 !important;
    }

    .btn-share:hover {
        background: #4f46e5 !important;
        transform: translateY(-2px);
    }

    .donate-card:hover {
        transform: translateY(-5px);
    }

    .trust-card:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .fundraise-hero > div {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
        }

        .info-cards-section > div {
            grid-template-columns: 1fr !important;
            gap: 30px !important;
        }

        .action-buttons {
            justify-content: center !important;
        }

        .action-buttons a, .action-buttons button {
            flex: 1 !important;
            text-align: center !important;
        }
    }
</style>

<script>
    const images = @json($images->pluck('image_path'));
    let currentImageIndex = 0;

    function openLightbox(index) {
        currentImageIndex = index;
        const lightbox = document.getElementById('lightbox');
        const img = document.getElementById('lightbox-img');
        img.src = '/' + images[index];
        lightbox.style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function closeLightbox() {
        document.getElementById('lightbox').style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    function nextImage() {
        currentImageIndex = (currentImageIndex + 1) % images.length;
        document.getElementById('lightbox-img').src = '/' + images[currentImageIndex];
    }

    function previousImage() {
        currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
        document.getElementById('lightbox-img').src = '/' + images[currentImageIndex];
    }

    function shareContent() {
        if (navigator.share) {
            navigator.share({
                title: '{{ addslashes($fundraise->title) }}',
                text: '{{ addslashes($fundraise->tagline ?? "Support this fundraising campaign") }}',
                url: window.location.href
            });
        } else {
            // Fallback: Copy to clipboard
            navigator.clipboard.writeText(window.location.href).then(() => {
                alert('Campaign link copied to clipboard!');
            });
        }
    }

    // Keyboard navigation for lightbox
    document.addEventListener('keydown', function(e) {
        if (document.getElementById('lightbox').style.display === 'block') {
            if (e.key === 'ArrowRight') nextImage();
            if (e.key === 'ArrowLeft') previousImage();
            if (e.key === 'Escape') closeLightbox();
        }
    });

    // Smooth scroll for better UX
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
</script>
</div>