"use client";

export function Contact() {
  return (
    <section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
      <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">
        Want to talk?
      </h2>
      <div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-blue-500/20 backdrop-blur-md">
        <p className="text-gray-300 mb-8 text-lg">
          Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href="mailto:space@reversed.dev"
            className="px-8 py-3 rounded-full bg-gradient-to-r from-white to-gray-100 text-black font-bold hover:from-gray-100 hover:to-white transition-all shadow-lg shadow-white/20 hover:shadow-white/30"
          >
            Shoot me an Email
          </a>
          <a
            href="https://discord.com/users/456443941169004545"
            target="_blank"
            rel="noreferrer"
            className="px-8 py-3 rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] text-white font-bold hover:from-[#4752C4] hover:to-[#5865F2] transition-all shadow-lg shadow-[#5865F2]/30 hover:shadow-[#5865F2]/50"
          >
            Chat on Discord
          </a>
        </div>
      </div>
    </section>
  );
}
