"use client"

import Link from "next/link"
import { ChevronLeft, Clock, MessageCircle, BookOpen, Users, Award, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { QRCodeModal } from "@/components/modules/marketing/qr-code-modal"
import { useStore } from "@/lib/store"

export default function AboutPage() {
  const [showQRModal, setShowQRModal] = useState(false)
  const { settings } = useStore()
  const authorInfo = settings?.authorInfo || {
    name: "卡若",
    description: "连续创业者,私域运营专家",
    liveTime: "06:00-09:00",
    platform: "Soul派对房",
  }

  const milestones = [
    { year: "2012", event: "开始做游戏推广,从魔兽世界外挂代理起步" },
    { year: "2015", event: "转型电商,做天猫虚拟充值,月流水380万" },
    { year: "2017", event: "团队扩张到200人,年流水3000万" },
    { year: "2018", event: "公司破产,负债数百万,开始全国旅行反思" },
    { year: "2019", event: "重新出发,专注私域运营和个人IP" },
    { year: "2024", event: "在Soul派对房每日直播,分享真实商业故事" },
  ]

  const stats = [
    { icon: BookOpen, value: "55+", label: "真实案例" },
    { icon: Users, value: "10000+", label: "派对房听众" },
    { icon: Award, value: "15年", label: "创业经验" },
    { icon: TrendingUp, value: "3000万", label: "最高年流水" },
  ]

  return (
    <div className="min-h-screen bg-[#0a1628] text-white pb-20">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
            <ChevronLeft className="w-5 h-5" />
            <span>返回</span>
          </Link>
          <h1 className="flex-1 text-center text-lg font-semibold">关于作者</h1>
          <div className="w-16" />
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-4 py-8">
        {/* Author Card */}
        <div className="bg-gradient-to-br from-[#38bdac]/20 to-[#0f2137] rounded-2xl p-8 border border-[#38bdac]/30 mb-8">
          <div className="flex flex-col md:flex-row items-center gap-6">
            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-[#38bdac] to-[#1a5a50] flex items-center justify-center text-4xl font-bold text-white">
              {authorInfo.name.charAt(0)}
            </div>
            <div className="text-center md:text-left flex-1">
              <h2 className="text-2xl font-bold text-white mb-2">{authorInfo.name}</h2>
              <p className="text-gray-400 mb-4">{authorInfo.description}</p>
              <div className="flex items-center justify-center md:justify-start gap-4 text-sm">
                <span className="flex items-center gap-1 text-[#38bdac]">
                  <Clock className="w-4 h-4" />
                  每日 {authorInfo.liveTime}
                </span>
                <span className="flex items-center gap-1 text-gray-400">
                  <MessageCircle className="w-4 h-4" />
                  {authorInfo.platform}
                </span>
              </div>
            </div>
            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
              <MessageCircle className="w-4 h-4 mr-2" />
              加入派对群
            </Button>
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          {stats.map((stat, index) => (
            <div
              key={index}
              className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-gray-700/50 text-center"
            >
              <stat.icon className="w-6 h-6 text-[#38bdac] mx-auto mb-2" />
              <p className="text-2xl font-bold text-white">{stat.value}</p>
              <p className="text-gray-400 text-sm">{stat.label}</p>
            </div>
          ))}
        </div>

        {/* Introduction */}
        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
          <h3 className="text-lg font-semibold text-white mb-4">关于这本书</h3>
          <div className="space-y-4 text-gray-300 leading-relaxed">
            <p>"这不是一本教你成功的鸡汤书。"</p>
            <p>
              这是我每天早上6点到9点,在Soul派对房和几百个陌生人分享的真实故事。 有人来找项目,有人来找钱,有人来找方向。
            </p>
            <p>
              我见过凌晨四点还在撸运费险的年轻人,见过七十岁还在开滴滴做生意的老人,
              见过一个月赚七八块却拼命倒卖游戏金币的大学生。
            </p>
            <p className="text-[#38bdac] font-semibold">"社会不是靠努力,是靠洞察与选择。"</p>
            <p>
              这本书,就是把那些在派对房里讲过的、能让人清醒的故事,整理成文字。每个案例都真实发生过,每个教训都是用钱换来的。
            </p>
          </div>
        </div>

        {/* Timeline */}
        <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
          <h3 className="text-lg font-semibold text-white mb-6">创业历程</h3>
          <div className="space-y-4">
            {milestones.map((item, index) => (
              <div key={index} className="flex gap-4">
                <div className="flex flex-col items-center">
                  <div className="w-3 h-3 rounded-full bg-[#38bdac]" />
                  {index < milestones.length - 1 && <div className="w-0.5 h-full bg-gray-700 mt-1" />}
                </div>
                <div className="pb-4">
                  <p className="text-[#38bdac] font-semibold">{item.year}</p>
                  <p className="text-gray-300">{item.event}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30 text-center">
          <h3 className="text-xl font-semibold text-white mb-2">想听更多真实故事?</h3>
          <p className="text-gray-400 mb-6">每天早上6-9点,卡若在Soul派对房免费分享</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button onClick={() => setShowQRModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
              <MessageCircle className="w-4 h-4 mr-2" />
              加入派对群
            </Button>
            <Link href="/chapters">
              <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700/50 bg-transparent">
                <BookOpen className="w-4 h-4 mr-2" />
                开始阅读
              </Button>
            </Link>
          </div>
        </div>
      </main>

      <QRCodeModal isOpen={showQRModal} onClose={() => setShowQRModal(false)} />
    </div>
  )
}