"use client"

import Link from "next/link"
import { ArrowLeft, CreditCard, Share2, FileText, Code } from "lucide-react"

export default function DocsPage() {
  return (
    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
      <div className="sticky top-0 z-10 bg-[#0a1628]/95 backdrop-blur-md border-b border-gray-700/50">
        <div className="max-w-2xl mx-auto flex items-center gap-4 p-4">
          <Link href="/" className="p-2 -ml-2">
            <ArrowLeft className="w-5 h-5" />
          </Link>
          <h1 className="text-lg font-semibold">开发者文档</h1>
        </div>
      </div>

      <div className="p-4">
        <div className="max-w-2xl mx-auto space-y-6">
          {/* Payment Configuration */}
          <section className="bg-[#0f2137]/60 rounded-xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <CreditCard className="w-6 h-6 text-[#38bdac]" />
              <h2 className="text-xl font-semibold">支付配置</h2>
            </div>

            <div className="space-y-4 text-gray-300 text-sm">
              <div>
                <h3 className="text-white font-medium mb-2">微信支付配置</h3>
                <p className="mb-2">1. 登录微信开放平台获取网站AppID和AppSecret</p>
                <p className="mb-2">2. 登录微信公众平台获取服务号AppID和AppSecret</p>
                <p className="mb-2">3. 登录微信商户平台获取商户号和API密钥</p>
                <div className="bg-[#0a1628] rounded-lg p-3 mt-2">
                  <code className="text-xs text-gray-400">
                    {`网站AppID: wx432c93e275548671
服务号AppID: wx7c0dbf34ddba300d
商户号: 1318592501`}
                  </code>
                </div>
              </div>

              <div>
                <h3 className="text-white font-medium mb-2">支付宝配置</h3>
                <p className="mb-2">1. 登录支付宝开放平台获取合作者身份PID</p>
                <p className="mb-2">2. 获取安全校验码Key</p>
                <p className="mb-2">3. 开通手机网站支付功能</p>
                <div className="bg-[#0a1628] rounded-lg p-3 mt-2">
                  <code className="text-xs text-gray-400">
                    {`合作者身份(PID): 2088511801157159
安全校验码(Key): lz6ey1h3kl9...`}
                  </code>
                </div>
              </div>
            </div>
          </section>

          {/* Distribution System */}
          <section className="bg-[#0f2137]/60 rounded-xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <Share2 className="w-6 h-6 text-[#38bdac]" />
              <h2 className="text-xl font-semibold">分销机制</h2>
            </div>

            <div className="space-y-4 text-gray-300 text-sm">
              <p>分销比例可在后台自由设置(0-100%)</p>
              <div className="bg-[#0a1628] rounded-lg p-4">
                <p className="text-white mb-2">收益计算公式:</p>
                <code className="text-[#38bdac]">分销收益 = 订单金额 × 分销比例%</code>
              </div>
              <p>例: 用户A通过B的邀请码购买¥9.9整本书,分销比例90%</p>
              <p>则B获得 9.9 × 90% = ¥8.91 收益</p>
            </div>
          </section>

          {/* Withdrawal */}
          <section className="bg-[#0f2137]/60 rounded-xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <FileText className="w-6 h-6 text-[#38bdac]" />
              <h2 className="text-xl font-semibold">提现说明</h2>
            </div>

            <div className="space-y-3 text-gray-300 text-sm">
              <p>1. 最低提现金额: ¥10</p>
              <p>2. 提现周期: T+1到账</p>
              <p>3. 支持提现方式: 微信、支付宝、银行卡</p>
              <p>4. 提现手续费: 0%</p>
            </div>
          </section>

          {/* API Reference */}
          <section className="bg-[#0f2137]/60 rounded-xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <Code className="w-6 h-6 text-[#38bdac]" />
              <h2 className="text-xl font-semibold">API接口</h2>
            </div>

            <div className="space-y-4 text-gray-300 text-sm">
              <div className="bg-[#0a1628] rounded-lg p-4">
                <p className="text-gray-400 mb-2">获取章节内容</p>
                <code className="text-[#38bdac]">GET /api/content?id=1.1</code>
              </div>
              <div className="bg-[#0a1628] rounded-lg p-4">
                <p className="text-gray-400 mb-2">飞书文档同步</p>
                <code className="text-[#38bdac]">POST /api/feishu/sync</code>
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>
  )
}