soul-yongping/components/purchase-section.tsx

"use client"

import { useState, useEffect } from "react"
import { Zap, BookOpen, Check, TrendingUp } from "lucide-react"
import { getFullBookPrice, getAllSections } from "@/lib/book-data"
import { useStore } from "@/lib/store"
import { AuthModal } from "./modules/auth/auth-modal"
import { PaymentModal } from "./modules/payment/payment-modal"

export function PurchaseSection() {
  const [fullBookPrice, setFullBookPrice] = useState(9.9)
  const [sectionsCount, setSectionsCount] = useState(55)
  const [isAuthOpen, setIsAuthOpen] = useState(false)
  const [isPaymentOpen, setIsPaymentOpen] = useState(false)
  const { isLoggedIn } = useStore()

  useEffect(() => {
    const sections = getAllSections()
    setSectionsCount(sections.length)
    setFullBookPrice(getFullBookPrice(sections.length))
  }, [])

  const handlePurchase = () => {
    if (!isLoggedIn) {
      setIsAuthOpen(true)
      return
    }
    setIsPaymentOpen(true)
  }

  return (
    <section className="py-12 px-4">
      <div className="max-w-md mx-auto">
        {/* 区域标题 */}
        <div className="text-center mb-8">
          <h2 className="text-xl font-semibold text-white mb-2">选择购买方式</h2>
          <p className="text-[var(--app-text-tertiary)] text-sm">一次付费，永久阅读</p>
        </div>

        {/* 定价卡片 */}
        <div className="space-y-4">
          {/* 单节购买 */}
          <div className="glass-card p-5 touch-feedback cursor-pointer">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-[var(--app-bg-secondary)] flex items-center justify-center">
                  <BookOpen className="w-6 h-6 text-[var(--app-text-secondary)]" />
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-0.5">单节购买</h3>
                  <p className="text-[var(--app-text-tertiary)] text-sm">按兴趣选择章节</p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-white">¥1</p>
                <p className="text-[var(--app-text-tertiary)] text-xs">/节</p>
              </div>
            </div>
          </div>

          {/* 整本购买 - 推荐 */}
          <div className="relative">
            {/* 推荐标签 */}
            <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
              <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-[var(--app-brand)] text-white text-xs font-medium shadow-lg">
                <Zap className="w-3 h-3" />
                最划算
              </span>
            </div>
            
            <div 
              onClick={handlePurchase}
              className="glass-card-heavy p-5 cursor-pointer touch-feedback border-[var(--app-brand)]/30 relative overflow-hidden"
            >
              {/* 背景光效 */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--app-brand)] opacity-[0.08] blur-[60px] rounded-full" />
              
              <div className="relative">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-xl bg-[var(--app-brand-light)] flex items-center justify-center">
                      <Zap className="w-6 h-6 text-[var(--app-brand)]" />
                    </div>
                    <div>
                      <h3 className="text-white font-semibold mb-0.5">整本购买</h3>
                      <p className="text-[var(--app-text-tertiary)] text-sm">
                        全部 {sectionsCount} 节内容
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-3xl font-bold text-[var(--app-brand)]">¥{fullBookPrice.toFixed(1)}</p>
                    <p className="text-[var(--app-text-tertiary)] text-xs line-through">¥{sectionsCount}</p>
                  </div>
                </div>

                {/* 权益列表 */}
                <div className="space-y-2 mb-5">
                  {[
                    "解锁全部 " + sectionsCount + " 节商业案例",
                    "后续更新内容免费阅读",
                    "专属读者社群入群资格",
                    "分销返佣最高90%"
                  ].map((benefit, idx) => (
                    <div key={idx} className="flex items-center gap-2">
                      <div className="w-4 h-4 rounded-full bg-[var(--app-brand-light)] flex items-center justify-center">
                        <Check className="w-2.5 h-2.5 text-[var(--app-brand)]" />
                      </div>
                      <span className="text-[var(--app-text-secondary)] text-sm">{benefit}</span>
                    </div>
                  ))}
                </div>

                {/* 购买按钮 */}
                <button className="btn-ios w-full glow flex items-center justify-center gap-2">
                  <span>立即购买</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* 动态定价说明 */}
        <div className="mt-6 glass-card p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-[var(--ios-orange)]/20 flex items-center justify-center">
              <TrendingUp className="w-5 h-5 text-[var(--ios-orange)]" />
            </div>
            <div className="flex-1">
              <p className="text-white text-sm font-medium mb-0.5">动态定价机制</p>
              <p className="text-[var(--app-text-tertiary)] text-xs">
                每新增一章节，整本价格 +¥1，早买早优惠
              </p>
            </div>
          </div>
        </div>
      </div>

      <AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        type="fullbook"
        amount={fullBookPrice}
        onSuccess={() => window.location.reload()}
      />
    </section>
  )
}