import type { Metadata } from "next";
import ProjectsSection from "@/components/ProjectsSection";
import Image from "next/image";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Home",
  description:
    "Welcome to my personal portfolio. I'm Mainasara Tsowa, a developer and cybersecurity expert passionate about building secure, elegant digital solutions.",
  openGraph: {
    title: "Home | Mainasara Tsowa",
    description:
      "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
    url: "https://mainasara.dev",
  },
  twitter: {
    title: "Home | Mainasara Tsowa",
    description:
      "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
  },
};

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-green-300">
              <Image
                src="/media/me/me.jpeg"
                alt="Mainasara Tsowa"
                className="rounded-full"
                width={128}
                height={128}
              />
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
            Mainasara Tsowa
          </h1>
          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
            Developer & Cybersecurity Expert working on secure, elegant digital
            solutions
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              {/*<li>
                <a
                  href="https://blog.mainasara.dev"
                  className="text-black font-bold hover:bg-slate-200 px-4 py-2 transition-colors border-2 border-black hover:border-slate-400"
                >
                  Blog
                </a>
              </li>*/}
              <li>
                <Link
                  href="/digital-art"
                  className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
                >
                  Mini Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
                >
                  Thoughts
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
                >
                  Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main className="space-y-16">
          <section
            id="about"
            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
              About
            </h2>
            <p className="text-gray-800 leading-relaxed text-center max-w-3xl mx-auto font-semibold">
              I&apos;m a passionate developer and cybersecurity expert who
              believes in building beautiful, secure, and purposeful digital
              solutions. When I&apos;m not coding or exploring security tooling,
              you&apos;ll probably find me trying my hands at some creative
              projects.
            </p>
          </section>

          <section
            id="expertise"
            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
              Expertise
            </h2>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="bg-green-100 border-2 border-black rounded-none p-6">
                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">
                  Development
                </h3>
                <ul className="space-y-2 text-gray-800">
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Full-Stack Applications
                  </li>
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Clean Architecture
                  </li>
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Performance Optimization
                  </li>
                </ul>
              </div>
              <div className="bg-teal-100 border-2 border-black rounded-none p-6">
                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">
                  Cybersecurity
                </h3>
                <ul className="space-y-2 text-gray-800">
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Security Tooling
                  </li>
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Penetration Testing
                  </li>
                  <li className="flex items-center">
                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
                    Security Architecture
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <ProjectsSection />

          <section
            id="writing"
            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
              Creative Corner
            </h2>
            <div className="grid md:grid-cols-3 gap-6">
              <Link
                href="/digital-art"
                className="bg-yellow-100 border-2 border-black rounded-none p-6 text-center hover:bg-yellow-200 transition-colors"
              >
                <div className="text-4xl mb-3">🎨</div>
                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
                  Digital Art
                </h3>
                <p className="text-gray-800 text-sm">
                  Someone messing around with colors and shapes.
                </p>
              </Link>
              <Link
                href="/stories"
                className="bg-green-100 border-2 border-black rounded-none p-6 text-center hover:bg-green-200 transition-colors"
              >
                <div className="text-4xl mb-3">📝</div>
                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
                  Mini Stories
                </h3>
                <p className="text-gray-800 text-sm">
                  I like good narratives, so I try to imitate them.
                </p>
              </Link>
              <Link
                href="/thoughts"
                className="bg-teal-100 border-2 border-black rounded-none p-6 text-center hover:bg-teal-200 transition-colors"
              >
                <div className="text-4xl mb-3">🌸</div>
                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
                  Thoughts
                </h3>
                <p className="text-gray-800 text-sm">
                  Rants on technology, maybe something else.
                </p>
              </Link>
            </div>
          </section>

          <section
            id="contact"
            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
          >
            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
              Get In Touch
            </h2>
            <div className="text-center">
              <p className="text-gray-800 mb-6 font-semibold">
                Let&apos;s collaborate on something interesting
              </p>
              <a
                href="mailto:tsowamainasara@gmail.com"
                className="inline-block bg-black text-white px-8 py-4 font-bold border-2 border-black hover:bg-white hover:text-black transition-colors"
              >
                SEND EMAIL
              </a>
            </div>
          </section>
        </main>

        <footer className="mt-20 text-center">
          <div className="flex justify-center space-x-6 mb-6">
            <a
              href="https://github.com/neutrino2211/"
              className="text-black font-bold hover:text-green-600 transition-colors"
            >
              <span className="sr-only">GitHub</span>
              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                <path
                  fillRule="evenodd"
                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                  clipRule="evenodd"
                />
              </svg>
            </a>
            <a
              href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
              className="text-black font-bold hover:text-teal-600 transition-colors"
            >
              <span className="sr-only">LinkedIn</span>
              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
              </svg>
            </a>
            <a
              href="https://x.com/neutrino2211/"
              className="text-black font-bold hover:text-blue-600 transition-colors"
            >
              <span className="sr-only">Twitter</span>
              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
              </svg>
            </a>
          </div>
          <div className="bg-black text-white p-4 font-bold">
            <p className="text-sm uppercase">
              Built with Charm Crush, Z.AI GLM and some pastel
            </p>
          </div>
        </footer>
      </div>
    </div>
  );
}