"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: "邮件",
      details: "contact@simba-robotics.com",
      link: "mailto:contact@simba-robotics.com",
    },
    {
      icon: <Phone className="h-5 w-5 text-primary" />,
      title: "电话",
      details: "+86 139 3616 9908",
      link: "tel:+8613936169908",
    },
    {
      icon: <MapPin className="h-5 w-5 text-primary" />,
      title: "地址",
      details: "602 实验室, 电子工程学院, 黑龙江大学",
      link: "https://www.bing.com/maps?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",
    },
  ]

  const socialLinks = [
    {
      icon: <Github className="h-5 w-5" />,
      name: "GitHub",
      link: "https://github.com/simba-robotics",
    },
    {
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="white"
          stroke="currentColor"
          strokeWidth="0"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-5 w-5"
        >
        <path d="M7.17157 2.75737L10.414 5.99948H13.585L16.8284 2.75737C17.219 2.36685 17.8521 2.36685 18.2426 2.75737C18.6332 3.1479 18.6332 3.78106 18.2426 4.17158L16.414 5.99948L18.5 6.00001C20.433 6.00001 22 7.56701 22 9.50001V17.5C22 19.433 20.433 21 18.5 21H5.5C3.567 21 2 19.433 2 17.5V9.50001C2 7.56701 3.567 6.00001 5.5 6.00001L7.585 5.99948L5.75736 4.17158C5.36684 3.78106 5.36684 3.1479 5.75736 2.75737C6.14788 2.36685 6.78105 2.36685 7.17157 2.75737ZM18.5 8.00001H5.5C4.7203 8.00001 4.07955 8.5949 4.00687 9.35555L4 9.50001V17.5C4 18.2797 4.59489 18.9205 5.35554 18.9931L5.5 19H18.5C19.2797 19 19.9204 18.4051 19.9931 17.6445L20 17.5V9.50001C20 8.67158 19.3284 8.00001 18.5 8.00001ZM8 11C8.55228 11 9 11.4477 9 12V14C9 14.5523 8.55228 15 8 15C7.44772 15 7 14.5523 7 14V12C7 11.4477 7.44772 11 8 11ZM16 11C16.5523 11 17 11.4477 17 12V14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14V12C15 11.4477 15.4477 11 16 11Z"></path>
        </svg>
      ),
      name: "Bilibili",
      link: "https://space.bilibili.com/simbarobotics",
    },
    {
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="white"
          stroke="currentColor"
          strokeWidth="0"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-5 w-5"
        >
        <path d="M8.66725 11.5114C7.94997 11.5114 7.38211 10.9432 7.38211 10.2255C7.38211 9.50784 7.94997 8.93968 8.66725 8.93968C9.38454 8.93968 9.95239 9.50784 9.95239 10.2255C9.95239 10.9432 9.38454 11.5114 8.66725 11.5114ZM15.3339 11.5114C14.6166 11.5114 14.0488 10.9432 14.0488 10.2255C14.0488 9.50784 14.6166 8.93968 15.3339 8.93968C16.0512 8.93968 16.6191 9.50784 16.6191 10.2255C16.6191 10.9432 16.0512 11.5114 15.3339 11.5114ZM6.82289 19.2153L7.53841 18.7789C8.34812 18.2851 9.30697 18.095 10.2438 18.2426C10.4553 18.2759 10.6292 18.3015 10.7634 18.3192C11.1696 18.3728 11.5828 18.4 12.0006 18.4C16.4213 18.4 19.9006 15.3776 19.9006 11.8C19.9006 8.22235 16.4213 5.19995 12.0006 5.19995C7.57986 5.19995 4.10059 8.22235 4.10059 11.8C4.10059 13.1655 4.60024 14.4728 5.53227 15.5809C5.58056 15.6383 5.65277 15.7177 5.74666 15.8155C6.54199 16.6438 6.94301 17.7739 6.84765 18.9182L6.82289 19.2153ZM6.19286 21.9423C6.00989 22.0566 5.79484 22.1087 5.57981 22.0908C5.02944 22.045 4.62045 21.5616 4.66631 21.0112L4.85456 18.7521C4.90224 18.1799 4.70173 17.6149 4.30407 17.2008C4.1819 17.0735 4.08111 16.9627 4.0017 16.8683C2.80622 15.447 2.10059 13.6951 2.10059 11.8C2.10059 7.0503 6.53297 3.19995 12.0006 3.19995C17.4682 3.19995 21.9006 7.0503 21.9006 11.8C21.9006 16.5496 17.4682 20.4 12.0006 20.4C11.4911 20.4 10.9906 20.3665 10.5018 20.302C10.3491 20.2819 10.1593 20.254 9.93256 20.2182C9.46412 20.1444 8.9847 20.2395 8.57985 20.4864L6.19286 21.9423Z"></path>
        </svg>
      ),
      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>
  )
}