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="Spining ENA <3"
            src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
            width={200}
            height={200}
            unoptimized
          />
        </noscript>
        <NolaGlitchClientOnly />
        <Sosmed />
        <article className="space-y-6 leading-relaxed">
          <p>What? what are you expecting specifically on this base page?</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>
          <p>This domain will active until <ExpirationDate /></p>
        </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>
  );
}