---
import Layout from "@/components/Layout.astro";
import { Countdown } from "@/components/Countdown";
import WorldHeatmap from '@/components/WorldHeatmap';
import { VISITED_PLACES } from '@/consts';
---

<Layout title="其他">
    <div class="container mx-auto px-4 py-8">
        <section class="mb-16">
            <h2 class="text-3xl font-semibold text-center mb-6">距离退休还有</h2>
            <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 transition-all hover:shadow-xl">
                <Countdown client:load targetDate={"2070-04-06"} />
            </div>
        </section>
        
        <section class="mb-16">
            <h2 class="text-3xl font-semibold text-center mb-6">我的旅行足迹</h2>
            <div class="mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 transition-all hover:shadow-xl">
                <WorldHeatmap 
                    client:only="react" 
                    visitedPlaces={VISITED_PLACES}
                />
            </div>
        </section>
    </div>
</Layout>