"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Heart, Sparkles } from "lucide-react";

export default function ProgramsPage() {
  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: "/contact" },
        { label: "Testimonial", href: "/" },
        { label: "FAQ", href: "/" },
      ],
    },
  ];

  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="programs" data-section="programs">
        <FeatureCardNine
          title="Program & Kegiatan Kami"
          description="Berbagai program berkualitas untuk semua kalangan, dari anak-anak hingga orang tua, dirancang untuk mendekatkan diri kepada Allah dan membangun komunitas yang solid."
          tag="Kegiatan Terdepan"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Ikuti Program Kami",
              href: "/programs",
            },
          ]}
          buttonAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Kajian Rutin",
              description:
                "Kajian Islam yang mendalam dan mudah dipahami setiap minggu dengan pembicara berpengalaman dari berbagai background.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/person-with-mehndi-holding-quran-near-tea-cup_23-2148074863.jpg?_wi=2",
                imageAlt: "Islamic study circle quran teaching class",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/happy-young-women-having-coffee-together_23-2148421545.jpg?_wi=2",
                imageAlt: "Quran study group learning circle muslim",
              },
            },
            {
              id: 2,
              title: "Program Sosial",
              description:
                "Kegiatan pemberdayaan masyarakat, bantuan fakir miskin, dan program kesehatan untuk membantu sesama dalam kehidupan sehari-hari.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/close-up-people-with-food-donations_23-2149182004.jpg?_wi=2",
                imageAlt: "Community social program charitable activity",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/rehab-patients-consoling-sad-man_23-2148398446.jpg?_wi=2",
                imageAlt: "Community service volunteer helping people",
              },
            },
            {
              id: 3,
              title: "Pendidikan Anak",
              description:
                "Program pembelajaran Al-Quran, hadits, dan nilai-nilai Islamic untuk generasi muda dengan metode yang menyenangkan dan interaktif.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/portrait-girl-sitting-front-wallpaper-reading-book_23-2147922406.jpg?_wi=2",
                imageAlt: "Children islamic education learning class",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696367.jpg?_wi=2",
                imageAlt: "Quran school children learning circle",
              },
            },
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Testimoni Peserta Program"
          description="Dengarkan cerita inspiratif dari para peserta program kami yang telah merasakan dampak positif dari setiap kegiatan yang kami selenggarakan."
          testimonials={[
            {
              id: "1",
              name: "Bapak Ahmad Surya",
              handle: "Peserta Kajian",
              testimonial:
                "Program kajian rutin sangat membantu saya memahami islam dengan lebih baik. Pembicara yang berpengalaman dan suasana yang nyaman membuat saya selalu ingin kembali.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-27994.jpg?_wi=4",
              imageAlt: "Muslim man portrait professional headshot",
            },
            {
              id: "2",
              name: "Ibu Siti Nurhaliza",
              handle: "Peserta Program Sosial",
              testimonial:
                "Bergabung dalam program sosial membuat saya merasakan arti berbagi dan kepedulian yang nyata. Komunitas yang solid membuat setiap kegiatan menjadi bermakna.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-12274.jpg?_wi=4",
              imageAlt: "Muslim woman hijab portrait professional",
            },
            {
              id: "3",
              name: "Muhammad Rizki",
              handle: "Peserta Pendidikan Anak",
              testimonial:
                "Anak saya sangat senang mengikuti program pendidikan Al-Quran. Metode yang menyenangkan membuat dia tidak merasa terbebani dalam belajar.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-man-showing-thumbs-up-looking-pleased_176474-95690.jpg?_wi=4",
              imageAlt: "Young muslim man portrait professional",
            },
            {
              id: "4",
              name: "Ibu Dwi Ratna",
              handle: "Fasilitator Program",
              testimonial:
                "Sebagai fasilitator, saya merasa dihargai dan part of meaningful mission. Semangat kolaborasi di sini luar biasa inspiring untuk terus berkembang.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-wearing-hijab_23-2149226609.jpg?_wi=3",
              imageAlt: "Muslim woman portrait hijab professional",
            },
            {
              id: "5",
              name: "Haji Bambang Sutrisno",
              handle: "Alumni Program",
              testimonial:
                "Program-program yang ada sangat terstruktur dan memberikan dampak jangka panjang. Saya melihat perubahan positif pada diri saya dan keluarga.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-senior-man-white-background_23-2148394563.jpg?_wi=3",
              imageAlt: "Senior muslim man portrait professional",
            },
            {
              id: "6",
              name: "Anisa Putri",
              handle: "Peserta Usia Muda",
              testimonial:
                "Program di masjid ini sangat relevan dengan kehidupan saya. Tidak hanya edukasi agama, tapi juga life skills yang praktis dan berguna.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/headshot-cute-girl-with-hair-bun-spending-lunch-break-restaurant-with-wooden-walls_273609-9037.jpg?_wi=2",
              imageAlt: "Young muslim woman portrait professional",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Tertarik mengikuti program kami? Hubungi kami sekarang untuk informasi lebih lanjut tentang jadwal, pendaftaran, dan persyaratan program yang ingin Anda ikuti. Kami siap membantu Anda menjadi bagian dari komunitas kami."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Chat WhatsApp",
              href: "https://wa.me/628123456789",
            },
            {
              text: "Telepon Kami",
              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>
  );
}