import Link from 'next/link';

export default function About() {
  return (
    <div className="min-h-screen bg-white">
      {/* 导航栏 */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
        <nav className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-xl">品</span>
            </div>
            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              品居会
            </span>
          </Link>
          <div className="hidden md:flex items-center gap-8">
            <Link href="/#features" className="text-gray-600 hover:text-gray-900 transition">
              产品特色
            </Link>
            <Link href="/#services" className="text-gray-600 hover:text-gray-900 transition">
              服务优势
            </Link>
            <Link href="/about" className="text-gray-900 font-semibold">
              关于我们
            </Link>
            <Link href="/contact" className="text-gray-600 hover:text-gray-900 transition">
              联系我们
            </Link>
          </div>
        </nav>
      </header>

      {/* Hero */}
      <section className="pt-32 pb-20 px-6 bg-gradient-to-br from-blue-50 to-purple-50">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl font-bold mb-6">关于品居会</h1>
          <p className="text-xl text-gray-600">
            致力于为用户提供优质的住宿预订服务
          </p>
        </div>
      </section>

      {/* 公司介绍 */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold mb-8">公司简介</h2>
          <div className="prose prose-lg max-w-none text-gray-600 space-y-6">
            <p>
              品居会是一家专注于酒店民宿短租预订服务的互联网平台，成立于2024年。我们致力于为C端用户提供便捷的住宿预订服务，为B端商家提供高效的店铺数字化管理工具。
            </p>
            <p>
              平台集酒店、民宿、短租、青旅预订于一体，通过前后端分离架构实现数据互通，满足不同角色的核心使用需求。我们的目标是打造一个值得信赖的住宿预订平台，让每一次出行都成为美好的回忆。
            </p>
          </div>
        </div>
      </section>

      {/* 核心价值观 */}
      <section className="py-20 px-6 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">核心价值观</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-2xl shadow-sm">
              <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">🎯</span>
              </div>
              <h3 className="text-xl font-bold mb-4">用户至上</h3>
              <p className="text-gray-600">
                始终将用户需求放在首位，提供优质的产品和服务
              </p>
            </div>
            <div className="bg-white p-8 rounded-2xl shadow-sm">
              <div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">💡</span>
              </div>
              <h3 className="text-xl font-bold mb-4">创新驱动</h3>
              <p className="text-gray-600">
                持续创新，用技术改善用户体验，引领行业发展
              </p>
            </div>
            <div className="bg-white p-8 rounded-2xl shadow-sm">
              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mb-6">
                <span className="text-3xl">🤝</span>
              </div>
              <h3 className="text-xl font-bold mb-4">诚信共赢</h3>
              <p className="text-gray-600">
                诚信经营，与合作伙伴共同成长，实现多方共赢
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 发展历程 */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">发展历程</h2>
          <div className="space-y-8">
            <div className="flex gap-6">
              <div className="flex-shrink-0 w-32 text-right">
                <div className="text-2xl font-bold text-blue-600">2024.01</div>
              </div>
              <div className="flex-1 pb-8 border-l-2 border-gray-200 pl-6">
                <h3 className="text-xl font-bold mb-2">公司成立</h3>
                <p className="text-gray-600">品居会正式成立，开始平台研发</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex-shrink-0 w-32 text-right">
                <div className="text-2xl font-bold text-blue-600">2024.06</div>
              </div>
              <div className="flex-1 pb-8 border-l-2 border-gray-200 pl-6">
                <h3 className="text-xl font-bold mb-2">平台上线</h3>
                <p className="text-gray-600">小程序端、商家后台、平台后台全面上线</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex-shrink-0 w-32 text-right">
                <div className="text-2xl font-bold text-blue-600">2024.12</div>
              </div>
              <div className="flex-1 pb-8 border-l-2 border-gray-200 pl-6">
                <h3 className="text-xl font-bold mb-2">快速发展</h3>
                <p className="text-gray-600">注册用户突破10万，合作商家超过1000家</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex-shrink-0 w-32 text-right">
                <div className="text-2xl font-bold text-blue-600">2026.05</div>
              </div>
              <div className="flex-1 pl-6">
                <h3 className="text-xl font-bold mb-2">持续创新</h3>
                <p className="text-gray-600">不断优化产品功能，提升用户体验</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-300 py-12 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold">品</span>
                </div>
                <span className="text-xl font-bold text-white">品居会</span>
              </div>
              <p className="text-sm">品质住宿，温馨服务</p>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4">产品服务</h4>
              <ul className="space-y-2 text-sm">
                <li><Link href="/#features" className="hover:text-white transition">产品特色</Link></li>
                <li><Link href="/#services" className="hover:text-white transition">服务优势</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4">关于我们</h4>
              <ul className="space-y-2 text-sm">
                <li><Link href="/about" className="hover:text-white transition">公司介绍</Link></li>
                <li><Link href="/contact" className="hover:text-white transition">联系我们</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold mb-4">帮助中心</h4>
              <ul className="space-y-2 text-sm">
                <li><Link href="/privacy" className="hover:text-white transition">隐私政策</Link></li>
                <li><Link href="/terms" className="hover:text-white transition">用户协议</Link></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8 text-center text-sm">
            <p>&copy; 2026 品居会. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}