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

// export const prerender = true;

// SEO meta tags
const title = `${APP_NAME} - 关于我们`;
const description = '新疆阅快阅好信息技术有限公司是一家专注于移动互联网应用开发的高新技术企业，致力于为用户提供优质的阅读和学习体验。';
const keywords = '知识回声,关于我们,公司介绍,发展历程,企业文化,团队介绍,新疆阅快阅好';

const LDJSON = {
  context: "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  id: "https://www.zhishihuisheng.com/about",
  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>
		<section class="about-hero" aria-label="公司简介">
			<div class="container">
				<h1>关于我们</h1>
				<p class="subtitle">专注移动互联网应用开发，打造优质用户体验</p>
			</div>
		</section>

		<section class="company-intro" aria-label="公司介绍">
			<div class="container">
				<h2>公司介绍</h2>
				<p>新疆阅快阅好信息技术有限公司是一家专注于移动互联网应用开发的高新技术企业。我们致力于为用户提供优质的阅读和学习体验，打造"便捷、安全可靠"的移动互联生态。</p>
			</div>
		</section>

		<section class="certificates-showcase" aria-label="企业证书">
			<div class="container">
				<h2>企业资质</h2>
				<div class="certificates-grid">
					<article class="certificate-card">
						<div class="certificate-image">
							<img src="/enterprise1.jpg" alt="数据安全能力认证证书" width="400" height="300" loading="lazy" />
						</div>
						<div class="certificate-content">
							<h3>数据安全能力认证证书</h3>
							<p>数据安全能力认证，保障用户信息安全</p>
						</div>
					</article>
					<article class="certificate-card">
						<div class="certificate-image">
							<img src="/enterprise2.png" alt="系统信息安全等级保护证书" width="400" height="300" loading="lazy" />
						</div>
						<div class="certificate-content">
							<h3>系统信息安全等级保护证书</h3>
							<p>系统安全等级保护认证，确保系统安全可靠</p>
						</div>
					</article>
					<article class="certificate-card">
						<div class="certificate-image">
							<img src="/enterprise3.png" alt="新疆互联网协会会员证书" width="400" height="300" loading="lazy" />
						</div>
						<div class="certificate-content">
							<h3>新疆互联网协会会员证书</h3>
							<p>互联网协会会员单位，推动行业发展</p>
						</div>
					</article>
				</div>
			</div>
		</section>

		<section class="history" aria-label="发展历程">
			<div class="container">
				<h2>发展历程</h2>
				<div class="timeline">
					<article class="timeline-item">
						<div class="timeline-date">2024年</div>
						<div class="timeline-content">
							<h3>获得VIVO·星途未来奖</h3>
							<p>凭借创新能力和优质服务，获得VIVO颁发的星途未来奖</p>
						</div>
					</article>
					<article class="timeline-item">
						<div class="timeline-date">2023年</div>
						<div class="timeline-content">
							<h3>成为华为优质流量合作伙伴</h3>
							<p>获得华为颁发的优质流量合作伙伴认证</p>
						</div>
					</article>
					<article class="timeline-item">
						<div class="timeline-date">2022年</div>
						<div class="timeline-content">
							<h3>产品全面升级</h3>
							<p>推出全新版本的知识回声，优化用户体验</p>
						</div>
					</article>
					<article class="timeline-item">
						<div class="timeline-date">2021年</div>
						<div class="timeline-content">
							<h3>公司成立</h3>
							<p>新疆阅快阅好信息技术有限公司正式成立</p>
						</div>
					</article>
				</div>
			</div>
		</section>

		<section class="culture" aria-label="企业文化">
			<div class="container">
				<h2>企业文化</h2>
				<div class="culture-grid">
					<article class="culture-item">
						<div class="culture-icon">🎯</div>
						<h3>使命</h3>
						<p>为用户提供优质的阅读和学习体验，让知识触手可及</p>
					</article>
					<article class="culture-item">
						<div class="culture-icon">👀</div>
						<h3>愿景</h3>
						<p>成为移动互联网领域最受信赖的内容服务提供商</p>
					</article>
					<article class="culture-item">
						<div class="culture-icon">💡</div>
						<h3>价值观</h3>
						<p>创新、专业、诚信、共赢</p>
					</article>
				</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>
	.about-hero {
		background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
		color: white;
		padding: 6rem 2rem;
		text-align: center;
	}

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

	.about-hero h1 {
		font-size: 3rem;
		margin-bottom: 1rem;
		-webkit-text-fill-color: white;
	}

	.subtitle {
		font-size: 1.5rem;
		opacity: 0.9;
	}

	.company-intro {
		padding: 6rem 0;
		background: var(--background-light);
	}

	.intro-content {
		max-width: 800px;
		margin: 0 auto 4rem;
		text-align: center;
	}

	.intro-content h2 {
		font-size: 2.5rem;
		margin-bottom: 2rem;
		background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.intro-content p {
		font-size: 1.1rem;
		line-height: 1.8;
		color: var(--text-secondary);
		margin-bottom: 1.5rem;
	}

	.company-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 2rem;
		text-align: center;
	}

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

	.stat-number {
		display: block;
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--primary-color);
		margin-bottom: 0.5rem;
	}

	.stat-label {
		color: var(--text-secondary);
		font-size: 1.1rem;
	}

	.history {
		padding: 6rem 0;
		background: var(--background-off-white);
	}

	.history h2 {
		text-align: center;
		font-size: 2.5rem;
		margin-bottom: 4rem;
		background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.timeline {
		max-width: 800px;
		margin: 0 auto;
		position: relative;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 100%;
		background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
	}

	.timeline-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4rem;
		position: relative;
	}

	.timeline-date {
		width: 120px;
		text-align: right;
		font-weight: 600;
		color: var(--primary-color);
	}

	.timeline-content {
		width: calc(100% - 160px);
		background: white;
		padding: 2rem;
		border-radius: 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.timeline-content h3 {
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

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

	.culture {
		padding: 6rem 0;
		background: var(--background-light);
	}

	.culture h2 {
		text-align: center;
		font-size: 2.5rem;
		margin-bottom: 4rem;
		background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.culture-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

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

	.culture-item:hover {
		transform: translateY(-10px);
	}

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

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

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

	.certificates-showcase {
		padding: 6rem 0;
		background: linear-gradient(135deg, var(--background-light), var(--background-off-white));
	}

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

	.certificate-card {
		background: white;
		border-radius: 16px;
		overflow: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
		border: 1px solid rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.certificate-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
		background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.certificate-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
	}

	.certificate-card:hover::before {
		opacity: 1;
	}

	.certificate-image {
		position: relative;
		width: 100%;
		height: 300px;
		overflow: hidden;
		background: var(--background-off-white);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
	}

	.certificate-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.3s ease;
	}

	.certificate-card:hover .certificate-image img {
		transform: scale(1.05);
	}

	.certificate-content {
		padding: 1.5rem;
		text-align: center;
	}

	.certificate-content h3 {
		color: var(--text-primary);
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.certificate-content p {
		color: var(--text-secondary);
		line-height: 1.6;
		margin: 0;
	}

	@media (max-width: 768px) {
		.about-hero {
			padding: 4rem 1rem;
		}

		.about-hero h1 {
			font-size: 2.5rem;
		}

		.subtitle {
			font-size: 1.2rem;
		}

		.timeline::before {
			left: 0;
		}

		.timeline-item {
			flex-direction: column;
			align-items: flex-start;
		}

		.timeline-date {
			width: 100%;
			text-align: left;
			margin-bottom: 1rem;
		}

		.timeline-content {
			width: 100%;
		}

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

		.certificates-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
		}

		.certificate-image {
			height: 250px;
		}

		.certificate-content {
			padding: 1rem;
		}

		.certificate-content h3 {
			font-size: 1.2rem;
		}
	}

	@media (max-width: 480px) {
		.certificates-grid {
			grid-template-columns: 1fr;
		}

		.certificate-image {
			height: 220px;
		}

		.certificate-card {
			max-width: 400px;
			margin: 0 auto;
		}
	}

	/* 触摸设备优化 */
	@media (hover: none) {
		.certificate-card:hover {
			transform: none;
		}

		.certificate-card:hover::before {
			opacity: 0;
		}

		.certificate-card:active {
			transform: scale(0.98);
		}
	}
</style>