import { getI18n } from "@/lib/i18n";
import { Header, Footer } from "@/components/Shell";
import Link from "next/link";
export default async function About() {
  const { t } = await getI18n();
  return (
    <>
      <Header />
      <main className="section page-content prose">
        <span className="eyebrow">{t("THE EXPLORER’S FIELD GUIDE")}</span>
        <h1>
          {t("You know this place.")}
          <br />
          <span className="green">{t("Probably.")}</span>
        </h1>
        <p className="lead">
          {t(
            "MineGeo drops you into a panorama from a community Minecraft world. Find out where you are before the clock runs out.",
          )}
        </p>
        <h2>{t("Look for the little things")}</h2>
        <p>
          {t(
            "Drag to look around. Mountains, shorelines, roofs, and landmarks all help. You stay in one place throughout a round.",
          )}
        </p>
        <h2>{t("Make your guess")}</h2>
        <p>
          {t(
            "Expand the map in the bottom-right corner and click to place a pin. North is up, X increases east, and Z increases south. Move your pin until you’re ready, then submit.",
          )}
        </p>
        <h2>{t("Five chances to find your way")}</h2>
        <p>
          {t(
            "Easy gives you 180 seconds, Normal 90, and Hard 30. Hard disables zoom. A timed-out round scores zero; you can still finish the expedition.",
          )}
        </p>
        <h2>{t("Closer means better")}</h2>
        <p>
          {t(
            "Each round awards up to 5,000 points based on horizontal distance. A guess within one block earns a perfect score. Compare all five guesses at the end.",
          )}
        </p>
        <Link href="/servers" className="button primary">
          {t("Let’s find a world →")}
        </Link>
      </main>
      <Footer />
    </>
  );
}