import { html, LitElement, type TemplateResult } from 'lit'

export class SettingsAboutPage extends LitElement {
  protected override createRenderRoot() {
    return this
  }

  override render(): TemplateResult {
    return html`
      <section>
        <h2>MapsApp</h2>
        <p>
          An offline-first map PWA. Browse detailed street maps and natural features
          without an internet connection once tiles are downloaded.
        </p>
        <ui-pwa-version></ui-pwa-version>
      </section>

      <section>
        <h2>Map Data</h2>
        <p>
          MapsApp overview tiles are derived from
          <a
            href="https://www.naturalearthdata.com"
            rel="noopener noreferrer"
            target="_blank"
          >Natural Earth</a>. Regional tiles are built from
          <a
            href="https://www.openstreetmap.org"
            rel="noopener noreferrer"
            target="_blank"
          >OpenStreetMap</a>
          data via
          <a
            href="https://download.geofabrik.de"
            rel="noopener noreferrer"
            target="_blank"
          >Geofabrik</a>.
        </p>
      </section>

      <section>
        <h2>Technology</h2>
        <p>
          Built with
          <a href="https://maplibre.org" rel="noopener noreferrer" target="_blank">
            MapLibre GL JS
          </a>,
          <a
            href="https://protomaps.com/docs/pmtiles"
            rel="noopener noreferrer"
            target="_blank"
          >
            PMTiles</a>, and
          <a
            href="https://github.com/jtbaker/pmtiles-offline"
            rel="noopener noreferrer"
            target="_blank"
          >
            pmtiles-offline</a>
          for offline tile storage. Rendered as a PWA using
          <a
            href="https://github.com/bpev/civility"
            rel="noopener noreferrer"
            target="_blank"
          >
            Civility
          </a>.
        </p>
      </section>
      <section>
        <h2>Icons</h2>
        <p>
          We make a lot of use from <a href=https://feathericons.com">Feather Icons</a>
        </p>
      </section>

      <section style="text-align: center; padding-top: var(--s4);">
        <p>
          <a
            href="https://apps.bpev.me"
            rel="noopener noreferrer"
            target="_blank"
            style="font-size: var(--f3)"
          >Made by Ben</a>
        </p>

        <a href="https://ko-fi.com/O5O21ETSMZ" target="_blank">
          <img
            height="36"
            style="border:0px;height:36px;"
            src="https://storage.ko-fi.com/cdn/kofi5.png?v=6"
            border="0"
            alt="Buy Me a Coffee at ko-fi.com"
          ></a>
      </section>
    `
  }
}

customElements.define('r-settings-about', SettingsAboutPage)
