import { ButtonLink } from "../components/Button.tsx";
import { Button } from "../components/Button.tsx";
import Header from "../components/Header.tsx";
import { Input } from "../components/Input.tsx";

export default () => {
  return (
    <div className="p-4 mx-auto max-w-screen-md">
      <h1
        className={"bg-orange-200 text-white text-2xl font-semibold p-4 text-center"}
      >
        DEMOSIDE - FUNGERER IKKE
      </h1>
      <Header></Header>

      <div
        className={"max-w-2xl mx-auto px-4 py-8"}
      >
        <h2
          className={"text-2xl font-semibold mb-4"}
        >
          Økonomisk støtte til NRSS
        </h2>
        <p>
          Jeg ønsker at NRSS skal være gratis tilgjengelig for alle. Imidlertid koster det penger og tid å drifte og
          vedlikeholde en nettside. Dersom du har råd til det (og bare da!) setter jeg stor pris på om du vil støtte
          prosjektet med et valgfritt, månedlig beløp via Vipps.
        </p>

        <form
          className={"mt-6"}
        >
          <Input
            type={"tel"}
            placeholder={"Ditt telefonnummer."}
          >
          </Input>
          <div className={"flex"}>
            <Button
              type={"submit"}
            >
              Støtt NRSS
            </Button>
            <Button
              type={"button"}
            >
              Avslutt eksisterende abonnement
            </Button>
          </div>
          <p
            className={"text-sm"}
          >
            Epost blir utelukkende brukt til å knytte deg til en donasjon, slik at du kan kansellere den senere.
          </p>
        </form>

        <p
          className={"mt-4 font-semibold"}
        >
          Du kan når som helst avslutte abonnementet fra denne siden.
        </p>
        <p
          className={"mt-4"}
        >
          Opplever du problemer med betalingen, eller har du andre spørsmål? Ta{" "}
          <a
            className={"text-blue-600 underline"}
            href={"mailto:olav@sundfoer.com"}
          >
            kontakt på mail
          </a>.
        </p>
      </div>
      <footer
        className={"mt-8"}
      >
        Krets AS - 922 739 625
      </footer>
    </div>
  );
};