"use client";

import { useState } from "react";
import { Check, Shield, Clock, Sparkles, ArrowRight } from "lucide-react";

const BRAND = { color: "#6366F1", colorLight: "#818CF8", colorRgb: "99,102,241" };

const PLANS = [
  {
    id: "zhi_free",
    name: "Free",
    description: "个人学习入门",
    monthlyPrice: 0,
    yearlyPrice: 0,
    features: [
      { text: "公开知识库访问", included: true },
      { text: "基础课程试看", included: true },
      { text: "社区讨论", included: true },
      { text: "认证考试", included: false },
      { text: "错题本", included: false },
      { text: "优先更新", included: false },
    ],
    cta: "免费使用",
  },
  {
    id: "zhi_pro",
    name: "Pro",
    description: "专业进阶",
    monthlyPrice: 199,
    yearlyPrice: 1910,
    features: [
      { text: "公开知识库访问", included: true },
      { text: "全部课程解锁", included: true },
      { text: "认证考试资格", included: true },
      { text: "错题本与排行榜", included: true },
      { text: "优先内容更新", included: true },
      { text: "专属学习报告", included: true },
    ],
    cta: "立即升级",
    popular: true,
  },
  {
    id: "zhi_enterprise",
    name: "Enterprise",
    description: "团队培训",
    monthlyPrice: 599,
    yearlyPrice: 5750,
    features: [
      { text: "Pro 全部功能", included: true },
      { text: "定制课程体系", included: true },
      { text: "多席位管理", included: true },
      { text: "学习数据分析", included: true },
      { text: "专属客户经理", included: true },
      { text: "API 接口", included: true },
    ],
    cta: "联系销售",
  },
];

const FAQS = [
  { q: "可以随时取消吗？", a: "可以。随时在账户设置中取消订阅，取消后当前周期结束前仍可正常使用。" },
  { q: "免费版和Pro版有什么区别？", a: "免费版可以浏览公开知识库和试看基础课程。Pro版解锁全部课程、认证考试、错题本等高级功能。" },
  { q: "支持发票吗？", a: "支持。支付成功后可在订单详情页申请增值税普通发票或专用发票。" },
  { q: "企业版可以定制课程吗？", a: "可以。企业版支持根据您的行业需求定制专属课程体系，并提供多席位统一管理。" },
];

export default function PricingPage() {
  const [isYearly, setIsYearly] = useState(false);
  const c = BRAND.color;
  const cRgb = BRAND.colorRgb;

  return (
    <div className="min-h-screen" style={{ background: "linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%)" }}>
      <div className="max-w-6xl mx-auto px-4 py-16 md:py-24">
        {/* Header */}
        <div className="text-center mb-12">
          <div
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-6"
            style={{ background: `rgba(${cRgb},0.1)`, color: c }}
          >
            <Sparkles className="w-4 h-4" />
            简单透明的定价
          </div>
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            选择适合您的学习计划
          </h1>
          <p className="text-lg text-gray-500 max-w-2xl mx-auto">
            从免费入门到企业培训，邻知为不同阶段的学习者提供合适的方案
          </p>
        </div>

        {/* Billing Toggle */}
        <div className="flex items-center justify-center mb-12">
          <div className="inline-flex items-center p-1 rounded-full bg-gray-100 border border-gray-200">
            <button
              onClick={() => setIsYearly(false)}
              className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${!isYearly ? "text-white shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
              style={!isYearly ? { background: c } : {}}
            >
              月付
            </button>
            <button
              onClick={() => setIsYearly(true)}
              className={`px-5 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-1.5 ${isYearly ? "text-white shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
              style={isYearly ? { background: c } : {}}
            >
              年付
              <span className="text-xs px-1.5 py-0.5 rounded-full font-semibold bg-white/20">省20%</span>
            </button>
          </div>
        </div>

        {/* Plans Grid */}
        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {PLANS.map((plan) => {
            const price = isYearly ? plan.yearlyPrice : plan.monthlyPrice;
            const isFree = price === 0;
            return (
              <div
                key={plan.id}
                className="relative rounded-2xl p-6 md:p-8 flex flex-col transition-all hover:shadow-lg"
                style={{
                  background: plan.popular ? `linear-gradient(180deg, rgba(${cRgb},0.03) 0%, #fff 100%)` : "#fff",
                  border: plan.popular ? `2px solid ${c}` : "1px solid #e5e7eb",
                  boxShadow: plan.popular ? `0 8px 32px rgba(${cRgb},0.12)` : "0 1px 3px rgba(0,0,0,0.05)",
                }}
              >
                {plan.popular && (
                  <div
                    className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-semibold text-white"
                    style={{ background: `linear-gradient(135deg, ${c} 0%, ${BRAND.colorLight} 100%)` }}
                  >
                    最受欢迎
                  </div>
                )}

                <div className="mb-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-1">{plan.name}</h3>
                  <p className="text-sm text-gray-500">{plan.description}</p>
                </div>

                <div className="mb-6">
                  <div className="flex items-baseline gap-1">
                    <span className="text-4xl font-bold text-gray-900">
                      {isFree ? "免费" : `¥${price}`}
                    </span>
                    {!isFree && (
                      <span className="text-gray-400 text-sm">{isYearly ? "/年" : "/月"}</span>
                    )}
                  </div>
                  {!isFree && isYearly && (
                    <div className="text-xs text-gray-400 mt-1">
                      相当于 ¥{Math.round(price / 12)}/月
                    </div>
                  )}
                </div>

                <a
                  href={isFree ? "/register" : `https://account.linksand.cn/checkout?product=zhi&plan=${plan.id.replace("zhi_", "")}&yearly=${isYearly ? 1 : 0}`}
                  className="w-full py-3 rounded-xl text-center font-semibold text-sm mb-6 transition-all hover:opacity-90"
                  style={
                    plan.popular
                      ? { background: `linear-gradient(135deg, ${c} 0%, ${BRAND.colorLight} 100%)`, color: "#fff" }
                      : { background: "#f3f4f6", color: "#374151", border: "1px solid #e5e7eb" }
                  }
                >
                  {plan.cta}
                </a>

                <div className="space-y-3 flex-1">
                  {plan.features.map((f, i) => (
                    <div key={i} className="flex items-center gap-3 text-sm">
                      {f.included ? (
                        <span className="w-5 h-5 rounded-full flex items-center justify-center shrink-0" style={{ background: `rgba(${cRgb},0.1)` }}>
                          <Check className="w-3 h-3" style={{ color: c }} />
                        </span>
                      ) : (
                        <span className="w-5 h-5 rounded-full flex items-center justify-center shrink-0 bg-gray-100">
                          <span className="w-2 h-0.5 bg-gray-300 rounded-full" />
                        </span>
                      )}
                      <span className={f.included ? "text-gray-700" : "text-gray-400"}>{f.text}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        {/* FAQ */}
        <div className="max-w-3xl mx-auto">
          <h2 className="text-2xl font-bold text-gray-900 text-center mb-8">常见问题</h2>
          <div className="space-y-4">
            {FAQS.map((faq, i) => (
              <div key={i} className="rounded-xl p-5 bg-white border border-gray-100">
                <h3 className="font-semibold text-gray-900 mb-2">{faq.q}</h3>
                <p className="text-sm text-gray-500 leading-relaxed">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Trust */}
        <div className="flex items-center justify-center gap-6 mt-12 flex-wrap text-sm text-gray-400">
          <div className="flex items-center gap-1.5">
            <Shield className="w-4 h-4" style={{ color: c }} />
            <span>7天无理由退款</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Clock className="w-4 h-4" style={{ color: c }} />
            <span>即时开通</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Check className="w-4 h-4" style={{ color: c }} />
            <span>随时可取消</span>
          </div>
        </div>
      </div>
    </div>
  );
}