---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import type { Sponsor } from "@/types/data";
import { siteConfig } from "@/config";

const sponsors = Object.values(import.meta.glob<Sponsor>("@/data/sponsors/*.json", { eager: true, import: "default" }));
---

<MainGridLayout title="赞助支持">
    <div class="card-base p-6 md:p-8">
        <div class="flex items-center gap-2 mb-6">
            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
                <Icon name="material-symbols:favorite" class="text-[1.5rem]">
            </div>
            <h1 class="text-2xl font-bold text-black dark:text-white">赞助支持</h1>
        </div>

        <div class="mb-6">
            <p class="text-lg text-black/80 dark:text-white/80 mb-3">
                如果您觉得我的内容对您有帮助，欢迎通过以下方式支持我的创作。您的每一份支持都是我持续创作的动力！
            </p>
            <p class="text-sm text-black/60 dark:text-white/60">
                所有赞助将用于网站维护、服务器费用以及内容创作。
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6 max-w-4xl mx-auto">
            <!-- 支付宝 -->
            <div class="donate-card">
                <div class="flex items-center gap-3 mb-4">
                    <div class="h-10 w-10 rounded-lg bg-blue-500 flex items-center justify-center">
                        <Icon name="simple-icons:alipay" class="text-[1.5rem] text-white">
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-black dark:text-white">支付宝</h3>
                        <p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
                    </div>
                </div>
                <div class="qr-code-placeholder">
                    <div class="relative w-48 h-48 mx-auto rounded-lg overflow-hidden" style={`--theme-hue: ${siteConfig.themeColor.hue}`}>
                        <div class="loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden">
                            <div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>
                        </div>
                        <img src="/sponsors/alipay.svg" alt="支付宝二维码" class="w-full h-full object-cover opacity-0 transition-opacity duration-500" onload="this.style.opacity='1'; this.parentElement.querySelector('.loading-bar').style.opacity='0';"/>
                    </div>
                </div>
            </div>

            <!-- 微信支付 -->
            <div class="donate-card">
                <div class="flex items-center gap-3 mb-4">
                    <div class="h-10 w-10 rounded-lg bg-green-500 flex items-center justify-center">
                        <Icon name="simple-icons:wechat" class="text-[1.5rem] text-white">
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-black dark:text-white">微信支付</h3>
                        <p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
                    </div>
                </div>
                <div class="qr-code-placeholder">
                    <div class="relative w-48 h-48 mx-auto rounded-lg overflow-hidden" style={`--theme-hue: ${siteConfig.themeColor.hue}`}>
                        <div class="loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden">
                            <div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>
                        </div>
                        <img src="/sponsors/wechat.svg" alt="微信支付二维码" class="w-full h-full object-cover opacity-0 transition-opacity duration-500" onload="this.style.opacity='1'; this.parentElement.querySelector('.loading-bar').style.opacity='0';"/>
                    </div>
                </div>
            </div>

            
            </div>
        </div>

        <br>

        <!-- 其他支持方式 -->
        <div class="card-base p-6 mb-6">
            <h2 class="text-xl font-bold text-black dark:text-white mb-3">其他支持方式</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="support-card">
                    <div class="flex items-center gap-2 mb-2">
                        <Icon name="material-symbols:share" class="text-[1.2rem] text-[var(--primary)]">
                        <span class="font-semibold text-black dark:text-white">分享推荐</span>
                    </div>
                    <p class="text-sm text-black/60 dark:text-white/60">
                        将我的博客分享给更多朋友
                    </p>
                </div>

                <div class="support-card">
                    <div class="flex items-center gap-2 mb-2">
                        <Icon name="material-symbols:comment" class="text-[1.2rem] text-[var(--primary)]">
                        <span class="font-semibold text-black dark:text-white">留言互动</span>
                    </div>
                    <p class="text-sm text-black/60 dark:text-white/60">
                        在文章下方留下您的想法
                    </p>
                </div>

                <div class="support-card">
                    <div class="flex items-center gap-2 mb-2">
                        <Icon name="material-symbols:star" class="text-[1.2rem] text-[var(--primary)]">
                        <span class="font-semibold text-black dark:text-white">关注订阅</span>
                    </div>
                    <p class="text-sm text-black/60 dark:text-white/60">
                        订阅RSS或关注社交媒体
                    </p>
                </div>
            </div>
        </div>
        <div class="sponsors-section card-base p-6">
            <h2 class="text-xl font-bold text-black dark:text-white mb-3 flex items-center gap-2">
                <Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"></Icon>
                <span>已赞助的小伙伴</span>
            </h2>
            <p class="text-sm text-black/60 dark:text-white/60 mb-4">
            如果您已赞助，并且想加入赞助名单，<a target="_blank" href="https://github.com/afoim/fuwari/tree/main/src/data/friends" class="transition link text-[var(--primary)] font-medium underline">请点击这里提交</a>
            </p>
            <div class="sponsors-grid">
                {sponsors.map((sponsor) => (
                    <div class="sponsor-card">
                        <div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10" style="backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center overflow-hidden">
                            {sponsor.avatar ? (
                                <div class="relative w-full h-full rounded-lg overflow-hidden" style={`--theme-hue: ${siteConfig.themeColor.hue}`}>
                                    <div class="loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden">
                                        <div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>
                                    </div>
                                    <img src={sponsor.avatar} alt={`${sponsor.name}的头像`} loading="lazy" class="w-full h-full object-cover opacity-0 transition-opacity duration-500" onload="this.style.opacity='1'; this.parentElement.querySelector('.loading-bar').style.opacity='0';"/>
                                </div>
                            ) : (
                                <Icon name="material-symbols:person" class="text-gray-500 dark:text-gray-400 text-[1.2rem]" />
                            )}
                        </div>
                            <div class="flex-1">
                                <h4 class="font-semibold text-black dark:text-white text-sm">{sponsor.name}</h4>
                                <p class="text-xs text-black/60 dark:text-white/60">{sponsor.date}</p>
                            </div>
                            <div class="text-xs text-[var(--primary)] font-medium">{sponsor.amount}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </div>
</MainGridLayout>

<style>
.donate-card {
    @apply flex flex-col p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 transition;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.support-card {
    @apply p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.qr-code-placeholder {
    @apply text-center;
}

.sponsors-section {
    @apply mt-6;
}

.sponsors-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

.sponsor-placeholder {
    @apply transition-all duration-200 hover:scale-105;
}

.sponsor-card {
    @apply transition-all duration-200 hover:shadow-md hover:scale-105;
}
.crypto-info {
    @apply space-y-3;
}

.wallet-address, .bybit-uid {
    @apply text-center;
}

.copy-btn {
    @apply transition-colors duration-200;
}

.copy-btn:hover {
    color: var(--primary);
    opacity: 0.8;
}

.loading-bar {
    transition: opacity 0.5s ease-out;
}

@keyframes loading-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

.animate-loading-progress {
    animation: loading-progress 1.5s ease-in-out infinite;
}
</style>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        // 可以添加复制成功的提示
        alert('已复制到剪贴板');
    }, function(err) {
        console.error('复制失败: ', err);
    });
}
</script>
