import { ExpirationDate } from "@/components/expiration-date";
import { NolaGlitchClientOnly } from "@/components/nola-glitch";
import { Sosmed } from "@/components/sosmed";
import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
      <div className="mx-auto w-[480px]">
        <header className="text-center mb-12">
          <h1 className="font-bold text-xl md:text-3xl">
            Nomi Nonsense Workspace
          </h1>
        </header>
        <noscript>
          <Image
            className="mb-12 mx-auto"
            alt="Coral <3"
            src="https://media1.tenor.com/m/yMLvq5PeKUEAAAAd/coral-glasses.gif"
            width={200}
            height={200}
            unoptimized
          />
        </noscript>
        <NolaGlitchClientOnly />
        <Sosmed />
        <article className="space-y-6 leading-relaxed">
          <p>Welcome!</p>
          <p>
            This is Nomi Nonsense Workspace Domain, where some services and websites that are hosted on their own servers are on this budget domain.
          </p>
          <h2>About Me</h2>
            <p>
              I'm Nomi Nonsense (Nomi Nonsz or Nonszy whatever, some ppl know my real name). I write code and make sure the server doesn't catch on fire 🔥 lol. 
            </p>
            <p>
              I love building sick web apps with modern stacks (and trash) and also getting my hands dirty setting up servers, reverse proxies, and deployment flows. Into stuff like self-hosting, automating deployments, and integrating AI/LLM into web projects.
            </p>
            <p>
              Big fan of open-source stuff, CLI life, Arch 💅.
              I only into the indie game, either playing underrated gems or cooking up cursed mods just for fun.
            </p>
          {/* <h2 className="pb-4">Vision</h2>
            Become a versatile developer who brings together web technology, AI, and game development to create innovative, meaningful, and impactful digital experiences. I aspire to blend creativity and technical mastery to shape products that empower others and reflect my passion for independent, modern technology.
          <h2>Mission</h2>
          <ul className="space-y-4">
            <li>Gain a solid understanding of IT infrastructure, including how systems operate behind the scenes, how to independently manage servers, and how to ensure stability, security, and scalability throughout the development and deployment lifecycle.</li>
            <li>Develop self-hosted systems and applications, whether on local machines or remote environments, promoting digital independence, data ownership, and efficient resource control.</li>
            <li>Build the ability to design and develop web applications that are responsive, intuitive, fast, and visually compelling, with a strong focus on user experience and modern interface principles.</li>
            <li>Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.</li>
            <li>Create original indie games with unique concepts and artistic expression, combining compelling gameplay mechanics, visual design, and storytelling to deliver player emotions.</li>
          </ul> */}
          <Image
            className="mb-12 mx-auto"
            alt="Pat coral"
            src="https://media.tenor.com/jZkB6qUnOQUAAAAi/coral-glasses-dream-bbq-ena.gif"
            width={350}
            height={350}
            unoptimized
          />
        </article>
        <section className="my-8">
          <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</Link> ☁️</p>
        </section>
        <footer className="mt-20 text-center">
          <p>&copy; <span className="text-sm">2024-2025 Nomi Nonsense</span></p>
        </footer>
      </div>
    </main>
  );
}
