import { Toaster } from '@/components/ui/toaster';
import { Flash } from '@/types';
import { Head, Link, usePage } from '@inertiajs/react';
import { lazy, Suspense, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import { getCategoryBadge } from './components/category-badge';
import { formatDate } from './components/date-utils';
import { DownloadSection } from './components/download-section';
import { EventItem, EventSection } from './components/event-section';
import { Footer } from './components/footer-section';
import { HeroSection } from './components/hero-section';
import { NavigationBar } from './components/navigation-bar';
import { NewsCard } from './components/news-card';
import { Preload } from './components/preload';
import { ServerStatusPill } from './components/server-status-pill';
import { useForceDarkTheme } from './components/use-force-dark-theme';

// Lazy load widgets with default export wrapper
const DiscordWidget = lazy(() => import('./components/discord-widget').then((m) => ({ default: m.DiscordWidget })));
const TopSpenderWidget = lazy(() => import('./components/topspender-widget').then((m) => ({ default: m.TopSpenderWidget })));

import { Button } from '@/components/ui/button';
import { route } from '@/lib/route-helper';
import { Bookmark, Coins, ExternalLink, Gauge, Gift, Shield, Store, Ticket, Trophy, Users, Zap } from 'lucide-react';
import { NewsBackground } from './components/news-background';
import { WelcomeModal } from './components/WelcomeModal';

// Types
interface ServerInfo {
    onlinePlayers: number;
    gmOnline: number;
    serverTime: string;
    serverDate: string;
    timezone: string;
    totalAccounts: number;
    serverOnline: boolean;
    appName: string;
    discordServerId?: string;
    discordInviteUrl?: string;
    heroBackgroundUrl?: string | null;
    heroBackgroundWebP?: string | null;
    communityBackgroundUrl?: string | null;
    newsBackgroundUrl?: string | null;
    downloadBackgroundUrl?: string | null;
    heroHeight?: number;
    smokeEnabled: boolean;
    newsSmokeEnabled: boolean;
    newsSparksEnabled: boolean;
    appNameColor?: string;
    serverStartTime?: string | null;
    heroUseLogo?: boolean;
    heroLogoUrl?: string | null;
    heroLogoSize?: number;
}

interface NewsItem {
    id: number;
    title: string;
    slug: string;
    category: 'patch' | 'download' | 'guide' | 'promo' | 'event';
    image: string | null;
    description: string;
    keywords: string;
    is_active: boolean;
    created_at: string;
    updated_at: string;
}

interface DownloadItem {
    id: number;
    name: string;
    description: string;
    size: string;
    url: string;
    icon_name: string;
    mirror_url?: string;
    mirror_icon?: string;
    sort_order: number;
    is_active: boolean;
}

interface TopSpenderItem {
    id: number;
    rank: number;
    name: string;
    class: number;
    class_name: string;
    amount: number;
}

interface WebsiteProps {
    serverInfo: ServerInfo;
    latestNews?: NewsItem[];
    downloadItems?: DownloadItem[];
    topSpenders?: TopSpenderItem[];
    activeEvents?: EventItem[];
    userCharacters?: { id: number; name: string }[];
    pagination?: {
        current_page: number;
        last_page: number;
        per_page: number;
        total: number;
    };
}

export default function WebsiteIndex({
    serverInfo,
    latestNews = [],
    downloadItems = [],
    topSpenders = [],
    activeEvents = [],
    userCharacters = [],
    pagination,
}: WebsiteProps) {
    const { appLogoUrl, flash } = usePage().props as { appLogoUrl?: string | null; flash?: Flash; services?: { menu_event_enabled?: boolean } };
    const [popupNews, setPopupNews] = useState<any>(null);
    const [showModal, setShowModal] = useState(false);

    const menuEventEnabled = (usePage().props as any).services?.menu_event_enabled ?? true;

    // Force dark theme
    useForceDarkTheme();

    // Fetch active popup news
    useEffect(() => {
        const fetchPopup = async () => {
            try {
                const response = await fetch(route('api.news.popup.active'));
                const data = await response.json();

                if (data && data.id) {
                    const storageKey = `news_popup_dismissed_${data.id}`;
                    const dismissed = localStorage.getItem(storageKey);

                    let shouldShow = true;

                    if (dismissed) {
                        if (data.popup_frequency === 'daily') {
                            try {
                                const dismissData = JSON.parse(dismissed);
                                if (dismissData.expiry && Date.now() < dismissData.expiry) {
                                    shouldShow = false;
                                } else {
                                    localStorage.removeItem(storageKey);
                                }
                            } catch {
                                localStorage.removeItem(storageKey);
                            }
                        } else {
                            shouldShow = false;
                        }
                    }

                    if (shouldShow) {
                        setPopupNews(data);
                        setShowModal(true);
                    }
                }
            } catch (error) {
                console.error('Failed to fetch popup news:', error);
            }
        };

        fetchPopup();
    }, []);

    // Show flash messages
    useEffect(() => {
        if (flash?.success) toast.success(flash.success);
        if (flash?.error) toast.error(flash.error);
        if (flash?.info) toast.info(flash.info);
        if (flash?.warning) toast.warning(flash.warning);
    }, [flash]);

    // Memoize pagination controls
    const paginationControls = useMemo(() => {
        if (!pagination || pagination.last_page <= 1) return null;

        return (
            <div className="mt-8 flex justify-center">
                <div className="flex gap-2">
                    {pagination.current_page > 1 && (
                        <Button
                            variant="outline"
                            size="sm"
                            asChild
                            className="border-[rgba(168,85,247,0.35)] text-[#d8b4fe] hover:bg-[rgba(168,85,247,0.1)]"
                        >
                            <Link href={`/?page=${pagination.current_page - 1}`}>Previous</Link>
                        </Button>
                    )}
                    <span className="px-4 py-2 text-sm" style={{ color: '#a78bfa' }}>
                        Page {pagination.current_page} of {pagination.last_page}
                    </span>
                    {pagination.current_page < pagination.last_page && (
                        <Button
                            variant="outline"
                            size="sm"
                            asChild
                            className="border-[rgba(168,85,247,0.35)] text-[#d8b4fe] hover:bg-[rgba(168,85,247,0.1)]"
                        >
                            <Link href={`/?page=${pagination.current_page + 1}`}>Next</Link>
                        </Button>
                    )}
                </div>
            </div>
        );
    }, [pagination]);

    // Memoize news content
    const newsContent = useMemo(() => {
        if (latestNews && latestNews.length > 0) {
            return (
                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    {latestNews.map((news, index) => (
                        <NewsCard
                            key={news.id}
                            news={news}
                            getCategoryBadge={getCategoryBadge}
                            formatDate={formatDate}
                            featured={index === 0}
                            variant={index === 0 ? 'grand' : index === 2 ? 'shadow' : 'master'}
                        />
                    ))}
                </div>
            );
        }

        return (
            <div className="flex flex-col items-center justify-center py-16 text-center">
                <Bookmark className="mb-4 h-16 w-16" style={{ color: 'rgba(168,85,247,0.3)' }} />
                <h3 className="mb-2 text-xl font-semibold" style={{ color: '#ddd6fe' }}>
                    No News Available
                </h3>
                <p style={{ color: '#a78bfa' }}>There are currently no news articles to display.</p>
            </div>
        );
    }, [latestNews]);

    // Loading fallback
    const WidgetSkeleton = () => (
        <div
            className="animate-pulse space-y-4 rounded-lg border p-4"
            style={{ background: 'rgba(15,5,34,0.5)', borderColor: 'rgba(168,85,247,0.22)' }}
        >
            <div className="h-4 w-1/3 rounded" style={{ background: 'rgba(168,85,247,0.12)' }} />
            <div className="h-4 w-full rounded" style={{ background: 'rgba(168,85,247,0.12)' }} />
            <div className="h-4 w-2/3 rounded" style={{ background: 'rgba(168,85,247,0.12)' }} />
        </div>
    );

    return (
        <>
            <Head title="" />
            <Preload logoUrl={appLogoUrl} appName={serverInfo.appName} />
            <div
                className="flex min-h-screen flex-col"
                style={{
                    background:
                        'radial-gradient(circle at 50% 0%, rgba(88,28,135,0.34), transparent 36%), linear-gradient(180deg, #070012 0%, #05000e 46%, #090118 100%)',
                }}
            >
                <NavigationBar appName={serverInfo.appName} appLogoUrl={appLogoUrl} heroUseLogo={serverInfo.heroUseLogo} />

                {/* Server Status Pill - Fixed Position */}
                <ServerStatusPill
                    serverOnline={serverInfo.serverOnline}
                    onlinePlayers={serverInfo.onlinePlayers}
                    totalAccounts={serverInfo.totalAccounts}
                />

                <main className="content-wrap relative flex-1">
                    {/* Hero Section */}
                    <HeroSection
                        appName={serverInfo.appName}
                        heroBackgroundUrl={serverInfo.heroBackgroundUrl}
                        heroBackgroundWebP={serverInfo.heroBackgroundWebP}
                        heroHeight={serverInfo.heroHeight}
                        smokeEnabled={serverInfo.smokeEnabled}
                        newsSparksEnabled={serverInfo.newsSparksEnabled}
                        appNameColor={serverInfo.appNameColor}
                        serverStartTime={serverInfo.serverStartTime}
                        heroUseLogo={serverInfo.heroUseLogo}
                        heroLogoUrl={serverInfo.heroLogoUrl}
                        heroLogoSize={serverInfo.heroLogoSize}
                    />

                    {/* Blur transition between Hero and News */}
                    <div className="pointer-events-none relative right-0 left-0 z-20 h-16 w-full bg-gradient-to-b from-transparent to-[#05000e]" />

                    {/* News + Top Up — share the same background */}
                    <NewsBackground newsBackgroundUrl={serverInfo.newsBackgroundUrl}>
                        {/* News Section */}
                        <div id="news" className="relative z-10 mx-auto w-full max-w-[1600px] scroll-mt-20 py-12">
                            {/* Section Header */}
                            <div className="mb-10 px-4 text-center">
                                <div
                                    className="mb-3 text-sm tracking-[0.35em] uppercase"
                                    style={{ color: '#d946ef', fontFamily: 'Rajdhani, sans-serif' }}
                                >
                                    Latest Updates
                                </div>
                                <h2
                                    className="mb-4 text-3xl font-bold md:text-4xl"
                                    style={{
                                        color: '#f5d0fe',
                                        fontFamily: 'Cinzel Decorative, serif',
                                        textShadow: '0 0 30px rgba(168,85,247,.45)',
                                    }}
                                >
                                    News
                                </h2>
                                <div className="mx-auto flex max-w-xl items-center justify-center gap-3">
                                    <div className="h-px flex-1 bg-gradient-to-r from-transparent to-[#7e22ce]" />
                                    <span className="text-sm text-[#d946ef]">✦</span>
                                    <div className="h-px flex-1 bg-gradient-to-l from-transparent to-[#7e22ce]" />
                                </div>
                            </div>

                            {/* News Grid */}
                            <div className="mx-auto max-w-6xl px-4">
                                {newsContent}
                                {paginationControls}
                            </div>
                        </div>

                        {/* Event Section */}
                        {menuEventEnabled && <EventSection activeEvents={activeEvents} userCharacters={userCharacters} />}

                        {/* Top Up Section */}
                        <div id="donations" className="relative z-10 w-full scroll-mt-20 py-16">
                            <div className="container mx-auto max-w-6xl px-4">
                                {/* Section Header */}
                                <div className="mb-10 px-4 text-center">
                                    <div
                                        className="mb-3 text-sm tracking-[0.35em] uppercase"
                                        style={{ color: '#d946ef', fontFamily: 'Rajdhani, sans-serif' }}
                                    >
                                        Support the Server
                                    </div>
                                    <h2
                                        className="mb-4 text-3xl font-bold md:text-4xl"
                                        style={{
                                            color: '#f5d0fe',
                                            fontFamily: 'Cinzel Decorative, serif',
                                            textShadow: '0 0 30px rgba(168,85,247,.45)',
                                        }}
                                    >
                                        Top Up
                                    </h2>
                                    <div className="mx-auto flex max-w-xl items-center justify-center gap-3">
                                        <div className="h-px flex-1 bg-gradient-to-r from-transparent to-[#7e22ce]" />
                                        <span className="text-sm text-[#d946ef]">✦</span>
                                        <div className="h-px flex-1 bg-gradient-to-l from-transparent to-[#7e22ce]" />
                                    </div>
                                </div>

                                {/* New Donations Layout */}
                                <div className="mx-auto mb-16 grid max-w-5xl grid-cols-1 items-start gap-8 lg:grid-cols-2">
                                    {/* Left Column: Text & Features */}
                                    <div className="flex flex-col" data-aos="fade-right">
                                        <p
                                            style={{
                                                fontFamily: "'Rajdhani', sans-serif",
                                                color: '#a78bfa',
                                                lineHeight: 1.8,
                                                marginBottom: '1.8rem',
                                                fontSize: '12px',
                                            }}
                                        >
                                            Your support keeps the server alive and growing. All donations go directly towards server costs,
                                            development, and new content.
                                        </p>

                                        <div className="flex flex-col gap-2">
                                            <div
                                                className="flex items-start gap-4 border-l-2 py-3 pl-4 transition-all hover:border-l-[3px]"
                                                style={{
                                                    borderColor: '#d946ef',
                                                    background: 'linear-gradient(90deg, rgba(168,85,247,.12), transparent)',
                                                }}
                                            >
                                                <div className="mt-1 flex flex-shrink-0 items-center justify-center">
                                                    <Shield style={{ width: '16px', color: '#d8b4fe' }} />
                                                </div>
                                                <div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            fontWeight: 700,
                                                            color: '#ddd6fe',
                                                            letterSpacing: '.03em',
                                                            marginBottom: '.2rem',
                                                        }}
                                                    >
                                                        Never Pay-to-Win
                                                    </div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            color: '#a78bfa',
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        No stat advantages, no unfair edge.
                                                    </div>
                                                </div>
                                            </div>

                                            <div
                                                className="flex items-start gap-4 border-l-2 py-3 pl-4 transition-all hover:border-l-[3px]"
                                                style={{
                                                    borderColor: '#d946ef',
                                                    background: 'linear-gradient(90deg, rgba(168,85,247,.12), transparent)',
                                                }}
                                            >
                                                <div className="mt-1 flex flex-shrink-0 items-center justify-center">
                                                    <Zap style={{ width: '16px', color: '#d8b4fe' }} />
                                                </div>
                                                <div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            fontWeight: 700,
                                                            color: '#ddd6fe',
                                                            letterSpacing: '.03em',
                                                            marginBottom: '.2rem',
                                                        }}
                                                    >
                                                        Instant Delivery
                                                    </div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            color: '#a78bfa',
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        Coins are credited to your account automatically upon payment confirmation.
                                                    </div>
                                                </div>
                                            </div>

                                            <div
                                                className="flex items-start gap-4 border-l-2 py-3 pl-4 transition-all hover:border-l-[3px]"
                                                style={{
                                                    borderColor: '#d946ef',
                                                    background: 'linear-gradient(90deg, rgba(168,85,247,.12), transparent)',
                                                }}
                                            >
                                                <div className="mt-1 flex flex-shrink-0 items-center justify-center">
                                                    <Coins style={{ width: '16px', color: '#d8b4fe' }} />
                                                </div>
                                                <div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            fontWeight: 700,
                                                            color: '#ddd6fe',
                                                            letterSpacing: '.03em',
                                                            marginBottom: '.2rem',
                                                        }}
                                                    >
                                                        Bonus on Larger Packages
                                                    </div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '12px',
                                                            color: '#a78bfa',
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        The bigger the package, the more bonus coins you receive on top.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="text-left" style={{ marginTop: '1.8rem' }}>
                                            <a
                                                href="/dashboard/topup/history"
                                                className="inline-flex items-center gap-2 rounded transition-all hover:bg-[rgba(168,85,247,0.1)]"
                                                style={{
                                                    fontFamily: "'Rajdhani', sans-serif",
                                                    fontSize: '.72rem',
                                                    fontWeight: 700,
                                                    letterSpacing: '.12em',
                                                    textTransform: 'uppercase',
                                                    color: '#d8b4fe',
                                                    border: '1px solid #7e22ce',
                                                    padding: '.35rem .8rem',
                                                }}
                                            >
                                                <Store style={{ width: '14px' }} />
                                                Visit Top Up
                                            </a>
                                        </div>
                                    </div>

                                    {/* Right Column: Panel & Support */}
                                    <div className="flex flex-col gap-[1.2rem]" data-aos="fade-left">
                                        {/* Panel Card */}
                                        <div
                                            className="relative flex flex-col overflow-hidden rounded border p-8 text-center"
                                            style={{
                                                background: 'linear-gradient(135deg, rgba(30,10,62,.58), rgba(10,2,24,.72))',
                                                borderColor: 'rgba(168,85,247,0.22)',
                                            }}
                                        >
                                            <div
                                                className="absolute top-0 right-0 left-0 h-px"
                                                style={{ background: 'linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent)' }}
                                            />

                                            <div className="mb-4 flex items-center justify-center">
                                                <div
                                                    className="flex h-12 w-12 items-center justify-center rounded"
                                                    style={{ border: '1px solid rgba(168,85,247,0.22)', background: 'rgba(201,168,76,.06)' }}
                                                >
                                                    <Gauge className="h-5 w-5" style={{ color: '#d8b4fe' }} />
                                                </div>
                                            </div>

                                            <div
                                                style={{
                                                    fontFamily: "'Cinzel', serif",
                                                    fontSize: '1rem',
                                                    fontWeight: 700,
                                                    color: '#f5d0fe',
                                                    marginBottom: '.6rem',
                                                }}
                                            >
                                                Panel Perfect World V.2.0
                                            </div>

                                            <div
                                                style={{
                                                    fontFamily: "'Rajdhani', sans-serif",
                                                    fontSize: '.88rem',
                                                    color: '#a78bfa',
                                                    lineHeight: 1.6,
                                                    marginBottom: '1.3rem',
                                                    maxWidth: '340px',
                                                    marginInline: 'auto',
                                                }}
                                            >
                                                Manage your account, donate, claim rewards, refer a friend, use services, rankings, Redeem Voucher,
                                                Shop and Top Spender — all in one place.
                                            </div>

                                            <div className="flex flex-wrap justify-center gap-2" style={{ marginBottom: '1.2rem' }}>
                                                <span
                                                    className="inline-flex items-center gap-1.5 rounded border px-2 py-1"
                                                    style={{
                                                        fontFamily: "'Rajdhani', sans-serif",
                                                        fontSize: '.72rem',
                                                        fontWeight: 700,
                                                        letterSpacing: '.08em',
                                                        color: '#a78bfa',
                                                        borderColor: 'rgba(168,85,247,0.22)',
                                                        background: 'rgba(168,85,247,.06)',
                                                    }}
                                                >
                                                    <Coins className="h-3 w-3" /> Donate
                                                </span>
                                                <span
                                                    className="inline-flex items-center gap-1.5 rounded border px-2 py-1"
                                                    style={{
                                                        fontFamily: "'Rajdhani', sans-serif",
                                                        fontSize: '.72rem',
                                                        fontWeight: 700,
                                                        letterSpacing: '.08em',
                                                        color: '#d8b4fe',
                                                        borderColor: '#7e22ce',
                                                        background: 'rgba(168,85,247,.12)',
                                                    }}
                                                >
                                                    <Gift className="h-3 w-3" /> Promo Offers
                                                </span>
                                                <span
                                                    className="inline-flex items-center gap-1.5 rounded border px-2 py-1"
                                                    style={{
                                                        fontFamily: "'Rajdhani', sans-serif",
                                                        fontSize: '.72rem',
                                                        fontWeight: 700,
                                                        letterSpacing: '.08em',
                                                        color: '#a78bfa',
                                                        borderColor: 'rgba(168,85,247,0.22)',
                                                        background: 'rgba(168,85,247,.06)',
                                                    }}
                                                >
                                                    <Trophy className="h-3 w-3" /> Rankings
                                                </span>
                                                <span
                                                    className="inline-flex items-center gap-1.5 rounded border px-2 py-1"
                                                    style={{
                                                        fontFamily: "'Rajdhani', sans-serif",
                                                        fontSize: '.72rem',
                                                        fontWeight: 700,
                                                        letterSpacing: '.08em',
                                                        color: '#a78bfa',
                                                        borderColor: 'rgba(168,85,247,0.22)',
                                                        background: 'rgba(168,85,247,.06)',
                                                    }}
                                                >
                                                    <Users className="h-3 w-3" /> Referrals
                                                </span>
                                                <span
                                                    className="inline-flex items-center gap-1.5 rounded border px-2 py-1"
                                                    style={{
                                                        fontFamily: "'Rajdhani', sans-serif",
                                                        fontSize: '.72rem',
                                                        fontWeight: 700,
                                                        letterSpacing: '.08em',
                                                        color: '#a78bfa',
                                                        borderColor: 'rgba(168,85,247,0.22)',
                                                        background: 'rgba(168,85,247,.06)',
                                                    }}
                                                >
                                                    <Ticket className="h-3 w-3" /> Tickets
                                                </span>
                                            </div>

                                            <a
                                                href="/dashboard"
                                                className="inline-flex items-center justify-center gap-2 rounded transition-all hover:bg-[rgba(168,85,247,0.1)]"
                                                style={{
                                                    fontFamily: "'Rajdhani', sans-serif",
                                                    fontSize: '.72rem',
                                                    fontWeight: 700,
                                                    letterSpacing: '.12em',
                                                    textTransform: 'uppercase',
                                                    color: '#d8b4fe',
                                                    border: '1px solid #7e22ce',
                                                    padding: '.35rem .8rem',
                                                    alignSelf: 'center',
                                                    marginTop: '1.2rem',
                                                }}
                                            >
                                                <ExternalLink style={{ width: '14px' }} />
                                                Open Panel
                                            </a>
                                        </div>

                                        {/* Support Card */}
                                        <div
                                            className="relative flex flex-col items-center justify-between gap-4 overflow-hidden rounded border p-4 sm:flex-row"
                                            style={{
                                                background: 'linear-gradient(135deg, rgba(88,28,135,.16), rgba(10,2,24,.9))',
                                                borderColor: 'rgba(168,85,247,.32)',
                                            }}
                                        >
                                            <div
                                                className="absolute top-0 right-0 left-0 h-px"
                                                style={{ background: 'linear-gradient(90deg, transparent, rgba(168,85,247,.4), transparent)' }}
                                            />

                                            <div className="relative z-10 flex flex-1 items-center gap-4">
                                                <div
                                                    className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded border"
                                                    style={{ background: 'rgba(88,101,242,.12)', borderColor: 'rgba(88,101,242,.25)' }}
                                                >
                                                    <svg className="h-5 w-5 text-[#5865F2]" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '.92rem',
                                                            fontWeight: 700,
                                                            color: '#ddd6fe',
                                                            marginBottom: '.2rem',
                                                        }}
                                                    >
                                                        Need help with a donation?
                                                    </div>
                                                    <div
                                                        style={{
                                                            fontFamily: "'Rajdhani', sans-serif",
                                                            fontSize: '.78rem',
                                                            color: '#a78bfa',
                                                            lineHeight: 1.5,
                                                        }}
                                                    >
                                                        Open a support ticket in our Discord server and a staff member will assist you promptly.
                                                    </div>
                                                </div>
                                            </div>
                                            <a
                                                href={serverInfo.discordInviteUrl || 'https://discord.gg/'}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex flex-shrink-0 items-center justify-center rounded transition-all hover:-translate-y-px hover:shadow-[0_4px_16px_rgba(168,85,247,.4)]"
                                                style={{
                                                    fontFamily: "'Rajdhani', sans-serif",
                                                    fontSize: '.72rem',
                                                    fontWeight: 700,
                                                    letterSpacing: '.08em',
                                                    textTransform: 'uppercase',
                                                    color: '#fff',
                                                    background: '#5865f2',
                                                    padding: '.45rem 1rem',
                                                }}
                                            >
                                                <Ticket style={{ width: '13px', marginRight: '4px' }} />
                                                Open Ticket
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                {/* Extra Original Widgets (Top Spender & Discord) below */}
                                <div className="mx-auto grid max-w-5xl grid-cols-1 items-start gap-6 lg:grid-cols-2">
                                    <Suspense fallback={<WidgetSkeleton />}>
                                        <TopSpenderWidget topSpenders={topSpenders} widgetBackgroundUrl={serverInfo.communityBackgroundUrl} />
                                    </Suspense>
                                    {serverInfo.discordServerId && (
                                        <Suspense fallback={<WidgetSkeleton />}>
                                            <DiscordWidget serverId={serverInfo.discordServerId} />
                                        </Suspense>
                                    )}
                                </div>
                            </div>
                        </div>
                    </NewsBackground>

                    {/* Download Section & Footer - with own background */}
                    <section
                        id="download"
                        className="relative w-full scroll-mt-20"
                        style={{
                            backgroundImage: serverInfo.downloadBackgroundUrl ? `url(${serverInfo.downloadBackgroundUrl})` : 'none',
                            backgroundSize: 'cover',
                            backgroundPosition: 'center',
                            backgroundRepeat: 'no-repeat',
                            backgroundAttachment: 'fixed',
                        }}
                    >
                        {/* Background overlay */}
                        <div
                            className="absolute inset-0"
                            style={{
                                backgroundColor: serverInfo.downloadBackgroundUrl ? 'rgba(0,0,0,0.4)' : '#070012',
                            }}
                        />

                        <div className="relative z-10">
                            <DownloadSection downloadItems={downloadItems} downloadBackgroundUrl={serverInfo.downloadBackgroundUrl} />
                            <Footer appName={serverInfo.appName} logoUrl={appLogoUrl} />
                        </div>
                    </section>
                </main>
            </div>

            {/* Welcome Modal */}
            <WelcomeModal isOpen={showModal} onClose={() => setShowModal(false)} news={popupNews} />

            <Toaster />
        </>
    );
}