import { Button } from "@/components/ui/button";
import Image from "@/components/ui/resilient-image";

import { SiteFooter } from "@/components/public/site-footer";
import { SiteHeader } from "@/components/public/site-header";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function DonatePage() {
  return (
    <div className="flex min-h-svh flex-col bg-background">
      <SiteHeader />
      <main className="mx-auto flex w-full max-w-3xl flex-1 items-center justify-center px-4 py-12 sm:px-6 sm:py-16">
        <Card className="w-full max-w-md text-center">
          <CardHeader>
            <CardTitle className="text-3xl">สนับสนุนผู้พัฒนา❤️</CardTitle>
            <CardDescription className="text-base leading-7">
              สามารถสนับสนุนค่าดูแลเว็บไซต์ได้ที่นี่
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col items-center gap-5">
            <div className="rounded-2xl bg-white p-4 ring-1 ring-foreground/10">
              <Image
                src="/donate.jpg"
                alt="QR Code"
                width={412}
                height={412}
                className="size-full max-w-72"
                priority
              />
            </div>
            <Button nativeButton={false} render={<a href="/donate.jpg" download="buzz-guide-donate-qr.jpg" />}>บันทึก QR สำหรับโอนเงิน</Button>
            <p className="text-sm leading-6 text-muted-foreground">
              สแกน QR ด้วยแอปธนาคาร หรือบันทึก QR แล้วเลือกรูปในแอปธนาคารบนมือถือเครื่องนี้
              <br />
              ขอบคุณทุกการสนับสนุน เลิฟๆคับ
            </p>
          </CardContent>
        </Card>
      </main>
      <SiteFooter />
    </div>
  );
}