import BasicPage from "../../components/basic-page";
import WCard from "../../components/werefox-card";
import Link from "next/link";
import Iframe from "react-iframe";

export default function Support() {
  return (
    <BasicPage page_title="Support" card_title="Support Me!">
      <WCard
        innerText="I would sincerely appreciate if you would throw some financial
        support my way!! 💙"
      >
        <div className="p-4 space-y-4">
          <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
            You could support me through Patreon, Ko-fi, or Liberapay
          </p>
          <div className="w-full justify-center flex">
            <Link href="https://www.patreon.com/bePatron?u=16333959">
              <a target="_blank">
                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                  <span>
                    <img
                      alt="Subscribe to Alexis' Patreon"
                      src="/images/patreon_logo.png"
                      className="inline-flex h-6"
                    ></img>
                  </span>{" "}
                  Become a Patron!
                </p>
              </a>
            </Link>
          </div>
          <div className="w-full justify-center flex">
            <Link href="https://ko-fi.com/O5O61UAY1">
              <a target="_blank">
                <p className="rounded-lg pt-2 pb-2 pl-4 pr-4 w-full w-max-60 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-lg text-center text-werefox-grey-darker dark:text-werefox-grey-lightest bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                  <span>
                    <img
                      alt="Buy Alexis a Coffee"
                      src="/images/kofi_logo.png"
                      className="inline-flex w-6 pb-1"
                    ></img>
                  </span>{" "}
                  Buy me a Coffee!
                </p>
              </a>
            </Link>
          </div>
          <div className="w-full justify-center flex">
            <Link href="https://liberapay.com/alexis_werefox/donate">
              <a
                target="_blank"
                className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker"
              >
                <img
                  alt="Donate using Liberapay"
                  src="/images/liberapay_donate.svg"
                  className="inline-flex h-10 filter transition hover:brightness-125"
                />
              </a>
            </Link>
          </div>
          <div className="pb-6 flex justify-center">
            <details className="rounded-lg p-1 overflow-auto">
              <summary className="p-2 pl-4 pr-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker text-md text-center text-werefox-grey-darker dark:text-werefox-grey-lighter bg-werefox-blue dark:bg-werefox-blue-dark transition hover:bg-werefox-blue-light dark:hover:bg-werefox-blue-darker">
                <strong>Open/Close Ko-fi Donation Widget</strong>
              </summary>
              <div className="pt-2">
                <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker overflow-auto">
                  <Iframe
                    className="rounded-lg w-96 min-w-96"
                    url="https://ko-fi.com/alexis_werefox/?hidefeed=true&widget=true&embed=true&preview=true"
                    height="680"
                  ></Iframe>
                </div>
              </div>
            </details>
          </div>
        </div>
      </WCard>
    </BasicPage>
  );
}
