import Card from "@/components/Card";

export default function Home() {
  return (
    <div className="flex flex-col h-screen text-white">
      <header className="bg-slate-600 p-4">
        <b>Kirill Siukhin</b>
      </header>

      <main className="m-4">
        <h1 className="text-4xl font-bold mb-3">_AboutMe</h1>
        <div className="text-lg mb-6">
          Hello there! My name is <b>Kirill Siukhin</b>, I am 17 years old front-end developer and musician from <b>Russia, Yekaterinburg</b>.<br />
          I like to make things.
        </div>

        <h1 className="text-4xl font-bold mb-3">_Projects</h1>
        <div className="flex flex-wrap mb-6 gap-3 justify-center sm:justify-start">
          <a href="https://git.misterkirill.com/misterkirill/website">
            <Card title="misterkirill.com" description="Website you are on right now" />
          </a>
          <a href="https://git.misterkirill.com/misterkirill">
            <Card title="git.misterkirill.com" description="My git repositories (Gitea)" />
          </a>
          <a href="https://git.misterkirill.com/misterkirill/Rhyme">
            <Card title="Rhyme" description="(in development) Free service for writing and saving notes, lyrics, poetry, etc..." />
          </a>
        </div>

        <h1 className="text-4xl font-bold mb-3">_Skills</h1>
        <div className="flex flex-wrap mb-6 gap-3 justify-center sm:justify-start">
          <a href="https://typescriptlang.org">
            <Card title="TypeScript" description="best thing ever" />
          </a>
          <a href="https://music.misterkirill.com">
            <Card title="Music making" description="I'm a newbie" />
          </a>
          <a href="https://lichess.org/@/misterkirill">
            <Card title="Chess (lichess.org)" description="~1700 elo" />
          </a>
        </div>

        <h1 className="text-4xl font-bold mb-3">_Contacts</h1>
        <div className="mb-6">
          Contact me on <a href="https://bsky.app/profile/misterkirill.bsky.social" className="hover:underline font-semibold">Bluesky</a>, <a href="https://t.me/misterkirill1" className="hover:underline font-semibold">Telegram</a> or email: <a href="mailto:kirillsiukhin@proton.me" className="hover:underline font-semibold">kirillsiukhin@proton.me</a>
        </div>
      </main>

      <footer className="text-center mt-auto bg-slate-600 p-6">
        <span>Thanks for visiting!</span>
        <div className="flex flex-wrap justify-center gap-x-4">
          <a href="https://bsky.app/profile/misterkirill.bsky.social" className="hover:underline font-semibold">Bluesky</a>
          <a href="https://t.me/misterkirill1" className="hover:underline font-semibold">Telegram</a>
          <a href="mailto:kirillsiukhin@proton.me" className="hover:underline font-semibold">kirillsiukhin@proton.me</a>
        </div>
      </footer>
    </div>
  );
}