"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function DonationPage() {
  const navItems = [
    { name: "Beranda", id: "home" },
    { name: "Tentang Kami", id: "about" },
    { name: "Program", id: "programs" },
    { name: "Donasi", id: "donation" },
    { name: "Kontak", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Tentang",
      items: [
        { label: "Tentang Masjid", href: "/" },
        { label: "Program & Kegiatan", href: "/programs" },
        { label: "Struktur Pengurus", href: "/" },
      ],
    },
    {
      title: "Layanan",
      items: [
        { label: "Jadwal Sholat", href: "#" },
        { label: "Donasi", href: "/donation" },
        { label: "Galeri Kegiatan", href: "/" },
      ],
    },
    {
      title: "Hubungi",
      items: [
        { label: "WhatsApp", href: "https://wa.me/628123456789" },
        { label: "Telepon", href: "tel:+628123456789" },
        { label: "Email", href: "mailto:info@masjidwisatanr.com" },
      ],
    },
    {
      title: "Komunitas",
      items: [
        { label: "Jadilah Relawan", href: "/" },
        { label: "Testimonial", href: "/" },
        { label: "FAQ", href: "#faq" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Masjid Wisata NR" navItems={navItems} />
      </div>

      <div id="donation-methods" data-section="donation-methods">
        <ProductCardTwo
          title="Cara Berdonasi"
          description="Kami menyediakan berbagai metode donasi yang mudah, aman, dan transparan. Semua donasi Anda akan digunakan untuk kemajuan masjid dan kesejahteraan komunitas."
          products={[
            {
              id: "transfer-bank",
              brand: "Bank Syariah Indonesia",
              name: "Transfer Bank Langsung",
              price: "Mudah & Aman",
              rating: 5,
              reviewCount: "1000+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/low-angle-shot-alhambra-palace-granada-spain_181624-51763.jpg?_wi=2",
              imageAlt: "Bank transfer donation method",
            },
            {
              id: "qris",
              brand: "Masjid Wisata NR",
              name: "Scan QRIS",
              price: "Praktis & Cepat",
              rating: 5,
              reviewCount: "800+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/gothic-vault-decorative-paintings-architectural-details_169016-68651.jpg?_wi=2",
              imageAlt: "QRIS payment donation",
            },
            {
              id: "direct-cash",
              brand: "Tersedia di Lokasi",
              name: "Donasi Langsung Tunai",
              price: "Personal Touch",
              rating: 5,
              reviewCount: "600+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/morocco-architectures_1203-3403.jpg?_wi=2",
              imageAlt: "Direct cash donation",
            },
            {
              id: "online-form",
              brand: "Platform Digital",
              name: "Form Donasi Online",
              price: "Transparan & Tercatat",
              rating: 5,
              reviewCount: "700+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/group-friends-planning-together_23-2148729711.jpg?_wi=2",
              imageAlt: "Online donation form",
            },
            {
              id: "zakat",
              brand: "Kewajiban Islam",
              name: "Program Zakat",
              price: "Berkah & Doa",
              rating: 5,
              reviewCount: "500+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiley-female-volunteer-holding-food-donations-box_23-2148732642.jpg?_wi=2",
              imageAlt: "Zakat program",
            },
            {
              id: "endowment",
              brand: "Investasi Akhirat",
              name: "Wakaf (Endowment)",
              price: "Amal Jariah Abadi",
              rating: 5,
              reviewCount: "400+",
              imageSrc:
                "http://img.b2bpic.net/free-photo/man-holding-meeting-his-workplace_23-2148908830.jpg?_wi=2",
              imageAlt: "Wakaf endowment program",
            },
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Pertanyaan Tentang Donasi"
          description="Informasi penting tentang proses donasi, transparansi, dan bagaimana dana Anda digunakan untuk kemajuan masjid dan komunitas."
          faqs={[
            {
              id: "1",
              title: "Bagaimana cara mengetahui penggunaan dana donasi?",
              content:
                "Kami berkomitmen pada transparansi penuh. Laporan penggunaan dana donasi dipublikasikan setiap bulan dan dapat diakses oleh semua donatur. Anda juga dapat meminta detail langsung kepada pengurus.",
            },
            {
              id: "2",
              title: "Apakah donasi saya dapat dikurangkan dari pajak?",
              content:
                "Untuk donasi yang memenuhi syarat, kami dapat menerbitkan surat keterangan donasi. Silakan hubungi pengurus untuk informasi lebih detail tentang persyaratan dan prosesnya.",
            },
            {
              id: "3",
              title: "Bisakah saya mendonasikan barang selain uang?",
              content:
                "Ya, kami menerima donasi barang seperti Al-Quran, perlengkapan sholat, buku pendidikan, dan kebutuhan sehari-hari untuk komunitas. Silakan hubungi kami untuk koordinasi pengiriman.",
            },
            {
              id: "4",
              title: "Apakah ada program donasi rutin atau berlangganan?",
              content:
                "Ya, kami menyediakan program donasi rutin bulanan yang dapat disusun sesuai kemampuan Anda. Program ini membantu kami merencanakan program komunitas dengan lebih baik.",
            },
            {
              id: "5",
              title: "Bagaimana jika saya ingin mendonasikan untuk proyek tertentu?",
              content:
                "Kami senang menerima donasi untuk proyek spesifik seperti perbaikan fasilitas, program sosial, atau bantuan pendidikan. Hubungi kami untuk mendiskusikan proyek yang ingin Anda dukung.",
            },
            {
              id: "6",
              title: "Apakah donasi untuk wakaf (endowment) tersedia?",
              content:
                "Ya, program wakaf kami memungkinkan Anda untuk memberikan amal jariah yang berkelanjutan. Wakaf dapat berupa uang, properti, atau aset lainnya dengan niat mendukung masjid selamanya.",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-women-working_23-2149271733.jpg?_wi=2"
          imageAlt="Help support customer service representative"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Siap untuk berdonasi? Hubungi kami untuk informasi rekening bank, QRIS, atau metode pembayaran lainnya. Terima kasih telah menjadi bagian dari kesuksesan masjid dan komunitas kami."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Hubungi via WhatsApp",
              href: "https://wa.me/628123456789",
            },
            {
              text: "Lihat Nomor Rekening",
              href: "tel:+628123456789",
            },
            {
              text: "Kembali ke Beranda",
              href: "/",
            },
          ]}
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Masjid Wisata NR. Semua hak dilindungi."
          bottomRightText="Kelola oleh Pengurus dengan Amanah dan Transparansi"
        />
      </div>
    </ThemeProvider>
  );
}