---
import Footer from '../components/Footer.astro'
import { APP_NAME } from '../config/app';
import '../styles/global.css'
import '../styles/theme.css'
const {description, title, keywords} = Astro.props;
const {template_config} = Astro.locals;
console.log(template_config)
---
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/logo.png" />
		<title>{title}</title>
		<meta name="description" content={description} />
		<meta name="keywords" content={keywords} />
		<meta name="baidu-site-verification" content="codeva-kLMUXYuoiO" />
		<!-- <link href="https://fonts.googleapis.com/css2?family=Graphik:wght@400;500;600;700&display=swap" rel="stylesheet"> -->
	</head>
	<body>
		<header>
			<div class="logo-container">
				<div class="logo-text"><a href="/">{template_config.app_name}</a></div>
			</div>
			<button class="mobile-menu-btn" aria-label="打开菜单">
				<span></span>
				<span></span>
				<span></span>
			</button>
			<nav class="desktop-nav">
				<ul>
					<li><a title="首页" href="/">首页</a></li>
					<li><a title="新闻专栏" href="/news">新闻专栏</a></li>
				</ul>
			</nav>
			<nav class="mobile-nav">
				<ul>
					<li><a title="首页" href="/">首页</a></li>
					<li><a title="新闻专栏" href="/news">新闻专栏</a></li>
				</ul>
			</nav>
		</header>
		<main>
			<slot />
		</main>
		<footer class="site-footer">
			<div class="footer-content">
				<div class="footer-logo">
					<a href="/" title={template_config.app_name}>{ template_config.app_name }</a>
				</div>
				<div class="footer-links">
					<div class="footer-column">
						<h4>浏览</h4>
						<ul>
							<li><a href="/news" title="新闻专栏">新闻专栏</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="footer-bottom">
				<div class="copyright">
					© {new Date().getFullYear()} { template_config.app_company }. 保留所有权利。
				</div>
				<div class="icpoo">
					<a target="_blank" rel="noopener" class="beiancil" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=65400402000209" title="公安备案信息">
						<span>新公网安备 65400402000209号</span>
					</a>
				</div>
			</div>
		</footer>
	</body>
</html>

<div class="background-animation"></div>

<style>
	:root {
		--primary-color: #4F46E5;
		--primary-light: #818CF8;
		--primary-dark: #3730A3;
		--accent-color: #10B981;
		--accent-light: #34D399;
		--accent-dark: #059669;
		--background-light: #FFFFFF;
		--background-off-white: #F8FAFC;
		--background-gray: #F1F5F9;
		--text-primary: #000000;
		--text-secondary: #64748B;
		--gradient-start: #FFFFFF;
		--gradient-end: #F8FAFC;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		font-family: 'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
		background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
		background-attachment: fixed;
		background-size: cover;
		color: var(--text-primary);
		position: relative;
		overflow-x: hidden;
	}

	.background-animation {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		overflow: hidden;
	}

	.background-animation::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: 
			radial-gradient(circle at 20% 30%, rgba(79, 70, 229, 0.03), transparent 50%),
			radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.03), transparent 50%),
			radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.03), transparent 50%);
		animation: rotate 60s linear infinite;
		z-index: -1;
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.logo-container {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		z-index: 101;
	}

	.logo-image {
		width: 40px;
		height: 40px;
		object-fit: contain;
		transition: transform 0.3s ease;
	}

	.logo-container:hover .logo-image {
		transform: scale(1.1);
	}

	.logo-text {
		font-size: 1.5rem;
		font-weight: 700;
		background: black;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.mobile-menu-btn {
		display: none;
		flex-direction: column;
		justify-content: space-between;
		width: 30px;
		height: 21px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		z-index: 101;
	}

	.mobile-menu-btn span {
		width: 100%;
		height: 3px;
		background-color: var(--text-primary);
		border-radius: 3px;
		transition: all 0.3s ease;
	}

	.desktop-nav {
		display: flex;
	}

	.mobile-nav {
		display: none;
	}

	nav ul {
		display: flex;
		list-style: none;
		gap: 2.5rem;
		margin: 0;
		padding: 0;
	}

	nav a {
		color: black;
		text-decoration: none;
		font-weight: 500;
		transition: all 0.3s ease;
		position: relative;
		padding: 0.5rem 0;
	}

	nav a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		/* background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); */
		background: black;
		transition: width 0.3s ease;
	}

	nav a:hover {
		color: var(--text-primary);
	}

	nav a:hover::after {
		width: 100%;
	}

	button {
		padding: 0.75rem 1.5rem;
		border-radius: 8px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
	}


	main {
		flex: 1;
		padding: 2rem;
		max-width: 1200px;
		margin: 0 auto;
		width: 100%;
		box-sizing: border-box;
		/* background: var(--background-light); */
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@media (max-width: 768px) {
		header {
			padding: 1rem;
		}

		.mobile-menu-btn {
			display: flex;
		}

		.desktop-nav {
			display: none;
		}

		.mobile-nav {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: rgba(255, 255, 255, 0.98);
			padding: 6rem 2rem 2rem;
			box-sizing: border-box;
			z-index: 100;
		}

		.mobile-nav.active {
			display: block;
		}

		.mobile-nav ul {
			flex-direction: column;
			gap: 1.5rem;
			align-items: center;
		}

		.mobile-nav a {
			font-size: 1.2rem;
			color: var(--text-primary);
		}

		.mobile-menu-btn.active span:nth-child(1) {
			transform: translateY(9px) rotate(45deg);
		}

		.mobile-menu-btn.active span:nth-child(2) {
			opacity: 0;
		}

		.mobile-menu-btn.active span:nth-child(3) {
			transform: translateY(-9px) rotate(-45deg);
		}
	}

	@media (max-width: 480px) {
		.logo-text {
			font-size: 1.2rem;
		}

		.logo-image {
			width: 32px;
			height: 32px;
		}

		.mobile-nav {
			padding: 5rem 1.5rem 1.5rem;
		}

		.mobile-nav a {
			font-size: 1.1rem;
		}
	}
</style>

<script>
	// 移动端菜单交互
	const menuBtn = document.querySelector('.mobile-menu-btn');
	const mobileNav = document.querySelector('.mobile-nav');
	const body = document.body;

	menuBtn?.addEventListener('click', () => {
		menuBtn.classList.toggle('active');
		mobileNav?.classList.toggle('active');
		body.style.overflow = body.style.overflow === 'hidden' ? '' : 'hidden';
	});

	// 点击导航链接时关闭菜单
	const mobileNavLinks = document.querySelectorAll('.mobile-nav a');
	mobileNavLinks.forEach(link => {
		link.addEventListener('click', () => {
			menuBtn?.classList.remove('active');
			mobileNav?.classList.remove('active');
			body.style.overflow = '';
		});
	});

	// 点击页面其他区域关闭菜单
	document.addEventListener('click', (e) => {
		if (mobileNav?.classList.contains('active') && 
			!e.target.closest('.mobile-nav') && 
			!e.target.closest('.mobile-menu-btn')) {
			menuBtn?.classList.remove('active');
			mobileNav?.classList.remove('active');
			body.style.overflow = '';
		}
	});
</script>
<style>
    .site-footer {
        background-color: var(--hulu-black);
        padding: 3rem 2rem 2rem;
        margin-top: 4rem;
        color: var(--hulu-light-gray);
    }

    .footer-content {
        display: flex;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 2rem;
        gap: 4rem;
    }

    .footer-logo {
        flex-shrink: 0;
    }

    .footer-logo a {
        color: var(--hulu-green);
        font-size: 1.5rem;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer-logo a:hover {
        color: var(--hulu-green-light);
    }

    .footer-links {
        display: flex;
        gap: 4rem;
        flex-wrap: wrap;
    }

    .footer-column {
        min-width: 160px;
    }

    .footer-column h4 {
        margin: 0 0 1.25rem;
        color: black;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .footer-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-column li {
        margin-bottom: 0.75rem;
    }

    .footer-column a {
        color: var(--hulu-light-gray);
        text-decoration: none;
        transition: color 0.2s ease;
        font-size: 0.95rem;
    }

    .footer-column a:hover {
        color: var(--hulu-green);
    }

    .footer-bottom {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .copyright {
        color: var(--hulu-light-gray);
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .icpoo {
        color: var(--hulu-light-gray);
        font-size: 0.875rem;
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .icpoo a {
        color: var(--hulu-light-gray);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .icpoo a:hover {
        color: var(--hulu-green);
    }

    .margin-oc {
        margin: 0 0.5rem;
    }

    @media (max-width: 1024px) {
        .footer-content {
            gap: 3rem;
        }

        .footer-links {
            gap: 3rem;
        }
    }

    @media (max-width: 768px) {
        .site-footer {
            padding: 2rem 1.5rem 1.5rem;
        }

        .footer-content {
            flex-direction: column;
            gap: 2rem;
        }

        .footer-links {
            gap: 2rem;
        }

        .footer-column {
            min-width: 140px;
        }

        .icpoo {
            gap: 1rem;
        }
    }

    @media (max-width: 480px) {
        .site-footer {
            padding: 1.5rem 1rem 1rem;
            margin-top: 2rem;
        }

        .footer-content {
            gap: 1.5rem;
        }

        .footer-logo {
            text-align: center;
        }

        .footer-links {
            display: none; /* 在移动端隐藏导航链接 */
        }

        .footer-bottom {
            padding-top: 1rem;
        }

        .copyright {
            margin-bottom: 0.5rem;
            font-size: 0.8rem;
        }

        .icpoo {
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.8rem;
        }

        .margin-oc {
            display: none;
        }

        /* 移动端显示简化的底部导航 */
        .mobile-nav {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-nav a {
            color: var(--hulu-light-gray);
            text-decoration: none;
            font-size: 0.9rem;
        }

        .mobile-nav a:hover {
            color: var(--hulu-green);
        }
    }
</style>