import { Mail, Github, Twitter, Linkedin } from "lucide-react"
import Link from "next/link"

const socialLinks = [
  { icon: Github, label: "GitHub", href: "https://github.com/JulianRadix" },
  { icon: Twitter, label: "Twitter", href: "https://cdn.prod.website-files.com/65ba70a5bb6f912baf0094a3/692588c50754ada9941bfd11_glenncatteeuw.com_404(1440).webp" },
  { icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com/in/JulianRadix" },
]

export function Contact() {
  return (
    <section id="contact" className="py-24 border-t border-border">
      <div className="max-w-4xl mx-auto px-6">
        <div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
          {/* Section label */}
          <div>
            <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Contact</h2>
            <div className="mt-2 w-12 h-px bg-primary" />
          </div>

          {/* Content */}
          <div className="space-y-8">
            <div className="space-y-4">
              <p className="text-lg text-foreground">
                Want to discuss a project, ask a technical question, or just say hello?
              </p>
              <p className="text-muted-foreground">
                I'm always open to interesting conversations about backend systems, infrastructure, or building
                developer tools.
              </p>
            </div>

            {/* Email */}
            <div className="space-y-3">
              <h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Email</h3>
              <div className="flex items-center gap-3">
                <Mail size={16} className="text-primary" />
                <a
                  href="mailto:hello@atticl.com"
                  className="font-mono text-foreground hover:text-primary transition-colors"
                >
                  hello@atticl.com
                </a>
              </div>
            </div>

            {/* Social links */}
            <div className="space-y-3">
              <h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Elsewhere</h3>
              <div className="flex flex-wrap gap-4">
                {socialLinks.map((link) => (
                  <Link
                    key={link.label}
                    href={link.href}
                    target="_blank"
                    className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
                  >
                    <link.icon size={18} />
                    <span className="text-sm">{link.label}</span>
                  </Link>
                ))}
              </div>
            </div>

            {/* Terminal-style response time */}
            <div className="bg-card border border-border rounded-lg p-4 font-mono text-sm">
              <div className="flex items-center gap-2 text-muted-foreground">
                <span className="text-primary">$</span>
                <span>response_time</span>
              </div>
              <div className="mt-2 text-muted-foreground">
                <span className="text-terminal">{">"} Usually within 24-48 hours</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}