"use client";

export function Goals() {
  return (
    <section className="w-full space-y-8">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
          My Goals
        </h2>
        <p className="text-gray-400 max-w-2xl mx-auto">Next 4 Years are going to look fun</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="p-6 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/5 backdrop-blur-sm border border-blue-500/20">
          <div className="flex items-start gap-4">
            <div className="p-3 rounded-lg bg-blue-500/20 text-3xl">🚀</div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">
                Not Just Semi-Fullstack
              </h3>
              <p className="text-gray-400 leading-relaxed">
                I want to work more with Serverless Architectures and Cloud
                Services to build scalable applications.
              </p>
            </div>
          </div>
        </div>

        <div className="p-6 rounded-2xl bg-gradient-to-br from-purple-500/10 to-pink-500/5 backdrop-blur-sm border border-purple-500/20">
          <div className="flex items-start gap-4">
            <div className="p-3 rounded-lg bg-purple-500/20 text-3xl">
              💻
            </div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">
                Contribute More to Open Source
              </h3>
              <p className="text-gray-400 leading-relaxed">
                I want to commit more to Open-Source Projects. That's it...
              </p>
            </div>
          </div>
        </div>

        <div className="p-6 rounded-2xl bg-gradient-to-br from-green-500/10 to-blue-500/5 backdrop-blur-sm border border-green-500/20">
          <div className="flex items-start gap-4">
            <div className="p-3 rounded-lg bg-green-500/20 text-3xl">
              ⚡
            </div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">
                Expand on Existing Projects
              </h3>
              <p className="text-gray-400 leading-relaxed">
                I want to make SHSF more stable and usable.
              </p>
            </div>
          </div>
        </div>

        <div className="p-6 rounded-2xl bg-gradient-to-br from-yellow-500/10 to-orange-500/5 backdrop-blur-sm border border-yellow-500/20">
          <div className="flex items-start gap-4">
            <div className="p-3 rounded-lg bg-yellow-500/20 text-3xl">
              🧪
            </div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">
                Testing before Breaking
              </h3>
              <p className="text-gray-400 leading-relaxed">In the future i want to write more tests and improve my code quality.</p>
            </div>
          </div>
        </div>

        <div className="md:col-span-2 p-6 rounded-2xl bg-gradient-to-br from-yellow-500/10 to-orange-500/5 backdrop-blur-sm border border-yellow-500/20">
          <div className="flex items-start gap-4">
            <div className="p-3 rounded-lg bg-yellow-500/20 text-3xl">
              🏠
            </div>
            <div>
              <h3 className="text-xl font-bold text-white mb-2">
                Embrace Self-Hosting
              </h3>
              <p className="text-gray-400 leading-relaxed">
                I want to learn more about self-hosting my own services and reduce reliance on cloud providers for personal projects.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
