---
import Layout from '../layouts/Layout.astro';
import { APP_NAME } from '../config/app';
import { formatDateTime } from '../../utils/date';
import Breadcrumb from '../components/Breadcrumb.astro';

// export const prerender = true;

// SEO meta tags
const title = `${APP_NAME} - 常见问题`;
const description = `${APP_NAME}常见问题解答，提供会员服务、账号安全等详细解答。让您轻松掌握产品使用技巧，享受更好的阅读体验。`;
const keywords = '知识回声常见问题,知识回声FAQ,知识回声售后问题,知识回声取消续费,知识回声费用返还,知识回声会员服务';

// FAQ categories and questions
const faqCategories = [
  {
	service: [
		{
			id: 'cancel-member',
			title: '#开通会员自动续费服务后如何关闭?',
			slug: 'cancel-member'
		}, {
			id: 'how-to-refund',
			title: '#如何申请退费？',
			slug: 'how-to-refund'
		}, {
			id: 'not-arrived',
			title: '#申请售后服务没有到账？',
			slug: 'not-arrived'
		}
	]
  }
];
---
<Layout title={title} description={description} keywords={keywords}>
	<section class="faq-section">
		<div class="container">
			<Breadcrumb data={[{ title: '常见问题', link: '/faq' }]} />

			<header class="faq-header">
				<h1>售后问题</h1>
				<p class="faq-description">为您解答关于{APP_NAME}常见售后问题</p>
			</header>

			<div class="category-grid">
				{faqCategories.map(category => (
					<article class="category-card">
						<div class="faq-list">
							{category.service.map(question => (
								<div class="faq-item">
									<a href={`/faq/${question.slug}`} class="faq-link">
										<h3>{question.title}</h3>
										<span class="arrow" aria-hidden="true">→</span>
									</a>
								</div>
							))}
						</div>
					</article>
				))}
			</div>
		</div>
	</section>

	<section class="contact-section" aria-label="联系客服">
		<div class="container">
			<h2>需要更多帮助？</h2>
			<p>我们的客服团队随时为您服务</p>
			<div class="contact-buttons">
				<a href="/contact" class="contact-button primary">联系客服</a>
			</div>
		</div>
	</section>
</Layout>

<style>


	.faq-section {
		padding: 2rem 0;
		background: white;
	}

	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1rem;
	}

	.breadcrumb {
		margin: 1rem 0;
	}

	.breadcrumb ol {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
	}

	.breadcrumb li {
		display: flex;
		align-items: center;
	}

	.breadcrumb li:not(:last-child)::after {
		content: '/';
		margin: 0 0.5rem;
		color: var(--text-light);
	}

	.breadcrumb a {
		color: var(--text-color);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.breadcrumb a:hover {
		color: var(--hover-color);
	}

	.faq-header {
		text-align: center;
		margin-bottom: 3rem;
	}

	.faq-header h1 {
		font-size: 2.5rem;
		color: var(--text-color);
		margin-bottom: 1rem;
	}

	.faq-description {
		font-size: 1.1rem;
		color: var(--text-light);
		max-width: 600px;
		margin: 0 auto;
	}

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

	.category-card {
		background: white;
		border-radius: 16px;
		padding: 1rem;
		/* border: 1px solid var(--black-color); */
		transition: all 0.3s ease;
	}

	.faq-list {
		display: flex;
		flex-direction: column;
		/* gap: 1rem; */
	}

	.faq-item {
		border-bottom: 1px solid var(--border-color);
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.faq-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-decoration: none;
		color: var(--text-color);
		transition: all 0.3s ease;
		padding: 0.8rem;
		border-radius: 8px;
	}

	.faq-link:hover {
		background: var(--bg-light);
		color: var(--hover-color);
	}

	.faq-link h3 {
		font-size: 1.1rem;
		margin: 0;
		font-weight: 500;
	}

	.arrow {
		font-size: 1.2rem;
		opacity: 0;
		transform: translateX(-10px);
		transition: all 0.3s ease;
	}

	.faq-link:hover .arrow {
		opacity: 1;
		transform: translateX(0);
	}

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

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

		.category-card {
			padding: 1rem;
		}
	}

	.contact-section {
		padding: 2rem 0;
		text-align: center;
		background: white;
	}

	.contact-section h2 {
		font-size: 2.5rem;
		margin-bottom: 1rem;
		color: var(--text-color);
	}

	.contact-section p {
		font-size: 1.2rem;
		color: var(--text-light);
		margin-bottom: 2rem;
	}

	.contact-buttons {
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	.contact-button {
		padding: 1rem 2rem;
		border-radius: 50px;
		font-size: 1.1rem;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.contact-button.primary {
		background: var(--hover-color);
		color: white;
	}

	.contact-button:hover {
		transform: translateY(-2px);
		box-shadow: var(--hover-shadow);
	}

	.contact-button.primary:hover {
		background: var(--hover-color);
	}
</style>