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 micro-nostr client that can be installed to your desktop or smartphone
          home screen. Something like this can be used as an alternative to big tech
          platforms that exploit your data. It pulls my profile data and notes from one
          of the relays I run.
          </p>

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

          <h3>How can I install this on my home screen?</h3>
          <p>If you are on a PC browser, check for a download buttom inside the URL box
          flushed against the right side. Click on it </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>
    `;
  }
}
