import Link from "next/link";

export const metadata = {
  title: "ZXDB Explorer",
};

export const revalidate = 3600;

export default async function Page() {
  return (
    <div>
      <h1 className="mb-3">ZXDB Explorer</h1>
      <p className="text-secondary">Choose what you want to explore.</p>

      <div className="row g-3">
        <div className="col-sm-6 col-lg-4">
          <Link href="/zxdb/entries" className="text-decoration-none">
            <div className="card h-100 shadow-sm">
              <div className="card-body d-flex align-items-center">
                <div className="me-3" aria-hidden>
                  <span className="bi bi-collection" style={{ fontSize: 28 }} />
                </div>
                <div>
                  <h5 className="card-title mb-1">Entries</h5>
                  <div className="card-text text-secondary">Browse software entries with filters</div>
                </div>
              </div>
            </div>
          </Link>
        </div>

        <div className="col-sm-6 col-lg-4">
          <Link href="/zxdb/releases" className="text-decoration-none">
            <div className="card h-100 shadow-sm">
              <div className="card-body d-flex align-items-center">
                <div className="me-3" aria-hidden>
                  <span className="bi bi-box-arrow-down" style={{ fontSize: 28 }} />
                </div>
                <div>
                  <h5 className="card-title mb-1">Releases</h5>
                  <div className="card-text text-secondary">Drill into releases and downloads</div>
                </div>
              </div>
            </div>
          </Link>
        </div>

        <div className="col-sm-6 col-lg-4">
          <Link href="/zxdb/magazines" className="text-decoration-none">
            <div className="card h-100 shadow-sm">
              <div className="card-body d-flex align-items-center">
                <div className="me-3" aria-hidden>
                  <span className="bi bi-journal-text" style={{ fontSize: 28 }} />
                </div>
                <div>
                  <h5 className="card-title mb-1">Magazines</h5>
                  <div className="card-text text-secondary">Browse magazines and their issues</div>
                </div>
              </div>
            </div>
          </Link>
        </div>
      </div>

      <div className="mt-4">
        <h2 className="h5 mb-2">Categories</h2>
        <div className="d-flex flex-wrap gap-2">
          <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/genres">Genres</Link>
          <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/languages">Languages</Link>
          <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/machinetypes">Machine Types</Link>
          <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">Labels</Link>
        </div>
      </div>
    </div>
  );
}