"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Mail, MapPin, Phone, Github, MessageSquare } from "lucide-react"

export default function ContactSection() {
  const contactInfo = [
    {
      icon: <Mail className="h-5 w-5 text-primary" />,
      title: "Email",
      details: "contact@simbarobotics.com",
      link: "mailto:contact@simbarobotics.com",
    },
    {
      icon: <Phone className="h-5 w-5 text-primary" />,
      title: "Phone",
      details: "+1 (123) 456-7890",
      link: "tel:+11234567890",
    },
    {
      icon: <MapPin className="h-5 w-5 text-primary" />,
      title: "Lab Location",
      details: "Room 602, Physics Building, Heilongjiang University",
      link: "https://maps.google.com",
    },
  ]

  const socialLinks = [
    {
      icon: <Github className="h-5 w-5" />,
      name: "GitHub",
      link: "https://github.com/simbarobotics",
    },
    {
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-5 w-5"
        >
          <path d="M17.8 4.8H6.2c-1.2 0-2.2 1-2.2 2.2v10c0 1.2 1 2.2 2.2 2.2h11.6c1.2 0 2.2-1 2.2-2.2V7c0-1.2-1-2.2-2.2-2.2Z" />
          <path d="m9 10 3 3 3-3" />
        </svg>
      ),
      name: "Bilibili",
      link: "https://space.bilibili.com/simbarobotics",
    },
    {
      icon: <MessageSquare className="h-5 w-5" />,
      name: "微信公众号",
      link: "#wechat-qrcode",
      onClick: (e) => {
        e.preventDefault()
        // 这里可以添加显示微信二维码的逻辑，例如打开一个模态框
        alert("扫描二维码关注我们的微信公众号：SimbaRobotics")
      },
    },
  ]

  return (
    <section id="contact" className="py-20 relative overflow-hidden">
      <div className="absolute inset-0 grid-pattern opacity-20" />
      <div className="absolute left-0 top-0 bottom-0 red-section z-0" />

      <div className="container mx-auto px-4 relative z-10">
        <div className="flex flex-col md:flex-row gap-8">
          <div className="md:w-1/3">
            <div className="red-accent pl-4">
              <h2 className="text-3xl font-bold mb-2 uppercase">联系我们</h2>
              <p className="text-xs text-muted-foreground uppercase mb-4 font-mono">CONTACT US</p>
            </div>
            <div className="diagonal-line mb-8"></div>
            <div className="content-overlay">
              <p className="text-muted-foreground mb-6 leading-relaxed">
                有问题或有兴趣加入我们的团队？请通过以下任何渠道联系我们。
              </p>
            </div>

            <div className="space-y-4">
              {contactInfo.map((item, index) => (
                <a
                  key={index}
                  href={item.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-4 p-4 border border-white/10 bg-white/5 card-hover-effect"
                >
                  <div className="p-2 bg-primary/10">{item.icon}</div>
                  <div>
                    <h3 className="font-medium">{item.title}</h3>
                    <p className="text-sm text-muted-foreground">{item.details}</p>
                  </div>
                </a>
              ))}
            </div>

            <div className="mt-8">
              <h3 className="font-bold mb-4">关注我们</h3>
              <div className="flex gap-4">
                {socialLinks.map((social, index) => (
                  <a
                    key={index}
                    href={social.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="p-3 bg-primary/10 hover:bg-primary/20 transition-colors card-hover-effect"
                    aria-label={social.name}
                    onClick={social.onClick}
                  >
                    {social.icon}
                  </a>
                ))}
              </div>
            </div>
          </div>

          <div className="md:w-2/3">
            <Card className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-4">加入我们的队伍</h3>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  Simba Robotics
                  正在寻找充满激情的新成员加入我们的团队。我们欢迎各种学术背景的学生，无论是机械工程、电子工程、计算机科学还是市场营销专业的学生。
                </p>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  如果您对机器人技术充满热情，希望在实际项目中运用自己的技能，并愿意在团队环境中工作，我们非常欢迎您的加入。
                </p>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  请通过上述渠道与我们联系，并附上您的简历和一封简短的介绍信，说明您希望加入 Simba Robotics 的原因。
                </p>
                <p className="text-primary font-bold font-sans">开放招募时间： 每学期的前两周</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}