import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

// You can also import styles from another file
// if you prefer to keep your CSS seperate from your component
import { styles } from './about-styles';

import { styles as sharedStyles } from '../../styles/shared-styles'

import '@shoelace-style/shoelace/dist/components/card/card.js';

@customElement('app-about')
export class AppAbout extends LitElement {
  static styles = [
    sharedStyles,
    styles,
    css`

    #welcomeBar {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    #welcomeCard,
    #infoCard {
      padding: 18px;
      padding-top: 0px;
    }

    sl-card::part(footer) {
      display: flex;
      justify-content: flex-end;
    }

    @media(min-width: 750px) {
      sl-card {
        width: 70vw;
      }
    }
    `
  ]

  render() {
    return html`
      <app-header ?enableBack="${true}"></app-header>

      <main><div id="welcomeBar">
        <h2>About Page</h2>

<sl-card id="welcomeCard">
          <h2>Did you know?</h2>

          <p>PWAs have access to many useful APIs in modern browsers! These
            APIs have enabled many new types of apps that can be built as PWAs, such as advanced graphics editing apps, games,
            apps that use machine learning and more!
          </p>

          <p>Check out <a
              href="https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files">these
              docs</a> to learn more about the advanced features that you can use in your PWA</p>
<hr>
            <h2>Technology Used</h2>

            <ul>
              <li>
                <a href="https://www.npmjs.com/package/nostr-tools?activeTab=dependencies">Nostr Tools</a>
              </li>

              <li>
                <a href="https://lit.dev">Web Components</a>
              </li>

              <li>
                <a href="https://github.com/hoytech/strfry"
                  >Strfry</a>
              </li>
            </ul>
          </sl-card></div>
      </main>
    `;
  }
}
