"use client";

export function Contact() {
  return (
    <section className="mx-auto w-full max-w-2xl space-y-4 pb-8 text-center">
      <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 sm:text-3xl">
        Want to talk?
      </h2>
      <div className="rounded-3xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 p-6 backdrop-blur-md sm:p-8">
        <p className="mb-6 text-base text-gray-300 sm:mb-8 sm: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 justify-center gap-3 sm:flex-row sm:gap-4">
          <a
            href="mailto:space@reversed.dev"
            className="w-full rounded-full bg-gradient-to-r from-white to-gray-100 px-6 py-3 font-bold text-black transition-all shadow-lg shadow-white/20 hover:from-gray-100 hover:to-white hover:shadow-white/30 sm:w-auto"
          >
            Shoot me an Email
          </a>
          <a
            href="https://discord.com/users/456443941169004545"
            target="_blank"
            rel="noreferrer"
            className="w-full rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] px-6 py-3 font-bold text-white transition-all shadow-lg shadow-[#5865F2]/30 hover:from-[#4752C4] hover:to-[#5865F2] hover:shadow-[#5865F2]/50 sm:w-auto"
          >
            Chat on Discord
          </a>
        </div>
      </div>
    </section>
  );
}
