const contactItems = [
  {
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
      </svg>
    ),
    label: "Telefon",
    value: "+49 171 9345193",
    href: "tel:+4917193451093",
  },
  {
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
    ),
    label: "E-Mail",
    value: "kontakt@mbo-tech-it.de",
    href: "mailto:kontakt@mbo-tech-it.de",
  },
];

export default function Contact() {
  return (
    <section id="contact" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[#111925]" />
      <div className="absolute inset-0 bg-grid opacity-40" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.07)_0%,transparent_70%)]" />

      <div className="max-w-4xl mx-auto relative">
        {/* Header */}
        <div className="text-center mb-12">
          <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
            Kontakt
          </span>
          <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
            Projekt anfragen
          </h2>
          <p className="text-slate-400 text-lg max-w-xl mx-auto">
            Sie haben ein IT-Projekt oder eine Frage? Schreiben Sie uns &mdash;
            wir melden uns schnellstmöglich bei Ihnen.
          </p>
        </div>

        {/* Contact form */}
        <div className="bg-gray-900 border border-gray-800 rounded-3xl p-8 sm:p-10">
          <form className="space-y-6">
            <div className="grid sm:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-slate-300 mb-2">Name</label>
                <input
                  type="text"
                  placeholder="Max Mustermann"
                  className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-300 mb-2">E-Mail</label>
                <input
                  type="email"
                  placeholder="max@beispiel.de"
                  className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">Betreff</label>
              <select className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors appearance-none">
                <option value="">Thema auswählen...</option>
                <option value="docker">Docker Installation</option>
                <option value="kubernetes">Kubernetes Setup</option>
                <option value="proxmox">Proxmox Virtualisierung</option>
                <option value="hetzner">Hetzner Cloud Infrastruktur</option>
                <option value="hardware">Hardware & Software</option>
                <option value="other">Sonstiges</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">Nachricht</label>
              <textarea
                rows={5}
                placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."
                className="w-full px-4 py-3 rounded-xl bg-[#111925] border border-gray-700 text-white placeholder-slate-600 focus:outline-none focus:border-orange-500/60 focus:ring-1 focus:ring-orange-500/20 transition-colors resize-none"
              />
            </div>

            <button type="submit" className="btn-primary w-full py-4 text-lg">
              Nachricht senden
            </button>
          </form>

          {/* Divider */}
          <div className="flex items-center gap-4 my-8">
            <div className="flex-1 h-px bg-gray-800" />
            <span className="text-slate-600 text-sm">oder direkt</span>
            <div className="flex-1 h-px bg-gray-800" />
          </div>

          {/* Contact info */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
            {contactItems.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className="flex items-center gap-3 text-slate-300 hover:text-orange-400 transition-colors duration-200 group"
              >
                <span className="w-10 h-10 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-400 group-hover:bg-orange-500/20 transition-colors duration-200">
                  {item.icon}
                </span>
                <div>
                  <div className="text-xs text-slate-500">{item.label}</div>
                  <div className="font-medium">{item.value}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}