import Link from "next/link";
import { Collection, BoxArrowDown, JournalText, People } from "react-bootstrap-icons";
import TapeIdentifier from "./TapeIdentifier";

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

export const revalidate = 3600;

export default async function Page() {
  return (
      <div className="d-flex flex-column gap-4">
        <section
            className="rounded-4 p-4 p-lg-5 shadow-sm"
            style={{
              background: "linear-gradient(135deg, rgba(13,110,253,0.08), rgba(25,135,84,0.08))",
            }}
        >
          <div className="row align-items-center g-4">
            <div className="col-lg-7">
              <div className="d-flex align-items-center gap-2 mb-3">
                <span className="badge bg-dark">ZXDB</span>
                <span className="badge bg-secondary">Explorer</span>
              </div>
              <h1 className="display-6 mb-3">ZXDB Explorer</h1>
              <p className="lead text-secondary mb-4">
                Trace Spectrum-era software across entries, releases, magazines, and labels with deep links and fast filters.
              </p>
              <div className="d-flex flex-wrap gap-2">
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/entries">Browse entries</Link>
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/releases">Latest releases</Link>
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">Magazine issues</Link>
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">People &amp; labels</Link>
              </div>
            </div>
            <div className="col-lg-5">
              <div className="card border-0 shadow-sm">
                <div className="card-body">
                  <h5 className="card-title mb-3">Jump straight in</h5>
                  <form method="get" action="/zxdb/entries" className="d-flex flex-column gap-2">
                    <div>
                      <label className="form-label small text-secondary">Search entries</label>
                      <input className="form-control" name="q" placeholder="Try: manic, doom, renegade..." />
                    </div>
                    <div>
                      <label className="form-label small text-secondary">Scope</label>
                      <select className="form-select" name="scope" defaultValue="title">
                        <option value="title">Titles</option>
                        <option value="title_aliases">Titles + Aliases</option>
                        <option value="title_aliases_origins">Titles + Aliases + Origins</option>
                      </select>
                    </div>
                    <button className="btn btn-primary" type="submit">Search</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="row g-3">
            <div className="col-lg-8">
              <TapeIdentifier />
            </div>
            <div className="col-lg-4 d-flex align-items-center">
              <p className="text-secondary small mb-0">
                Drop a <code>.tap</code>, <code>.tzx</code>, or other tape file to identify it against 32,000+ ZXDB entries.
                The file stays in your browser &mdash; only its hash is sent.
              </p>
            </div>
          </div>
        </section>

        <section>
          <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
            <h2 className="h4 mb-0">Start exploring</h2>
            <span className="text-secondary small">Pick a path to dive deeper</span>
          </div>
          <div className="row g-3">
            <div className="col-sm-6 col-lg-3">
              <Link href="/zxdb/entries" className="text-decoration-none">
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
                      <Collection size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Entries</h5>
                        <p className="card-text text-secondary">Search + filter titles</p>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-sm-6 col-lg-3">
              <Link href="/zxdb/releases" className="text-decoration-none">
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
                      <BoxArrowDown size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Releases</h5>
                        <p className="card-text text-secondary">Downloads + media</p>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-sm-6 col-lg-3">
              <Link href="/zxdb/magazines" className="text-decoration-none">
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
                      <JournalText size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Magazines</h5>
                        <p className="card-text text-secondary">Issues + references</p>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-sm-6 col-lg-3">
              <Link href="/zxdb/labels" className="text-decoration-none">
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
                      <People size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Labels</h5>
                        <p className="card-text text-secondary">People + publishers</p>
                      </div>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </section>

        <section>
          <div className="row g-3">
            <div className="col-lg-7">
              <div className="card h-100 shadow-sm">
                <div className="card-body">
                  <h3 className="h5">Explore by category</h3>
                  <p className="text-secondary mb-3">Jump to curated lists and filter results from there.</p>
                  <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>
            </div>
            <div className="col-lg-5">
              <div className="card h-100 shadow-sm">
                <div className="card-body">
                  <h3 className="h5">How to use this</h3>
                  <ol className="mb-0 text-secondary small">
                    <li>Search by title or aliases in Entries.</li>
                    <li>Open a release to see downloads, scraps, and places.</li>
                    <li>Use magazines to find original reviews and references.</li>
                    <li>Follow labels to discover related work.</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
  );
}
