import { BorderedBox } from "~/components/bordered-box";
import { FrostedBox } from "~/components/frosted-box";
import Header from "~/components/header";
import { CgolCanvas } from "~/components/cgol-canvas";
import Jet from "~/assets/Jet.txt?ansi";

export default function App() {
  return (
    <>
      <CgolCanvas />
      <main>
        <div className="flex flex-col items-center justify-start px-4">
          <FrostedBox className="my-[2ch] w-full max-w-[66.666667%] min-w-fit md:mt-[4ch]">
            <div className="flex flex-col items-center justify-center gap-[2ch] md:flex-row">
              <div className="order-1 flex flex-col items-center md:order-2">
                <Header content={Jet} />
                <div className="mt-[2ch]">Software Extremist</div>
              </div>
              <div className="order-2 shrink-0 md:order-1">
                <img
                  src="/jet.svg"
                  alt="Jet"
                  width={250}
                  height={250}
                  className="aspect-square w-full max-w-[250px] object-cover md:h-[263px] md:w-[175px] md:max-w-none"
                />
              </div>
            </div>
            <BorderedBox label="Contact" className="mt-[2ch]">
              <a href="mailto:jet@extremist.software">
                jet@extremist.software
              </a>
            </BorderedBox>
            <BorderedBox label="Links">
              <ol>
                <li>
                  <a
                    href="https://git.extremist.software"
                    className="inline-flex items-center"
                  >
                    Forgejo
                  </a>
                </li>
                <li>
                  <a
                    href="https://github.com/jetpham"
                    className="inline-flex items-center"
                  >
                    GitHub
                  </a>
                </li>
                <li>
                  <a
                    href="https://x.com/jetpham5"
                    className="inline-flex items-center"
                  >
                    X
                  </a>
                </li>
                <li>
                  <a
                    href="https://bsky.app/profile/jetpham.com"
                    className="inline-flex items-center"
                  >
                    Bluesky
                  </a>
                </li>
              </ol>
            </BorderedBox>
          </FrostedBox>
        </div>
      </main>
    </>
  );
}
