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

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`

    `
  ]

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

      <main><div id="welcomeBar">
        <h2>Frequently Asked Questions</h2>

<sl-card id="welcomeCard">
          <h3>What am I looking at?</h3>

          <p>
          This is a personal micro-social media client that can be installed to
          your desktop or smartphone home screen. You can sign in via an extension
          to display your profile data and notes from preprogrammed relays. You
          can compose a letter to me using a rich text editor I built with Prosemirror.
          </p>



          <h3>How do I install this on my home screen?</h3>
          <p>Look for "Add to Home Screen" in your browser toolbar and
          to save it to your homescreen. </p>

           <h3>What is Nostr?</h3>
          <p>Notes and Other Stuff Transmitted Over Relays is a simple open source
          social media protocol that enables anybody to implement social media functionalities
          into their websites.</p>

          <hr>
            <h2>Technology Used</h2>

            <ul>
              <li>
                I am using <a href="https://www.npmjs.com/package/nostr-tools?activeTab=dependencies">Nostr Tools</a> to implement an extension
              sign in and pull notes from my personal relay.
              </li>

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

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