import Navbar from '../components/Navbar';
import Contact from '../components/Contact';
import Footer from '../components/Footer';
import { Mail, Phone, MapPin, Clock, MessageCircle, HelpCircle } from 'lucide-react';

export default function ContactPage() {
  return (
    <div className="pt-16 bg-background">
      <Navbar />
      <main>
        {/* 页面标题部分 */}
        <section className="px-6 py-16 bg-gradient-to-br from-orange-50 to-red-100">
          <div className="max-w-screen-xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
              联系我们
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-8">
              我们随时准备为您提供帮助。无论您有任何问题、建议或需要技术支持，
              我们的专业团队都会尽快回复您。
            </p>
            
            {/* 快速联系信息 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                  <Phone className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">WhatsApp</h3>
                <p className="text-sm text-gray-600 mb-2">7×24 小时技术支持</p>
                <p className="text-accent font-medium">+1 917-402-9875</p>
              </div>
              
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">邮件支持</h3>
                <p className="text-sm text-gray-600 mb-2">24 小时内回复</p>
                <p className="text-accent font-medium">support@pinnovatecloud.com</p>
              </div>
              
              <div className="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-sm">
                <div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
                  <MessageCircle className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-primary mb-2">Telegram</h3>
                <p className="text-sm text-gray-600 mb-2">即时响应</p>
                <p className="text-accent font-medium">@pinnovatecloud</p>
              </div>
            </div>
          </div>
        </section>

        {/* 联系表单和联系信息 */}
        <Contact />

        {/* 常见问题 */}
        <section className="px-6 py-16 bg-gray-50">
          <div className="max-w-screen-xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-primary mb-4">常见问题</h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                以下是一些客户经常询问的问题，也许能帮助您快速找到答案。
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {[
                {
                  question: '如何开始使用 CloudProxy 服务？',
                  answer: '您可以通过我们的官网注册账号，选择适合的套餐，然后按照指引完成配置。我们提供详细的文档和视频教程。'
                },
                {
                  question: '支持哪些支付方式？',
                  answer: '我们支持支付宝、微信支付、银行卡支付等多种支付方式，也支持企业对公转账。'
                },
                {
                  question: '如何获得技术支持？',
                  answer: '您可以通过工单系统、在线客服、电话或邮件联系我们。我们提供 7×24 小时技术支持服务。'
                },
                {
                  question: '是否提供免费试用？',
                  answer: '是的，我们为所有新用户提供 15 天免费试用，无需信用卡，让您充分体验我们的服务。'
                },
                {
                  question: '如何升级或降级套餐？',
                  answer: '您可以在控制面板中随时升级或降级套餐，变更会在下个计费周期生效。'
                },
                {
                  question: '数据安全如何保障？',
                  answer: '我们采用企业级安全防护，包括端到端加密、DDoS 防护、安全审计等多重保障措施。'
                }
              ].map((faq, index) => (
                <div key={index} className="bg-white rounded-lg p-6 shadow-sm border border-gray-100">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 bg-accent rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                      <HelpCircle className="w-4 h-4 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-primary mb-2">{faq.question}</h3>
                      <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="text-center mt-12">
              <p className="text-gray-600 mb-4">没有找到您要的答案？</p>
              <a
                href="#contact-form"
                className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-semibold hover:bg-blue-700 transition-colors"
              >
                <MessageCircle className="w-5 h-5" />
                立即联系我们
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}