---
import Link from "@components/UI/Link.astro";
import { STATIC_PATHS } from "@i18n/utils";
import Layout from "src/layouts/Layout.astro";

// const t = i18n.inferLangUseTranslations(Astro.url);

export const prerender = true;

export function getStaticPaths() {
  return STATIC_PATHS;
}
---

<Layout title="Donate | Alu">
    <main id="main-content">
        <h1 class="title-text">Donating to Alu</h1>
        <section id="donate">
            <h3 class="thank-you-title">Thank you for your interest in donating to Alu! All support helps grow Alu into a better proxy for everyone!</h3>

            <h2>Donate through Patreon:</h2>
            <p>Alu is on Patreon! You can donate to Alu through Patreon and get some cool perks in return. Check out our Patreon page <Link href="https://www.patreon.com/wearr/membership" newTab>here!</Link></p>
            
            <h2>Donate through Cryptocurrencies</h2>
            <p>Alu accepts donations through cryptocurrencies. You can donate to Alu using the following addresses:</p>
            <div class="wallet-list-item"><span class="wallet-list-title">Bitcoin: </span> bc1q4znsy2uz3zxcg8djgrur7fcs6t0gek9pckpztu</div>
            <div class="wallet-list-item"><span class="wallet-list-title">Monero:  </span> 4BAuZm7PqC4NHvjrhVLmksLG7Y1j9jePMUVR1bVrgaNEW2eWL9Ffpugidi5QWs4ofV8NtDUN3qLUZE6NHPA1dkmQFnE4g1C</div>
            <div class="wallet-list-item"><span class="wallet-list-title">Ethereum:</span> 0x1D954D78aC53757348eD73793579241390d8A120</div>
            <div class="wallet-list-item"><span class="wallet-list-title">Litecoin:</span> LgXYv3MK8WkMSDGQ3XM3usJ3DAdTy4amSV</div>
            <p>Click on any address to copy it to your clipboard!</p>
        </section>

        <script>
            import Toast from "@components/ts/toast";
            Toast.setDuration(2000);
            
            const wallets = document.getElementsByClassName("wallet-list-item");

            Array.from(wallets).forEach((wallet) => {
                wallet!.addEventListener("click", () => {
                    if (wallet) {
                        navigator.clipboard.writeText(wallet.childNodes[1].textContent!);
                        Toast.success("Copied to clipboard!");
                    }

                });
            });
        </script>

        <style>
            .thank-you-title {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            .wallet-list-item {
                cursor: pointer;
                font-size: 18px;
                height: 2rem;
                white-space: nowrap;
                overflow: hidden;
            }
            .wallet-list-title {
                width: 6rem;
                display: inline-block;
                font-weight: bold;
            }
        </style>
    </main>
</Layout>