import { Github, Mail } from "lucide-react"

const socials = [
  { icon: Mail, label: "Email", href: "mailto:jeff@emmett.com" },
  {
    icon: () => (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.01 18.5c-1.75 1.75-4.08 2.71-6.51 2.71s-4.76-.96-6.51-2.71C2.24 16.75 1.28 14.42 1.28 12s.96-4.76 2.71-6.51C5.74 3.74 8.07 2.78 10.5 2.78s4.76.96 6.51 2.71c1.75 1.75 2.71 4.08 2.71 6.51s-.96 4.76-2.71 6.51z" />
      </svg>
    ),
    label: "Bluesky",
    href: "https://bsky.app/profile/jeffemmett.bsky.social",
  },
  {
    icon: () => (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
      </svg>
    ),
    label: "Medium",
    href: "https://medium.com/@jeffemmett",
  },
  {
    icon: Github,
    label: "Commons Stack",
    href: "https://commonsstack.org",
  },
  {
    icon: () => (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
      </svg>
    ),
    label: "MycoFi",
    href: "https://mycofi.earth",
  },
]

export function ContactSection() {
  return (
    <section id="contact" className="py-32 px-6 bg-card/30">
      <div className="max-w-4xl mx-auto text-center">
        <div className="mb-16">
          <h2 className="text-5xl md:text-6xl font-bold mb-6">Let's Connect</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto text-balance leading-relaxed">
            Interested in token engineering, regenerative economics, or building commons-based systems? Let's
            collaborate.
          </p>
        </div>

        <div className="flex flex-wrap gap-6 justify-center mb-12">
          {socials.map((social) => {
            const Icon = social.icon
            return (
              <a
                key={social.label}
                href={social.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-3 px-6 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-primary hover:text-primary-foreground"
              >
                <Icon className="h-5 w-5" />
                <span>{social.label}</span>
              </a>
            )
          })}
        </div>

        <div className="pt-12 border-t border-border">
          <p className="text-muted-foreground font-mono text-sm">
            © 2025 Jeff Emmett. Built with Next.js & TailwindCSS
          </p>
        </div>
      </div>
    </section>
  )
}