"use client";

import { CONTACT_EMAIL } from "../types";

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-semibold text-white sm:text-3xl">Want to talk?</h2>
      <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6 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:${CONTACT_EMAIL}`}
            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>
  );
}