<script>
    import TalkingPointContainer from "../components/TalkingPointContainer.svelte";
    import TalkingPointContent from "../components/TalkingPointContent.svelte";
    import TalkingPointName from "../components/TalkingPointName.svelte";
  </script>
  
  <svelte:head>
    <title>FemtoStar - Donate</title>
  </svelte:head>
  
  <div class="site">
    <TalkingPointContainer>
      <TalkingPointName text="Donations" />
      <TalkingPointContent>
        <p>
            The FemtoStar Project is a community of volunteers funded by a grant from our partner NLnet,
            out-of-pocket by some of our members, and from donations by our community. Nobody is required
            to donate, and we currently don't have much in terms of perks for donors, but if you'd like to see
            this project succeed and are able to, consider throwing a few dollars our way or setting up
            a recurring donation through Liberapay.
        </p>
        <p>
            Donations go directly into buying hardware for the project. All of our members are volunteers, and our
            operating costs apart from hardware are low enough to cover out of pocket. Everything donated here will
            be spent on hardware to make this project possible.
        </p>
      </TalkingPointContent>
    </TalkingPointContainer>

    <TalkingPointContainer>
        <TalkingPointName text="Donate via PayPal" />
        <TalkingPointContent>
            <p>
                Via PayPal, we accept both one-time donations directly via PayPal, and recurring donations via Liberapay
                (processed using PayPal).
            </p>
            <p>
                <b>PayPal (one-time donation):</b> <a href="https://www.paypal.com/donate/?hosted_button_id=M2N5N2B624CNQ&source=url">Click Here</a>
            </p>
            <p>
                <b>Liberapay (recurring donation):</b> <a href="https://liberapay.com/FemtoStar/donate">Click Here</a>
            </p>
      </TalkingPointContent>
    </TalkingPointContainer>

    <TalkingPointContainer>
        <TalkingPointName text="Donate Cryptocurrency" />
        <TalkingPointContent>
            <p>
                If you would like to make a donation in cryptocurrency, please send any amount of Bitcoin or Monero to
                one of the following addresses.
            </p>
            <p>
                <b>Bitcoin:</b> <span class="crypto-address">bc1qnytm8arpuz247622yef070nvxx56qp6dqwl80s</span>
            </p>
            <p>
                <b>Monero:</b> <span class="crypto-address">83YcY9dsxARYkS4AaKVNkEJTLMQnuvuzSSij9vC7SqU7eriCpHHBsrs2ijKE6MQjobUShY4D2kjQTZ3XXp7WMtR7PdjKrx9</span>
            </p>
        </TalkingPointContent>
    </TalkingPointContainer>
  
    <TalkingPointContainer>
      <TalkingPointName text="Want to donate another way?" />
      <TalkingPointContent>
        <p>
          If you would like to donate via a method not listed above (such as via
          a different payment processor or in a different cryptocurrency), please
          <a href="about-contact/">contact us</a> and we'd be glad to help set something up.
        </p>
      </TalkingPointContent>
    </TalkingPointContainer>
  </div>
  
  <style>
    .site {
      margin-left: auto;
      margin-right: auto;
      padding-top: 0;
      padding-bottom: 3em;
      max-width: 1024px;
      padding-left: 2em;
      padding-right: 2em;
    }
  
    .c{
      overflow: hidden;
      height: 0px;
      width: 0px;
      position: absolute;
    }
    .j{
      overflow: hidden;
      height: 0px;
      width: 0px;
      position: absolute;
    }

    .crypto-address{
        overflow-wrap: break-word;
        word-break: break-all;
    }

    talkingPointContainer{
        overflow-wrap: normal;
    }
  
    :global(.site a) {
      color: #72bbd9;
    }
  </style>
  