<script>
  import { numberOfUnreadNotification, screenWidth } from "$lib/store";
  import ArrowLogo from "lucide-svelte/icons/move-up-right";

  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
</script>

<svelte:head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>
    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Become
    a sponsor to stocknear
  </title>
  <meta
    name="description"
    content={`Your donation helps us to become the number 1 stock analysis platform in the world with the best price plans.`}
  />

  <!-- Other meta tags -->
  <meta property="og:title" content={`sponsor · Stocknear`} />
  <meta
    property="og:description"
    content={`Your sponsor helps us to become the number 1 stock analysis platform in the world with the best price plans.`}
  />
  <meta property="og:type" content="website" />
  <!-- Add more Open Graph meta tags as needed -->

  <!-- Twitter specific meta tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={`sponsor · Stocknear`} />
  <meta
    name="twitter:description"
    content={`Your sponsor helps us to become the number 1 stock analysis platform in the world with the best price plans.`}
  />
  <!-- Add more Twitter meta tags as needed -->
</svelte:head>

<section
  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
>
  <div class="text-sm sm:text-[1rem] breadcrumbs">
    <ul>
      <li><a href="/" class="text-gray-300">Home</a></li>
      <li class="text-gray-300">Sponsor</li>
    </ul>
  </div>

  <div class="w-full overflow-hidden m-auto mt-5">
    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
      <div
        class="relative flex justify-center items-start overflow-hidden w-full"
      >
        <main class="w-full lg:w-3/4 lg:pr-5">
          <div class="mb-6 border-b-[2px]">
            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
              Sponsor
            </h1>
          </div>

          <div class="w-full bg-[#09090B] m-auto">
            <div class="">
              <h2 class="text-white text-xl font-semibold mb-5">Hey 👋,</h2>
              <p class="text-white mb-5 text-[1rem]">
                Thank you for considering supporting our mission. As the sole
                person behind Stocknear—handling everything from backend
                development to customer service—I'm committed to keeping our
                platform affordable and accessible to all investors.
                <br />
                <br />
                Our Stock Analysis Pro Membership is priced to be less than a hamburger
                or döner, ensuring that high-quality stock data is within reach for
                retail investors of all backgrounds.
              </p>
              <div class="text-white mb-5 text-[1rem]">
                While the Pro Membership is designed to sustain our basic
                operations, your additional support can help us go even further.
                By sponsoring, you're not just supporting a platform; you're
                investing in a vision of open, transparent, and affordable
                financial analysis.
                <br />
                <br />
                Here's what makes Stocknear unique:
                <ul style="padding-left: 5px; padding-top:10px;">
                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 10px; list-style-type: disc;"
                  >
                    100% open-source culture
                  </li>

                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 10px; list-style-type: disc;"
                  >
                    No advertisements
                  </li>
                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
                  >
                    No hidden fees or "shady" practices
                  </li>
                </ul>

                Your support will directly contribute to:
                <ul style="padding-left: 5px; padding-top:10px;">
                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 10px; list-style-type: disc;"
                  >
                    Maintaining our low price point
                  </li>
                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 10px; list-style-type: disc;"
                  >
                    Better data quality and features
                  </li>
                  <li
                    style="margin-left: 15px; line-height: 22px; margin-bottom: 10px; list-style-type: disc;"
                  >
                    Furthering our goal to become the #1 stock analysis platform
                    in the industry
                  </li>
                </ul>
              </div>

              <h2 class="text-white text-2xl font-semibold">
                Become a sponsor to stocknear
              </h2>
              <p class="text-white mb-5 text-[1rem]">
                If you believe in our mission and want to support us beyond your
                Pro Subscription, please support us via GitHub Sponsors. Every
                contribution, no matter the size, makes a significant impact on
                our ability to serve you and the retail investor community.
                <br />
                <br />
                <iframe
                  class="w-full border border-gray-600 rounded-md"
                  src="https://github.com/sponsors/stocknear/card"
                  title="Sponsor stocknear"
                  height={$screenWidth < 640 ? "300" : "auto"}
                ></iframe>
                <br />
                <br />
                Your support means the world to me and helps keep Stocknear running
                smoothly.
              </p>
            </div>
          </div>
        </main>

        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
          <div
            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
          >
            <a
              href="/pricing"
              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
            >
              <div class="w-full flex justify-between items-center p-3 mt-3">
                <h2 class="text-start text-xl font-semibold text-white ml-3">
                  Pro Subscription
                </h2>
                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
              </div>
              <span class="text-white p-3 ml-3 mr-3">
                Upgrade now for unlimited access to all data and tools.
              </span>
            </a>
          </div>

          <div
            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
          >
            <a
              href="/about"
              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
            >
              <div class="w-full flex justify-between items-center p-3 mt-3">
                <h2 class="text-start text-xl font-semibold text-white ml-3">
                  About Us
                </h2>
                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
              </div>
              <span class="text-white p-3 ml-3 mr-3">
                Learn more about why we're doing this here
              </span>
            </a>
          </div>

          <div
            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
          >
            <a
              href="/contact"
              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
            >
              <div class="w-full flex justify-between items-center p-3 mt-3">
                <h2 class="text-start text-xl font-semibold text-white ml-3">
                  Contact Us
                </h2>
                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
              </div>
              <span class="text-white p-3 ml-3 mr-3">
                Let me know if you need something
              </span>
            </a>
          </div>
        </aside>
      </div>
    </div>
  </div>
</section>
