import { Team } from '@/components/about/Team'
import { Certifications } from '@/components/about/Certifications'
import { Badge } from '@/components/ui/badge'

export default function AboutPage() {
  return (
    <div className="pt-24 pb-20">
      {/* Hero Section */}
      <section className="container mx-auto px-4 md:px-6 mb-20">
        <div className="max-w-4xl mx-auto text-center">
          <Badge variant="outline" className="mb-4 border-primary text-primary bg-primary/5">
            国资背景 · 军工技术
          </Badge>
          <h1 className="text-4xl md:text-5xl font-bold text-secondary mb-8">
            相互成就 · 共创未来
          </h1>
          <p className="text-lg text-muted-foreground leading-relaxed mb-8">
            白马家园（白马精选）是一家拥有国资背景的高新技术企业，已获五轮融资超 2 亿元。
            我们致力于通过 AI 人工智能、大数据分析、区块链等前沿技术，解决实体商家"流量难、锁客难、变现难"的痛点，
            构建万商互联的共享经济生态。
          </p>
        </div>
      </section>

      <Team />
      <Certifications />
      
      {/* Financing History */}
      <section className="py-20 bg-secondary text-white">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-3xl font-bold text-center mb-16">资本历程</h2>
          <div className="max-w-4xl mx-auto">
             <div className="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/20 before:to-transparent">
                {[
                  { year: "B轮", title: "启迪之星投资", desc: "进一步夯实技术壁垒与市场版图" },
                  { year: "A+轮", title: "沂景 / 创世伙伴 / 中测航天", desc: "多方资本加持，加速生态布局" },
                  { year: "A轮", title: "创世伙伴 CCV 领投", desc: "获得知名风投机构青睐" },
                  { year: "Pre-A", title: "中体基金领投", desc: "初步验证商业模式" },
                  { year: "天使轮", title: "玖创 / 唯猎 / 天使湾", desc: "启动创业征程" }
                ].map((item, index) => (
                  <div key={index} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
                    <div className="flex items-center justify-center w-10 h-10 rounded-full border border-white/20 bg-white/10 group-[.is-active]:bg-primary text-white shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
                      <div className="w-3 h-3 bg-current rounded-full"></div>
                    </div>
                    <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-4 rounded border border-white/10 bg-white/5 shadow">
                      <div className="flex items-center justify-between space-x-2 mb-1">
                        <div className="font-bold text-white">{item.title}</div>
                        <time className="font-mono italic text-primary">{item.year}</time>
                      </div>
                      <div className="text-white/60 text-sm">{item.desc}</div>
                    </div>
                  </div>
                ))}
             </div>
          </div>
        </div>
      </section>
    </div>
  )
}