"use client";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef } from "react";
import { getExperienceYears } from "@/lib/experience";
// Social Icons Import
import { FaGithub, FaLinkedin, FaFacebook, FaInstagram } from "react-icons/fa";
import { SiFiverr } from "react-icons/si";

gsap.registerPlugin(ScrollTrigger);

export default function About() {
  const container = useRef(null);

  useGSAP(
    () => {
      gsap.from(".about-content", {
        scrollTrigger: {
          trigger: container.current,
          start: "top 80%",
        },
        y: 50,
        opacity: 0,
        duration: 1,
        stagger: 0.2,
      });
    },
    { scope: container }
  );

  return (
    <section
      id="about"
      ref={container}
      className="py-20 bg-gray-50 dark:bg-black/50"
    >
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row items-center gap-12">
          {/* Image / Graphic Area */}
          <div className="w-full md:w-1/2 about-content">
            <div className="relative aspect-square rounded-2xl overflow-hidden bg-gray-200 dark:bg-gray-800 border-2 border-green-500/20 dark:border-purple-500/20">
              {/* Profile Image */}
              <img
                src="/images/Shihab.png"
                alt="Md Shihab"
                className="object-cover w-full h-full"
              />
            </div>
          </div>

          {/* Text Content */}
          <div className="w-full md:w-1/2 about-content">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              About{" "}
              <span className="text-green-600 dark:text-purple-500">Me</span>
            </h2>
            <p className="text-gray-600 dark:text-gray-300 text-lg mb-4 leading-relaxed">
              I am a results-driven{" "}
              <span className="font-semibold text-green-600 dark:text-purple-400">
                Full Stack Developer
              </span>{" "}
              with over 3 years of hands-on experience in architecting scalable
              web and mobile solutions. My core expertise lies in the MERN Stack
              (MongoDB, Express, React, Node.js) and Next.js, where I have
              successfully delivered high-performance applications tailored to
              diverse business needs.
            </p>
            <p className="text-gray-600 dark:text-gray-300 text-lg mb-4 leading-relaxed">
              Beyond traditional web development, I specialize in building
              seamless cross-platform mobile apps using React Native and
              integrating cutting-edge AI solutions to create smart,
              future-ready digital products. My technical proficiency extends to
              DevOps, where I adeptly manage VPS Ubuntu servers, Docker, and AWS
              to ensure secure and efficient deployments. Proven track record of
              optimizing application performance by up to 50% and implementing
              robust automation systems.
            </p>

            {/* Social Media Icons */}
            <div className="flex gap-6 mt-6 items-center">
              {/* Github */}
              <a
                href="https://github.com/mernshihab"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-500 hover:text-green-600 dark:hover:text-purple-500 text-2xl transition-all duration-300 hover:scale-110"
              >
                <FaGithub />
              </a>

              {/* LinkedIn */}
              <a
                href="https://linkedin.com/in/mernshihab"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-500 hover:text-green-600 dark:hover:text-purple-500 text-2xl transition-all duration-300 hover:scale-110"
              >
                <FaLinkedin />
              </a>

              {/* Fiverr */}
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-500 hover:text-green-600 dark:hover:text-purple-500 text-4xl transition-all duration-300 hover:scale-110"
              >
                <SiFiverr />
              </a>

              {/* Facebook */}
              <a
                href="https://www.facebook.com/webshihab"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-500 hover:text-green-600 dark:hover:text-purple-500 text-2xl transition-all duration-300 hover:scale-110"
              >
                <FaFacebook />
              </a>

              {/* Instagram */}
              <a
                href="https://www.instagram.com/webshihab"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-500 hover:text-green-600 dark:hover:text-purple-500 text-2xl transition-all duration-300 hover:scale-110"
              >
                <FaInstagram />
              </a>
            </div>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 gap-4 mt-8">
              <div className="p-4 border border-green-200 dark:border-purple-900 rounded-lg bg-white dark:bg-gray-900/50 hover:shadow-md transition-shadow">
                <h3 className="font-bold text-2xl text-green-600 dark:text-purple-500">
                  {getExperienceYears()}+
                </h3>
                <p className="text-sm text-gray-500">Years Experience</p>
              </div>
              <div className="p-4 border border-green-200 dark:border-purple-900 rounded-lg bg-white dark:bg-gray-900/50 hover:shadow-md transition-shadow">
                <h3 className="font-bold text-2xl text-green-600 dark:text-purple-500">
                  20%
                </h3>
                <p className="text-sm text-gray-500">Performance Boost</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}