<?php
// ══════════════════════════════════════════════════
// 公共头部 - 首页统一风格（深色+绿色+玻璃效果+Tailwind）
// 内置页脚，无需单独调用 footer.php
// ══════════════════════════════════════════════════

$navPages = [
    '/'     => ['🏠', '首页'],
    '2.php' => ['📱', '库存'],
    '3.php' => ['📋', '已售'],
    '4.php' => ['💰', '杨晓龙'],
    '5.php' => ['🎧', '耳机'],
    'crm'   => ['📊', 'CRM'],
    'debt'  => ['📋', '欠款'],
    'fapiao'=> ['📄', '发票'],
];

// 外部链接映射
$externalLinks = [
    'crm'    => 'https://nickys.cn/crm/',
    'debt'   => 'https://nickys.cn/debt.html',
    'fapiao' => 'https://nickys.cn/fapiao.html',
];

$currentPage = basename($_SERVER['PHP_SELF']);
if ($currentPage === '') $currentPage = '/';

// 自动在脚本结束处输出页脚
register_shutdown_function(function() {
    echo "    </div>\n"; // 关闭 .page-wrap
    echo "    </main>\n"; // 关闭 main
    echo '    <footer class="py-8 px-6 border-t border-gray-800">' . "\n";
    echo '        <div class="max-w-6xl mx-auto text-center text-gray-500 text-sm flex items-center justify-center gap-3">' . "\n";
    echo '            <span>© Nickys.cn</span>' . "\n";
    echo '            <span>·</span>' . "\n";
    echo '            <span>最后更新：' . date('Y-m-d H:i') . '</span>' . "\n";
    echo '            <span>·</span>' . "\n";
    echo '            <span>💻 by Hermes</span>' . "\n";
    echo '        </div>' . "\n";
    echo '    </footer>' . "\n";
    echo '    <script>' . "\n";
    echo '        // Reveal animations (同首页风格)' . "\n";
    echo '        const observer = new IntersectionObserver((entries) => {' . "\n";
    echo '            entries.forEach(entry => {' . "\n";
    echo '                if (entry.isIntersecting) entry.target.classList.add("active");' . "\n";
    echo '            });' . "\n";
    echo '        }, { threshold: 0 });' . "\n";
    echo '        document.querySelectorAll(".reveal").forEach(el => observer.observe(el));' . "\n";
    echo '    </script>' . "\n";
    echo '</body>' . "\n";
    echo '</html>' . "\n";
});
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($pageTitle) ? $pageTitle . ' - ' : ''; ?>Nickys.cn</title>
    <link rel="icon" type="image/png" href="/web_images/Favorite.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E293B',
                        secondary: '#334155',
                        cta: '#22C55E',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        heading: ['Bodoni Moda', 'serif'],
                        body: ['Jost', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        /* ========== 基础 ========== */
        body { font-family: 'Jost', sans-serif; background: #0F172A; color: #F8FAFC; }
        .font-heading { font-family: 'Bodoni Moda', serif; }

        /* ========== 玻璃效果 ========== */
        .glass { background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .glass-light { background: rgba(30, 41, 59, 0.3); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); }

        /* ========== 滚动动画 ========== */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .transition-smooth { transition: all 0.3s ease; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; }
        }

        /* ========== 渐变文字 ========== */
        .gradient-text { background: linear-gradient(135deg, #22C55E, #4ADE80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .emoji-natural { -webkit-text-fill-color: initial; background: none; color: inherit; }

        /* ========== 导航链接卡片 ========== */
        .nav-link { transition: all 0.3s ease; }
        .nav-link:hover { transform: translateY(-2px); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
        .nav-link.active { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.4); color: #22C55E; }

        /* ========== 表格样式 ========== */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        thead th {
            background: rgba(34, 197, 94, 0.12);
            color: #4ADE80;
            padding: 8px 8px;
            text-align: left;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            position: sticky;
            top: 0;
        }
        tbody td {
            padding: 6px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: #d1d5db;
            vertical-align: middle;
        }
        tbody tr { transition: background 0.2s; }
        tbody tr:hover { background: rgba(34, 197, 94, 0.06); }
        tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

        /* ========== 分区标题 ========== */
        h2 { margin-top: 16px;
            font-size: 24px;
            font-weight: 600;
            color: #4ADE80;
            margin: 32px 0 16px;
            padding-left: 14px;
            border-left: 3px solid #22C55E;
        }
        h2:first-of-type { margin-top: 0; }

        /* ========== 价格标记 ========== */
        .price-highlight { color: #f59e0b; font-weight: 600; }
        .price-profit { color: #60A5FA; font-weight: 600; }
        .price-strike { color: rgba(255, 255, 255, 0.3); text-decoration: line-through; font-size: 13px; }
        .tag {
            display: inline-block;
            background: rgba(34, 197, 94, 0.12);
            color: #4ADE80;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            margin: 1px 2px;
        }
        .tag-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
        .tag-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

        /* ========== 正文辅助 ========== */
        .page-header p { font-size: 16px; }
        .page-header .text-cta { font-size: 16px; letter-spacing: 0.15em; }

        /* ========== 通知 ========== */
        .notice {
            padding: 14px 18px;
            border-radius: 12px;
            font-size: 13px;
            margin-bottom: 20px;
            border: 1px solid;
        }
        .notice-info { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.15); color: #93c5fd; }
        .notice-warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.15); color: #fcd34d; }

        /* ========== 下载区 ========== */
        .download-link { font-size: 16px; }

        /* ========== 链接 ========== */
        a { color: #93c5fd; text-decoration: none; transition: color 0.2s; }
        a:hover { color: #4ADE80; }

        /* ========== 分隔线 ========== */
        hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); margin: 24px 0; }

        /* ========== 表格列宽控制 ========== */
        table { table-layout: auto; width: 100%; }
        thead th, tbody td { word-break: break-word; }
        /* 允许长文本列换行 */
        tbody td:nth-child(4),
        tbody td:nth-child(5),
        tbody td:first-child { white-space: nowrap; }
        thead th:last-child { min-width: 72px; }
        tbody td:last-child { white-space: nowrap; text-align: center; font-weight: 600; color: #fbbf24; }
        /* 价格列右对齐 */

        /* ========== 响应式 ========== */
        @media (max-width: 640px) {
            .top-nav { padding: 0 6px; gap: 2px; }
            .top-nav a { padding: 6px 10px; font-size: 13px; gap: 3px; }
            .page-wrap { padding: 16px 12px 40px; }
            .page-header { padding: 60px 12px 20px; }
            .page-header h1 { font-size: 28px; }
            table { font-size: 12px; }
            thead th,
            tbody td { padding: 8px 6px; }
            thead th { font-size: 11px; }
            /* 长文本列自动换行 */
            tbody td:nth-child(4),
            tbody td:nth-child(5),
            tbody td:nth-child(7),
            tbody td:nth-child(8) {
                white-space: normal;
                word-break: break-all;
                max-width: 120px;
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 背景渐变光晕 -->
    <div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-cta/5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl"></div>
    </div>

    <!-- ═══ 顶部导航（首页风格：固定玻璃顶栏） ═══ -->
    <header class="fixed top-4 left-4 right-4 z-50">
        <div class="glass rounded-2xl px-4 py-2 max-w-6xl mx-auto flex items-center justify-between" style="backdrop-filter: blur(16px);">
            <span class="font-heading text-lg font-bold text-light whitespace-nowrap">📱 二手机</span>
            <nav class="flex items-center gap-1 overflow-x-auto">
                <?php foreach ($navPages as $href => [$icon, $label]): 
                    $linkUrl = $href;
                    $isExternal = false;
                    if (isset($externalLinks[$href])) {
                        $linkUrl = $externalLinks[$href];
                        $isExternal = true;
                    }
                ?>
                    <a href="<?= $linkUrl === '/' ? '/' : $linkUrl ?>" 
                       class="nav-link px-3 py-1.5 rounded-xl text-sm font-medium whitespace-nowrap <?= (!$isExternal && $currentPage === $href) ? 'active' : 'text-gray-400 hover:text-light' ?>" 
                       style="border: 1px solid transparent;"
                       <?= $isExternal ? 'target="_blank"' : '' ?>>
                        <?= $icon ?> <?= $label ?>
                    </a>
                <?php endforeach; ?>
            </nav>
        </div>
    </header>

    <!-- ═══ 页面内容 ═══ -->
    <main class="pt-24 pb-12 px-6">
        <div class="page-wrap max-w-6xl mx-auto">

