"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: "地址",
      details: "602 实验室, 电子工程学院, 黑龙江大学",
      link: "https://www.bing.com/maps?&ty=18&q=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&ss=ypid.YN4067x5856225&mb=45.709873~126.616074~45.704718~126.624132&description=%E9%BB%91%E9%BE%99%E6%B1%9F%E7%9C%81%E5%93%88%E5%B0%94%E6%BB%A8%E5%B8%82%E5%AD%A6%E5%BA%9C%E8%B7%AF74%E5%8F%B7&cardbg=%23333333&dt=1744891200000&tt=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&tsts0=%2526ty%253D18%2526q%253D%2525E9%2525BB%252591%2525E9%2525BE%252599%2525E6%2525B1%25259F%2525E5%2525A4%2525A7%2525E5%2525AD%2525A6-%2525E7%252594%2525B5%2525E5%2525AD%252590%2525E5%2525B7%2525A5%2525E7%2525A8%25258B%2525E5%2525AD%2525A6%2525E9%252599%2525A2%2526ss%253Dypid.YN4067x5856225%2526mb%253D45.709873~126.616074~45.704718~126.624132%2526description%253D%2525E9%2525BB%252591%2525E9%2525BE%252599%2525E6%2525B1%25259F%2525E7%25259C%252581%2525E5%252593%252588%2525E5%2525B0%252594%2525E6%2525BB%2525A8%2525E5%2525B8%252582%2525E5%2525AD%2525A6%2525E5%2525BA%25259C%2525E8%2525B7%2525AF74%2525E5%25258F%2525B7%2526cardbg%253D%252523333333%2526dt%253D1744891200000&tstt0=%E9%BB%91%E9%BE%99%E6%B1%9F%E5%A4%A7%E5%AD%A6-%E7%94%B5%E5%AD%90%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&cp=45.707282~126.619347&lvl=18.469374&pi=0&ftst=0&ftics=False&v=2&sV=2&form=S00027",
    },
  ]

  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: "https://weixin.qq.com/r/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}
                  >
                    {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>
  )
}