import React from "react";
import MonkeySprite from "../components/MonkeySprite.js";
import "../App.css";

function Credits() {
  return (
    <div
      style={{
        minHeight: "100vh",
        paddingTop: "53px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
        gap: "0",
      }}
    >
      <div style={{ marginTop: "-20px" }}>
        <MonkeySprite animation="idle" />
      </div>

      <div
        style={{
          textAlign: "center",
          padding: "0 20px",
          marginTop: "-70px",
        }}
      >
        <h1 style={{ fontSize: "3em", marginBottom: "40px" }}>Credits</h1>

        <div style={{ display: "flex", flexDirection: "column", gap: "24px", alignItems: "center" }}>
          <p style={{ margin: 0, fontSize: "1.1em", color: "#ccc", lineHeight: "1.8" }}>
            Made with love &lt;3 by{" "}
            <a
              href="https://oelbaytam.github.io"
              target="_blank"
              rel="noreferrer"
              style={{ color: "#f0f0f0" }}
            >
              OmarEpic
            </a>{" "}
            &amp;{" "}
            <a
              href="https://sistav.com"
              target="_blank"
              rel="noreferrer"
              style={{ color: "#f0f0f0" }}
            >
              Sistav
            </a>
          </p>

          <p style={{ margin: 0, fontSize: "1.1em", color: "#ccc", lineHeight: "1.8" }}>
            Amazing monkey sprites made by{" "}
            <a
              href="https://gtibo.itch.io/monkey-sprite"
              target="_blank"
              rel="noreferrer"
              style={{ color: "#f0f0f0" }}
            >
              Tibo
            </a>
          </p>

          <p style={{ margin: 0, fontSize: "1.1em", color: "#ccc", lineHeight: "1.8" }}>
            Typewriter image by{" "}
            <a
              href="https://commons.wikimedia.org/wiki/File:Olympia_typewriter_model_8_mechanism.jpg"
              target="_blank"
              rel="noreferrer"
              style={{ color: "#f0f0f0" }}
            >
              Miloš Jurišić
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}

export default Credits;
