---
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
import {getConfig, getTp3Extra} from '../../utils/config'
import { Image } from 'astro:assets';
const config = getConfig(Astro)
const extra = getTp3Extra(config.app_extra_tag)
import BaijiahaoLogo from '../../public/common/baijiahao.svg'
import Toutiaohao from '../../public/common/toutiaohao.svg'
import Douyin from '../../public/common/douyin.svg'
import Weibo from '../../public/common/weibo.svg'

import '../styles/template_3/icons.min.css'
import '../styles/template_3/style.css'
---
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<meta name="applicable-device"content="pc,mobile">
		<link rel="icon" type="image/svg+xml" href={config.app_logo} />
		<title>{title}</title>
		<meta name="description" content={description} />
		<meta name="keywords" content={keywords} />
		{config.app_baidu_zhanzhang ? <Fragment set:html={config.app_baidu_zhanzhang} /> : ''}
	</head>
	<body class="app-v4 page-name-books none-ecommerce">

		<!-- Navbar Start -->
		<nav class="navbar fixed top-0 start-0 end-0 z-999 transition-all duration-500 py-5 items-center shadow-md lg:shadow-none [&.is-sticky]:bg-white group [&.is-sticky]:shadow-md bg-white lg:bg-transparent" id="navbar">
			<div class="container">
			
				<div class="flex lg:flex-nowrap flex-wrap items-center">

					<a class='flex items-center' href='/'>
						<Image src={config.app_logo} alt="logo" width={100} height={100} class="h-9 flex w-full" />
						<!-- {config.app_name} -->
					</a>

					<div class="lg:hidden flex items-center ms-auto px-2.5">
						<button class="hs-collapse-toggle" type="button" id="hs-unstyled-collapse" data-hs-collapse="#navbarCollapse">
							<!-- <i data-lucide="menu" class="h-8 w-8 text-black"></i> -->
							<Image src="/template_3/menu-button.svg" alt="menu-button" width={100} height={100} class="h-8 w-8 text-black" />
						</button>
					</div>

					<div class="navigation hs-collapse transition-all duration-300 lg:basis-auto basis-full grow hidden items-center justify-center lg:flex mx-auto overflow-hidden mt-6 lg:mt-0 nav-light" id="navbarCollapse">
						<ul class="navbar-nav flex-col lg:flex-row gap-y-2 flex lg:items-center justify-center" id="navbar-navlist">
							<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark all duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
								<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/news">产品新闻</a>
							</li>

							<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
								<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/about-us">关于我们</a>
							</li>

							<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
								<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/contact-us">联系我们</a>
							</li>
						</ul>
					</div>

					<div class="ms-auto shrink hidden lg:inline-flex gap-2">
						<a href={extra.app_download} class="py-2 px-6 inline-flex items-center gap-2 rounded-md text-base text-white bg-primary hover:bg-primaryDark transition-all duration-500 font-medium">
							<Image src="/template_3/download.svg" alt="download" width={100} height={100} class="h-4 w-4 fill-white/40" />
							<span class="hidden sm:block">下载</span>
						</a>
					</div>
				</div>
			</div>
		</nav>

		<slot />

		 <!-- Footer Start -->
		 <footer class="bg-[#17243A]">
			<div class="container">
				<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 pb-16 pt-16">
					<div class="col-span-full lg:col-span-2">
						<p class="text-white">官方账号</p>
						<div>
							{
								extra.weibo_offical.address ?
								<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.weibo_offical.address}>
									<Weibo />
								</a> : ''
							}
							{
								extra.douyin_offical.address ?
								<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.douyin_offical.address}>
									<Douyin />
								</a> : ''
							}
							{
								extra.baijiahao_offical.address ?
								<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.baijiahao_offical.address}>
									<BaijiahaoLogo />
								</a> : ''
							}
							{
								extra.toutiaohao_offical.address ?
								<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.toutiaohao_offical.address}>
									<Toutiaohao />
								</a> : ''
							}
						</div>
						<div class="mt-6 grid space-y-3">
							<p class="text-white">24小时客服热线</p>
							<a class="inline-flex items-center gap-x-4 text-gray-300 hover:text-gray-400 transition-all duration-300" href={`tel:${extra.app_phone}`}>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
								{extra.app_phone}
							</a>
						</div>
					</div>
	
					<div class="col-span-1">
						<h4 class="font-semibold text-gray-100 uppercase">关于我们</h4>
		
						<div class="mt-6 grid space-y-3">
							<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/about-us">关于我们</a></p>
							<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/news">产品新闻</a></p>
							<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/contact-us">联系我们</a></p>
						</div>
					</div>
				</div>
			</div>
	
			<div class="py-4 bg-[#1C2940]">
				<!-- 1B283F -->
				<div class="container">
					<div class="flex justify-between items-center">
						<div class="text-base text-white">
							<small>
								2025© {config.app_name}- <a href="/">{config.app_company}</a></small>
						</div>
						<div class="copyright text-base col-xl-4 col-md-8 text-white">
							<small class="copyright__text">版权所有 © {config.app_company}
								。保留一切权利。<a href={config.app_filing_url}>{config.app_filing}</a></small>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- Footer End -->
		<!-- Back to top -->
		<a href="javascript: void(0);" onclick="topFunction()" id="back-to-top" class="back-to-top fixed text-base rounded-md z-10 bottom-8 right-8 h-8 w-8 text-center bg-primary text-white leading-9 justify-center items-center">
			<!-- <i data-lucide="arrow-up" class="h-4 w-4 text-white stroke-2"></i> -->
			 <img src="/template_3/totop.svg" />
		</a>
	
		<!-- Swiper Bundle Js -->
		<script is:inline src="/template_3/libs/swiper/swiper-bundle.min.js"></script>

		<script is:inline src="/template_3/libs/preline/preline.js"></script>
	
		<!-- Swiper Js -->
		<!-- <script is:inline src="../assets/template_3/js/swiper.js"></script> -->
		<script is:inline src="/template_3/js/swiper.js"></script>
	
		<!-- Main App Js -->
		<script is:inline src="/template_3/js/app.js" ></script>
	</body>
</html>
