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:
    "Security Researcher & Full-Stack Developer with expertise in penetration testing, security tooling, and building secure applications with Next.js.",
  openGraph: {
    title: "Mainasara Tsowa | Security Researcher",
    description:
      "Security Researcher & Full-Stack Developer specializing in offensive security, OSINT, and secure application development.",
    url: "https://mainasara.dev",
  },
  twitter: {
    title: "Mainasara Tsowa | Security Researcher",
    description:
      "Security Researcher & Full-Stack Developer specializing in offensive security, OSINT, and secure application development.",
  },
};

export default function Home() {
  return (
    <div className="min-h-screen bg-[#0a0a0a] font-mono relative grid-overlay">
      {/* Scanline overlay */}
      <div className="fixed inset-0 pointer-events-none z-50 opacity-30">
        <div className="w-full h-full bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.3)_2px,rgba(0,0,0,0.3)_4px)]" />
      </div>

      <div className="max-w-5xl mx-auto px-6 py-8 relative z-10">
        {/* Header */}
        <header className="mb-12">
          <div className="flex flex-col md:flex-row items-center gap-8 mb-8">
            {/* Profile Image - Clean, no terminal effect */}
            <div className="relative">
              <div className="w-36 h-36 overflow-hidden border-2 border-[#00ff41] box-glow-green">
                <Image
                  src="/media/me/me.jpeg"
                  alt="Mainasara Tsowa"
                  className="w-full h-full object-cover"
                  width={144}
                  height={144}
                />
              </div>
              <div className="absolute -bottom-2 -right-2 status-online" />
            </div>

            {/* Info */}
            <div className="text-center md:text-left flex-1">
              <div className="text-[#00ff4180] text-sm mb-2">
                $ whoami
              </div>
              <h1 className="text-3xl md:text-4xl font-bold text-[#00ff41] glow-green mb-2 text-glitch">
                MAINASARA TSOWA
              </h1>
              <div className="text-[#00d4ff] text-lg mb-4">
                <span className="text-[#ff00ff]">&gt;</span> Security Researcher{" "}
                <span className="text-[#00ff4160]">|</span> Full-Stack Developer
              </div>
              <p className="text-[#00ff4180] max-w-lg leading-relaxed text-sm">
                <span className="text-[#00d4ff]">/*</span> Building secure systems and breaking insecure ones.
                Specialized in offensive security, OSINT frameworks, and Next.js applications.{" "}
                <span className="text-[#00d4ff]">*/</span>
              </p>
            </div>
          </div>

          {/* Quick Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="hacker-card p-4 text-center">
              <div className="text-[#00d4ff] text-2xl font-bold">5+</div>
              <div className="text-[#00ff4160] text-xs uppercase">Years Exp</div>
            </div>
            <div className="hacker-card p-4 text-center">
              <div className="text-[#ff00ff] text-2xl font-bold">Next.js</div>
              <div className="text-[#00ff4160] text-xs uppercase">Specialist</div>
            </div>
            <div className="hacker-card p-4 text-center">
              <div className="text-[#ffff00] text-2xl font-bold">OSINT</div>
              <div className="text-[#00ff4160] text-xs uppercase">Tools</div>
            </div>
            <div className="hacker-card p-4 text-center">
              <div className="text-[#00ff41] text-2xl font-bold">Pentest</div>
              <div className="text-[#00ff4160] text-xs uppercase">Security</div>
            </div>
          </div>
        </header>

        {/* Social Links Bar */}
        <nav className="mb-12 fade-in fade-in-delay-1">
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href="https://github.com/neutrino2211"
              target="_blank"
              rel="noopener noreferrer"
              className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
            >
              <svg className="w-5 h-5" 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>
              GitHub
            </a>
            <a
              href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
              target="_blank"
              rel="noopener noreferrer"
              className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
            >
              <svg className="w-5 h-5" 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>
              LinkedIn
            </a>
            <a
              href="https://x.com/neutrino2211"
              target="_blank"
              rel="noopener noreferrer"
              className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm"
            >
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
              </svg>
              @neutrino2211
            </a>
            <a
              href="mailto:tsowamainasara@gmail.com"
              className="hacker-btn px-6 py-3 flex items-center gap-2 text-sm border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff15]"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              Contact
            </a>
          </div>
        </nav>

        {/* Navigation - Zen World */}
        <nav className="mb-12 fade-in fade-in-delay-2">
          <div className="terminal-window p-4">
            <div className="text-[#00ff4180] text-xs mb-1">$ cd ~/zen/</div>
            <div className="text-[#00ff41cc] text-sm mb-4 text-center">
              <span className="text-[#00d4ff]">//</span> Enter my zen world <span className="text-[#00d4ff]">//</span>
            </div>
            <ul className="flex flex-wrap justify-center gap-3">
              <li>
                <Link
                  href="/digital-art"
                  className="zen-btn px-4 py-2 text-sm border border-[#ff00ff] text-[#ff00ff] hover:bg-[#ff00ff20] hover:shadow-[0_0_15px_#ff00ff40]"
                >
                  digital-art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="zen-btn px-4 py-2 text-sm border border-[#ffff00] text-[#ffff00] hover:bg-[#ffff0020] hover:shadow-[0_0_15px_#ffff0040]"
                >
                  stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="zen-btn px-4 py-2 text-sm border border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff20] hover:shadow-[0_0_15px_#00d4ff40]"
                >
                  thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main className="space-y-12">
          {/* About Section */}
          <section className="fade-in fade-in-delay-3">
            <div className="terminal-window overflow-hidden">
              <div className="terminal-header px-4 py-2 flex items-center gap-2">
                <span className="text-[#00ff41] text-sm opacity-60">about.sh</span>
              </div>
              <div className="p-6">
                <div className="text-[#00ff4160] text-sm mb-4">
                  $ cat /home/mainasara/about.txt
                </div>
                <div className="space-y-4 text-[#00ff41cc]">
                  <p className="leading-relaxed">
                    <span className="text-[#00d4ff]">[*]</span> Security researcher with a passion for
                    breaking things to understand how they work. I build tools that help security
                    professionals work more efficiently.
                  </p>
                  <p className="leading-relaxed">
                    <span className="text-[#ff00ff]">[*]</span> Full-stack developer specializing in
                    Next.js and React ecosystems. I believe secure code is the foundation of
                    every great application.
                  </p>
                  <p className="leading-relaxed">
                    <span className="text-[#ffff00]">[*]</span> When not hunting vulnerabilities or
                    writing code, I explore creative outlets through digital art and fiction writing.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Skills Section */}
          <section className="fade-in fade-in-delay-4">
            <div className="terminal-window overflow-hidden">
              <div className="terminal-header px-4 py-2 flex items-center gap-2">
                <span className="text-[#00ff41] text-sm opacity-60">skills.json</span>
              </div>
              <div className="p-6">
                <div className="text-[#00ff4160] text-sm mb-4">
                  $ cat /etc/skills.json | jq
                </div>
                <div className="grid md:grid-cols-2 gap-6">
                  {/* Security Skills */}
                  <div className="hacker-card p-5">
                    <h3 className="text-[#ff3333] font-bold mb-4 flex items-center gap-2">
                      <span className="text-lg">{"{"}</span>
                      <span>&quot;security&quot;</span>
                      <span className="text-lg">:</span>
                    </h3>
                    <ul className="space-y-2 text-sm ml-4">
                      <li className="flex items-center gap-2">
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Penetration Testing</span>
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">OSINT & Reconnaissance</span>
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Security Architecture</span>
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Vulnerability Research</span>
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#00d4ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Security Tooling</span>
                        <span className="text-[#00d4ff]">&quot;</span>
                      </li>
                    </ul>
                    <div className="text-[#ff3333] font-bold mt-2">{"}"}</div>
                  </div>

                  {/* Development Skills */}
                  <div className="hacker-card p-5">
                    <h3 className="text-[#00d4ff] font-bold mb-4 flex items-center gap-2">
                      <span className="text-lg">{"{"}</span>
                      <span>&quot;development&quot;</span>
                      <span className="text-lg">:</span>
                    </h3>
                    <ul className="space-y-2 text-sm ml-4">
                      <li className="flex items-center gap-2">
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Next.js / React</span>
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">TypeScript / Node.js</span>
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Python / Go</span>
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">API Design & Integration</span>
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff4160]">,</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <span className="text-[#ff00ff]">&quot;</span>
                        <span className="text-[#00ff41cc]">Cloud & DevOps</span>
                        <span className="text-[#ff00ff]">&quot;</span>
                      </li>
                    </ul>
                    <div className="text-[#00d4ff] font-bold mt-2">{"}"}</div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Projects Section */}
          <ProjectsSection />

          {/* Creative Corner */}
          <section className="fade-in fade-in-delay-5">
            <div className="terminal-window overflow-hidden">
              <div className="terminal-header px-4 py-2 flex items-center gap-2">
                <span className="text-[#00ff41] text-sm opacity-60">creative.exe</span>
              </div>
              <div className="p-6">
                <div className="text-[#00ff4160] text-sm mb-4">
                  $ ./creative --list
                </div>
                <div className="grid md:grid-cols-3 gap-4">
                  <Link
                    href="/digital-art"
                    className="hacker-card p-6 text-center group"
                  >
                    <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
                      <span className="text-[#ff00ff]">[</span>
                      <span className="text-[#00ff41]">ART</span>
                      <span className="text-[#ff00ff]">]</span>
                    </div>
                    <h3 className="text-[#ff00ff] font-bold mb-2">Digital Art</h3>
                    <p className="text-[#00ff4160] text-xs">
                      Experimental visuals and creative explorations
                    </p>
                  </Link>
                  <Link
                    href="/stories"
                    className="hacker-card p-6 text-center group"
                  >
                    <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
                      <span className="text-[#ffff00]">[</span>
                      <span className="text-[#00ff41]">TXT</span>
                      <span className="text-[#ffff00]">]</span>
                    </div>
                    <h3 className="text-[#ffff00] font-bold mb-2">Mini Stories</h3>
                    <p className="text-[#00ff4160] text-xs">
                      Short fiction and narrative experiments
                    </p>
                  </Link>
                  <Link
                    href="/thoughts"
                    className="hacker-card p-6 text-center group"
                  >
                    <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">
                      <span className="text-[#00d4ff]">[</span>
                      <span className="text-[#00ff41]">LOG</span>
                      <span className="text-[#00d4ff]">]</span>
                    </div>
                    <h3 className="text-[#00d4ff] font-bold mb-2">Thoughts</h3>
                    <p className="text-[#00ff4160] text-xs">
                      Reflections on tech, security, and life
                    </p>
                  </Link>
                </div>
              </div>
            </div>
          </section>

          {/* Contact Section */}
          <section>
            <div className="terminal-window overflow-hidden">
              <div className="terminal-header px-4 py-2 flex items-center gap-2">
                <span className="text-[#00ff41] text-sm opacity-60">contact.sh</span>
              </div>
              <div className="p-6 text-center">
                <div className="text-[#00ff4160] text-sm mb-6">
                  $ echo &quot;Let&apos;s connect&quot;
                </div>
                <div className="mb-6">
                  <p className="text-[#00ff41cc] mb-2">
                    Available for security consulting, development projects, and interesting collaborations.
                  </p>
                  <p className="text-[#00ff4160] text-sm">
                    Response time: &lt; 24h
                  </p>
                </div>
                <div className="flex flex-wrap justify-center gap-4">
                  <a
                    href="mailto:tsowamainasara@gmail.com"
                    className="hacker-btn px-8 py-4 font-bold text-lg"
                  >
                    <span className="text-[#00ff4160] mr-2">$</span>
                    SEND_MESSAGE
                  </a>
                  <a
                    href="https://github.com/neutrino2211"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hacker-btn px-8 py-4 font-bold text-lg border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff15]"
                  >
                    <span className="text-[#00d4ff80] mr-2">$</span>
                    VIEW_CODE
                  </a>
                </div>
              </div>
            </div>
          </section>
        </main>

        {/* Footer */}
        <footer className="mt-16 text-center">
          <div className="terminal-window p-6">
            <div className="flex justify-center gap-6 mb-6">
              <a
                href="https://github.com/neutrino2211"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#00ff4180] hover:text-[#00ff41] transition-colors"
              >
                <svg className="w-6 h-6" 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/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#00ff4180] hover:text-[#00d4ff] transition-colors"
              >
                <svg className="w-6 h-6" 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"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#00ff4180] hover:text-[#ff00ff] transition-colors"
              >
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                </svg>
              </a>
            </div>
            <div className="text-[#00ff4140] text-xs">
              <span className="text-[#00ff4160]">/*</span> Built with Next.js |{" "}
              <span className="text-[#00d4ff80]">mainasara.dev</span> |{" "}
              {new Date().getFullYear()}{" "}
              <span className="text-[#00ff4160]">*/</span>
            </div>
            <div className="mt-2 text-[#00ff4130] text-xs font-mono">
              root@mainasara:~# <span className="cursor-blink"></span>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}
