"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Users } from "lucide-react";

export default function AboutPage() {
  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: "/about" },
        { label: "Program & Kegiatan", href: "/" },
        { label: "Struktur Pengurus", href: "/about" },
      ],
    },
    {
      title: "Layanan",
      items: [
        { label: "Jadwal Sholat", href: "/" },
        { label: "Donasi", href: "/" },
        { 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: "/" },
      ],
    },
  ];

  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"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Masjid Wisata NR" navItems={navItems} />
      </div>

      {/* About Detail Section */}
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",
              content: "Tentang Masjid Wisata NR - Sejarah, Visi, dan Misi Kami",
            },
            {
              type: "image",
              src: "http://img.b2bpic.net/free-vector/flat-hajj-mubarak-cards-collection_23-2149434002.jpg",
              alt: "About Masjid Wisata NR",
            },
          ]}
          buttons={[
            {
              text: "Kembali ke Beranda",
              href: "/",
            },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Team & Leadership Section */}
      <div id="team" data-section="team">
        <FeatureCardNine
          title="Struktur Pengurus"
          description="Tim pengurus yang berdedikasi dan berpengalaman dalam mengelola masjid dengan amanah, transparansi, dan fokus pada kesejahteraan jamaah."
          tag="Kepemimpinan"
          tagIcon={Users}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Hubungi Pengurus",
              href: "https://wa.me/628123456789",
            },
          ]}
          buttonAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Ketua Masjid",
              description:
                "Memimpin organisasi dengan visi jangka panjang, mengelola program strategis, dan memastikan setiap keputusan dilakukan dengan musyawarah dan transparansi penuh.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/portrait-senior-man-white-background_23-2148394563.jpg?_wi=2",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/mature-man-smiling-looking-camera-urban-background_1139-1093.jpg",
              },
            },
            {
              id: 2,
              title: "Wakil Ketua",
              description:
                "Mendampingi ketua dalam mengawasi operasional harian, memastikan program berjalan efektif, dan menjadi penghubung antara pengurus dan jamaah.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-27994.jpg?_wi=2",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/young-man-showing-thumbs-up-looking-pleased_176474-95690.jpg?_wi=2",
              },
            },
            {
              id: 3,
              title: "Sekretaris dan Bendahara",
              description:
                "Mengelola administrasi masjid dengan tertib, mencatat setiap transaksi donasi, dan menyajikan laporan keuangan yang transparan kepada jamaah.",
              phoneOne: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-12274.jpg?_wi=2",
              },
              phoneTwo: {
                imageSrc:
                  "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-wearing-hijab_23-2149226609.jpg?_wi=2",
              },
            },
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      {/* Community Members Testimonials */}
      <div id="community-testimonials" data-section="community-testimonials">
        <TestimonialCardSix
          title="Anggota Komunitas Kami"
          description="Jamaah dan relawan yang telah menjadi bagian dari perjalanan Masjid Wisata NR, berkontribusi aktif dalam membangun komunitas yang solid dan bermakna."
          testimonials={[
            {
              id: "1",
              name: "Bapak Ahmad Surya",
              handle: "Jamaah Tetap 15 tahun",
              testimonial:
                "Sejak pertama kali mendatangi masjid ini, saya merasakan kehangatan komunitas. Program-programnya selalu inovatif dan relevan dengan kebutuhan zaman.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-27994.jpg?_wi=3",
              imageAlt: "Bapak Ahmad Surya",
            },
            {
              id: "2",
              name: "Ibu Siti Nurhaliza",
              handle: "Donatur Aktif",
              testimonial:
                "Amanah dan transparansi pengurus masjid ini luar biasa. Setiap donasi saya tahu akan digunakan dengan bijak untuk kebaikan bersama.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-12274.jpg?_wi=3",
              imageAlt: "Ibu Siti Nurhaliza",
            },
            {
              id: "3",
              name: "Muhammad Rizki",
              handle: "Peserta Program Pemuda",
              testimonial:
                "Masjid ini memberikan ruang bagi generasi muda untuk berkembang dan berkontribusi. Saya belajar banyak tentang Islam dan kepemimpinan di sini.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-man-showing-thumbs-up-looking-pleased_176474-95690.jpg?_wi=3",
              imageAlt: "Muhammad Rizki",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <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>
  );
}