"use client";

import React from "react";
import { Mail, MailOpen, LinkedinIcon, GithubIcon } from "lucide-react";

const Contact = () => {
  const itemClass =
    "group relative flex items-center gap-3 text-gray-700 font-mulish text-lg rounded-lg px-3 py-2 -mx-3 transition-colors duration-300 hover:text-blue-600";

  return (
    <section
      id="contactScroll"
      className="mx-auto flex justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
    >
      <div className="w-full max-w-6xl">
        <h3 className="text-2xl font-poppins text-blue-500 mb-4 font-extrabold text-center">
          Contact
        </h3>
        <p className="text-gray-700 font-poppins text-xl mt-5 font-semibold text-center mb-12">
          Feel free to contact me!
        </p>

        <div className="flex justify-center">
          <div className="bg-white p-8 rounded-xl shadow-xl border border-gray-100 flex flex-col gap-4 w-full max-w-md">
            <a
              href="mailto:contact@valentin-massonniere.ch"
              className={itemClass}
            >
              <span className="relative flex-shrink-0 w-6 h-6 text-blue-500">
                <Mail
                  className="absolute inset-0 transition-opacity duration-300 ease-out group-hover:opacity-0"
                  size={24}
                />
                <MailOpen
                  className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100"
                  size={24}
                />
              </span>
              <span className="relative min-w-0 break-words">
                contact@valentin-massonniere.ch
              </span>
            </a>

            <a
              href="https://github.com/TheValll"
              target="_blank"
              rel="noopener noreferrer"
              className={itemClass}
            >
              <GithubIcon
                className="relative flex-shrink-0 text-blue-500"
                size={24}
              />
              <span className="relative">TheValll</span>
            </a>

            <a
              href="https://www.linkedin.com/in/valentin-massonniere/"
              target="_blank"
              rel="noopener noreferrer"
              className={itemClass}
            >
              <LinkedinIcon
                className="relative flex-shrink-0 text-blue-500"
                size={24}
              />
              <span className="relative">Valentin MASSONNIERE</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;