"use client"

import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Camera, Award, MapPin, Calendar, Heart, Lightbulb, Target, Users } from "lucide-react"

interface AboutViewProps {
  onContactClick?: () => void
}

export function AboutView({ onContactClick }: AboutViewProps) {
  const achievements = [
    {
      year: "2024",
      title: "国际摄影大赛金奖",
      description: "风光摄影类别获得金奖",
      icon: Award,
    },
    {
      year: "2023",
      title: "个人摄影展",
      description: "在北京798艺术区举办个人摄影展",
      icon: Camera,
    },
    {
      year: "2022",
      title: "摄影师认证",
      description: "获得国际摄影师协会认证",
      icon: Badge,
    },
    {
      year: "2021",
      title: "开始职业摄影",
      description: "正式成为职业摄影师",
      icon: Calendar,
    },
  ]

  const skills = [
    { name: "风光摄影", level: 95 },
    { name: "人像摄影", level: 90 },
    { name: "街头摄影", level: 85 },
    { name: "建筑摄影", level: 88 },
    { name: "后期处理", level: 92 },
    { name: "商业摄影", level: 80 },
  ]

  const equipment = [
    {
      category: "相机机身",
      items: ["Canon EOS R5", "Sony A7R IV", "Nikon D850", "Fujifilm X-T4"],
    },
    {
      category: "镜头",
      items: ["24-70mm f/2.8", "70-200mm f/4", "85mm f/1.4", "16-35mm f/2.8", "90mm f/2.8 Macro"],
    },
    {
      category: "配件",
      items: ["三脚架", "滤镜系统", "闪光灯", "反光板", "无人机"],
    },
  ]

  return (
    <div className="max-w-6xl mx-auto space-y-16">
      {/* Hero Section */}
      <div className="text-center mb-16">
        <h1 className="text-4xl md:text-6xl font-light text-gray-900 mb-4">关于我</h1>
        <p className="text-lg text-gray-600 max-w-2xl mx-auto">分享我的摄影故事，探索光影背后的创作理念与人生感悟</p>
      </div>

      {/* Personal Introduction */}
      <div className="grid md:grid-cols-2 gap-12 items-center">
        <div className="space-y-6">
          <div>
            <h2 className="text-3xl font-light text-gray-900 mb-4">张明华</h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              我是一名专业摄影师，拥有超过8年的摄影经验。我的作品涵盖风光、人像、街头、建筑等多个领域，致力于通过镜头捕捉世界的美好瞬间。
            </p>
            <p className="text-gray-600 leading-relaxed mb-4">
              摄影对我来说不仅仅是一份职业，更是一种表达情感和观察世界的方式。我相信每一张照片都有其独特的故事，每一次快门的按下都是对时光的珍贵记录。
            </p>
            <p className="text-gray-600 leading-relaxed">
              我的作品曾在多个国际摄影比赛中获奖，并在国内外多个城市举办过个人摄影展。我希望通过我的镜头，让更多人感受到这个世界的美好与温暖。
            </p>
          </div>

          <div className="flex flex-wrap gap-4">
            <div className="flex items-center gap-2 text-gray-600">
              <MapPin className="h-4 w-4" />
              <span>北京，中国</span>
            </div>
            <div className="flex items-center gap-2 text-gray-600">
              <Calendar className="h-4 w-4" />
              <span>8年摄影经验</span>
            </div>
            <div className="flex items-center gap-2 text-gray-600">
              <Camera className="h-4 w-4" />
              <span>专业摄影师</span>
            </div>
          </div>
        </div>

        <div className="relative">
          <div className="aspect-[3/4] relative overflow-hidden rounded-lg">
            <Image src="/placeholder.svg?height=600&width=450" alt="摄影师张明华" fill className="object-cover" />
          </div>
        </div>
      </div>

      {/* Photography Philosophy */}
      <div className="bg-gray-50 rounded-2xl p-8 md:p-12">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-light text-gray-900 mb-4">摄影理念</h2>
          <p className="text-gray-600 max-w-3xl mx-auto">我的摄影理念建立在对光影、情感和故事的深度理解之上</p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Heart className="h-8 w-8 text-blue-600" />
            </div>
            <h3 className="text-xl font-medium text-gray-900 mb-3">情感共鸣</h3>
            <p className="text-gray-600 leading-relaxed">
              每一张照片都应该能够触动观者的内心，传达真实的情感和故事。我追求的不仅是技术的完美，更是情感的真实表达。
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Lightbulb className="h-8 w-8 text-green-600" />
            </div>
            <h3 className="text-xl font-medium text-gray-900 mb-3">创意视角</h3>
            <p className="text-gray-600 leading-relaxed">
              我相信创意来源于对生活的细致观察和独特思考。通过不同的角度和构图，发现平凡中的不平凡。
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Target className="h-8 w-8 text-purple-600" />
            </div>
            <h3 className="text-xl font-medium text-gray-900 mb-3">精益求精</h3>
            <p className="text-gray-600 leading-relaxed">
              从前期拍摄到后期处理，我对每一个细节都精益求精。技术是表达创意的工具，而完美的技术服务于完美的创意。
            </p>
          </div>
        </div>
      </div>

      {/* Skills */}
      <div>
        <h2 className="text-3xl font-light text-gray-900 mb-8 text-center">专业技能</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {skills.map((skill) => (
            <div key={skill.name} className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-gray-900 font-medium">{skill.name}</span>
                <span className="text-gray-600 text-sm">{skill.level}%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className="bg-gray-900 h-2 rounded-full transition-all duration-1000"
                  style={{ width: `${skill.level}%` }}
                ></div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Achievements Timeline */}
      <div>
        <h2 className="text-3xl font-light text-gray-900 mb-12 text-center">成就历程</h2>
        <div className="relative">
          <div className="absolute left-8 md:left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform md:-translate-x-0.5"></div>

          <div className="space-y-8">
            {achievements.map((achievement, index) => (
              <div
                key={achievement.year}
                className={`relative flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"}`}
              >
                <div className="absolute left-8 md:left-1/2 w-4 h-4 bg-gray-900 rounded-full transform -translate-x-1/2 z-10"></div>

                <div
                  className={`w-full md:w-5/12 ml-16 md:ml-0 ${
                    index % 2 === 0 ? "md:mr-auto md:pr-8" : "md:ml-auto md:pl-8"
                  }`}
                >
                  <Card className="border-0 shadow-sm">
                    <CardContent className="p-6">
                      <div className="flex items-start gap-4">
                        <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0">
                          <achievement.icon className="h-6 w-6 text-gray-600" />
                        </div>
                        <div>
                          <div className="text-sm text-gray-500 mb-1">{achievement.year}</div>
                          <h3 className="text-lg font-medium text-gray-900 mb-2">{achievement.title}</h3>
                          <p className="text-gray-600 text-sm">{achievement.description}</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Equipment */}
      <div>
        <h2 className="text-3xl font-light text-gray-900 mb-8 text-center">摄影设备</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {equipment.map((category) => (
            <Card key={category.category} className="border-0 shadow-sm">
              <CardContent className="p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4">{category.category}</h3>
                <div className="space-y-2">
                  {category.items.map((item) => (
                    <div key={item} className="flex items-center gap-2">
                      <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
                      <span className="text-gray-600 text-sm">{item}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Call to Action */}
      <div className="bg-gray-900 text-white rounded-2xl p-8 md:p-12 text-center">
        <Users className="h-12 w-12 mx-auto mb-6 text-gray-300" />
        <h2 className="text-3xl font-light mb-4">让我们一起创作</h2>
        <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
          如果您对我的作品感兴趣，或者有任何摄影项目需要合作，欢迎随时与我联系。我期待与您一起创造独特而珍贵的视觉记忆。
        </p>
        <Button onClick={onContactClick} className="bg-white text-gray-900 hover:bg-gray-100">
          联系我
        </Button>
      </div>
    </div>
  )
}