import { Button } from "../components/Button.tsx";
import { Content } from "../components/Content.tsx";
import { OL } from "../components/OL.tsx";

export default function Home() {
  return (
    <div class="container p-8">
      <Setup />
    </div>
  );
}

function Setup() {
  return (
    <Content>
      <h2 class="text-2xl font-pixel">First Time Setup</h2>
      <p>
        Looks like this is your first time running{" "}
        <span class="font-fixel">MC Grizz</span>
      </p>
      <p>There are just a few steps to get you up an running.</p>
      <OL color="bg-grape">
        <div>
          <p class="font-pixel text-lg">Select your loader</p>
          <p>Choose between Forge, Fabric, or Vanilla (support for Bukkit, Spigot, and others coming... soon...)</p>
        </div>
        <div>
          <p class="font-pixel text-lg">Accept EULA</p>
          <p>
            Mojang requires you to accept their{" "}
            <a
              class="text-sky"
              href="https://www.minecraft.net/en-us/eula"
              target="_blank"
            >
              EULA
            </a>{" "}
            (End-User License Agreement) in order to be able to run a server.
          </p>
        </div>
        <div>
          <p class="font-pixel text-lg">Select Mods and Datapacks</p>
          <p>
            We'll show you a selection of preconfigured modpacks, mods, and
            datapacks for you to choose for your server
          </p>
        </div>
        <div>
          <p class="font-pixel text-lg">Game On!</p>
          <p>
            Time to play! We'll finish setting everything up and give you the IP
            address for you and your friends to connect.
          </p>
        </div>
      </OL>
      <div className="w-full">
        <a href="/setup">
          <Button href="/setup" color="sky" class="ml-auto mt-8 block font-pixel text-lg">
            Get Started →
          </Button>
        </a>
      </div>
    </Content>
  );
}