---
import Layout from '../layouts/Layout.astro';
import { APP_NAME, APP_COMPANY } from '../config/app';
import { formatDateTime } from '../../utils/date';
import { CONTACT_PHONE } from '../config/app';
// export const prerender = true;

// SEO meta tags
const title = `${APP_NAME} - 联系我们`;
const description = '知识回声客服7*24小时服务热线，为您提供专业的技术支持和客户服务，随时解答您的问题。';
const keywords = '知识回声客服,知识回声客服电话,知识回声联系方式,知识回声退款热线,知识回声技术支持,知识回声客户服务,知识回声在线客服,知识回声服务热线,知识回声400电话';

const LDJSON = {
  context: "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  id: "https://www.zhishihuisheng.com/contact",
  appid: "",
  title: title,
  image: "https://www.zhishihuisheng.com/app-showcase.png",
  pubDate: "2025-06-09T11:20:04",
  updateDate: formatDateTime(),
  description: description,
};
---
<Layout title={title} description={description} keywords={keywords}>
	<main>
		<div class="breadcrumb">
			<a href="/">首页</a>
			<span class="separator">/</span>
			<span>联系我们</span>
		</div>
		<section class="service-hero" aria-label="客服热线">
			<div class="container">
				<h1>与我们联系</h1>
				<p>以便我们为你提供正确的帮助和支持</p>
				<div class="phone-number">
					<h2>联系电话</h2>
					<a title="联系电话" href={`tel:${CONTACT_PHONE}`}>{CONTACT_PHONE}</a>
				</div>
			</div>
		</section>
	</main>
	<!-- 百度结构化数据 -->
	<script type="application/ld+json" set:html={JSON.stringify({
		"@context": LDJSON.context,
		"@id": LDJSON.id,
		"appid": LDJSON.appid,
		"title": LDJSON.title,
		"images": [LDJSON.image],
		"pubDate": LDJSON.pubDate,
		"Update": LDJSON.updateDate,
		"description": LDJSON.description,
		})}/>
</Layout>

<style>

	.phone-number a{
		color: #ffffff;
		text-decoration: none;
		font-size: 2rem;
		font-weight: bold;
	}

	.breadcrumb {
		margin-left: 1rem;
		margin-bottom: 1rem;
		font-size: 0.9rem;
	}

	.breadcrumb a {
		color: #000000;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.service-hero {
		background: #ff6e42;
		color: white;
		padding: 4rem 0;
		text-align: center;
	}

	.service-hero h1 {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}

	.service-hero p {
		font-size: 1.2rem;
		opacity: 0.9;
	}

	.service-section {
		padding: 4rem 0;
		background: var(--background-off-white);
	}

	.service-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		margin-bottom: 4rem;
	}

	.service-card {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		text-align: center;
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.service-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	.service-icon {
		font-size: 3rem;
		margin-bottom: 1.5rem;
	}

	.service-card h2 {
		font-size: 1.5rem;
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

	.service-time {
		color: var(--accent-color);
		font-weight: 500;
		margin-bottom: 1rem;
	}

	.service-desc {
		color: var(--text-secondary);
		line-height: 1.6;
	}

	.service-info {
		margin-bottom: 4rem;
	}

	.service-info h2 {
		text-align: center;
		font-size: 2rem;
		margin-bottom: 2rem;
		color: var(--text-primary);
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
	}

	.info-item {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.info-item h3 {
		font-size: 1.3rem;
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

	.info-item ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.info-item li {
		color: var(--text-secondary);
		padding: 0.5rem 0;
		position: relative;
		padding-left: 1.5rem;
	}

	.info-item li::before {
		content: "•";
		color: var(--primary-color);
		position: absolute;
		left: 0;
	}

	.faq-section {
		margin-top: 4rem;
	}

	.faq-section h2 {
		text-align: center;
		font-size: 2rem;
		margin-bottom: 2rem;
		color: var(--text-primary);
	}

	.faq-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
	}

	.faq-item {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.faq-item h3 {
		font-size: 1.2rem;
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

	.faq-item p {
		color: var(--text-secondary);
		line-height: 1.6;
	}

	@media (max-width: 768px) {
		.service-hero h1 {
			font-size: 2rem;
		}

		.service-hero p {
			font-size: 1.1rem;
		}

		.service-grid {
			grid-template-columns: 1fr;
		}

		.info-grid {
			grid-template-columns: 1fr;
		}

		.faq-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 480px) {
		.service-hero {
			padding: 3rem 0;
		}

		.service-hero h1 {
			font-size: 1.8rem;
		}

		.service-hero p {
			font-size: 1rem;
		}

		.service-section {
			padding: 2rem 0;
		}

		.service-card {
			padding: 1.5rem;
		}

		.info-item, .faq-item {
			padding: 1.5rem;
		}
	}
</style> 