"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
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";
import { Heart, Sparkles } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  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: "/programs" },
        { label: "Struktur Pengurus", href: "/about" },
      ],
    },
    {
      title: "Layanan",
      items: [
        { label: "Jadwal Sholat", href: "#" },
        { label: "Donasi", href: "/donation" },
        { label: "Galeri Kegiatan", href: "#gallery" },
      ],
    },
    {
      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: "#testimonials" },
        { 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="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Masjid Wisata NR"
          description="Pusat Ibadah & Kegiatan Umat - Menyediakan tempat beribadah yang nyaman, program berkualitas, dan kesempatan berbagi untuk membangun komunitas yang kuat dan bermakna."
          tag="Selamat Datang"
          tagIcon={Heart}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Hubungi Kami via WhatsApp",
              href: "https://wa.me/628123456789",
            },
            {
              text: "Donasi Sekarang",
              href: "/donation",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          leftCarouselItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-alhambra-palace-granada-spain_181624-51763.jpg?_wi=1",
              imageAlt: "Exterior Masjid Wisata NR",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/gothic-vault-decorative-paintings-architectural-details_169016-68651.jpg?_wi=1",
              imageAlt: "Prayer Hall Masjid Wisata NR",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/morocco-architectures_1203-3403.jpg?_wi=1",
              imageAlt: "Courtyard Masjid Wisata NR",
            },
          ]}
          rightCarouselItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/grup-therapy-session-holding-hands_23-2148856212.jpg",
              imageAlt: "Community Gathering",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/friends-arab-restaurant_23-2147794256.jpg",
              imageAlt: "Religious Event",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/ovations-after-report_1098-15817.jpg",
              imageAlt: "Youth Activity",
            },
          ]}
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-halal-outdoors_23-2150701516.jpg",
              alt: "Jamaah member 1",
            },
            {
              src: "http://img.b2bpic.net/free-photo/young-latin-woman-smiling-happy-standing-city_839833-8445.jpg",
              alt: "Jamaah member 2",
            },
            {
              src: "http://img.b2bpic.net/free-photo/medium-shot-woman-wearing-halal-outdoors_23-2150701527.jpg",
              alt: "Jamaah member 3",
            },
            {
              src: "http://img.b2bpic.net/free-photo/mature-man-smiling-looking-camera-urban-background_1139-1093.jpg",
              alt: "Jamaah member 4",
            },
          ]}
          avatarText="Bergabunglah dengan ribuan jamaah kami"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",
              content: "Tentang Masjid Wisata NR",
            },
            {
              type: "image",
              src: "http://img.b2bpic.net/free-vector/flat-hajj-mubarak-cards-collection_23-2149434002.jpg",
              alt: "About Masjid Wisata NR",
            },
          ]}
          buttons={[
            {
              text: "Pelajari Lebih Lanjut",
              href: "/about",
            },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </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=1",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/happy-young-women-having-coffee-together_23-2148421545.jpg?_wi=1",
              },
            },
            {
              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=1",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/rehab-patients-consoling-sad-man_23-2148398446.jpg?_wi=1",
              },
            },
            {
              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=1",
              },
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/woman-teaching-classroom_23-2151696367.jpg?_wi=1",
              },
            },
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Testimoni Jamaah"
          description="Dengarkan cerita inspiratif dari para jamaah kami yang telah merasakan manfaat dan ketenangan dalam berjamaah di Masjid Wisata NR."
          testimonials={[
            {
              id: "1",
              name: "Bapak Ahmad Surya",
              handle: "Jamaah Tetap",
              testimonial: "Masjid Wisata NR adalah rumah kedua saya. Komunitas yang hangat dan program berkualitas membuat saya dan keluarga semakin dekat dengan agama.",
              imageSrc: "http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-27994.jpg?_wi=1",
              imageAlt: "Bapak Ahmad Surya",
            },
            {
              id: "2",
              name: "Ibu Siti Nurhaliza",
              handle: "Donatur",
              testimonial: "Senang melihat amanah yang dijalankan masjid ini. Transparansi dan dedikasi pengurus membuat saya tenang bersedekah di sini.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-12274.jpg?_wi=1",
              imageAlt: "Ibu Siti Nurhaliza",
            },
            {
              id: "3",
              name: "Muhammad Rizki",
              handle: "Peserta Program",
              testimonial: "Program-program masjid ini mengubah perspektif saya tentang agama. Sangat bermanfaat dan dibawakan dengan cara yang mudah dipahami.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-man-showing-thumbs-up-looking-pleased_176474-95690.jpg?_wi=1",
              imageAlt: "Muhammad Rizki",
            },
            {
              id: "4",
              name: "Ibu Dwi Ratna",
              handle: "Relawan",
              testimonial: "Sebagai relawan, saya merasa dihargai dan part of meaningful mission. Semangat kolaborasi di sini luar biasa inspiring.",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-wearing-hijab_23-2149226609.jpg?_wi=1",
              imageAlt: "Ibu Dwi Ratna",
            },
            {
              id: "5",
              name: "Haji Bambang Sutrisno",
              handle: "Pengurus",
              testimonial: "Alhamdulillah kami terus berkembang. Dukungan komunitas membuat visi kami untuk melayani umat semakin kuat dan terukur.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-man-white-background_23-2148394563.jpg?_wi=1",
              imageAlt: "Haji Bambang Sutrisno",
            },
            {
              id: "6",
              name: "Anisa Putri",
              handle: "Anak Muda",
              testimonial: "Masjid ini sangat welcoming untuk generasi muda. Banyak kegiatan yang relevan dengan kehidupan kami di era digital ini.",
              imageSrc: "http://img.b2bpic.net/free-photo/headshot-cute-girl-with-hair-bun-spending-lunch-break-restaurant-with-wooden-walls_273609-9037.jpg?_wi=1",
              imageAlt: "Anisa Putri",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardTwo
          title="Galeri Kegiatan"
          description="Dokumentasi foto dan momen berharga dari berbagai kegiatan masjid yang menunjukkan aktivitas dan spirit komunitas kami."
          products={[
            {
              id: "photo-1",
              brand: "Masjid Wisata NR",
              name: "Sholat Berjamaah",
              price: "Setiap Hari",
              rating: 5,
              reviewCount: "1000+",
              imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-arab-restaurant_23-2147794341.jpg",
              imageAlt: "Sholat Berjamaah",
            },
            {
              id: "photo-2",
              brand: "Masjid Wisata NR",
              name: "Kajian Ramadhan",
              price: "Spesial",
              rating: 5,
              reviewCount: "500+",
              imageSrc: "http://img.b2bpic.net/free-photo/man-holding-meeting-his-workplace_23-2148908830.jpg?_wi=1",
              imageAlt: "Kajian Ramadhan",
            },
            {
              id: "photo-3",
              brand: "Masjid Wisata NR",
              name: "Program Sosial",
              price: "Berkala",
              rating: 5,
              reviewCount: "300+",
              imageSrc: "http://img.b2bpic.net/free-photo/different-people-doing-volunteer-work-foodbank_23-2149012262.jpg",
              imageAlt: "Program Sosial",
            },
            {
              id: "photo-4",
              brand: "Masjid Wisata NR",
              name: "Acara Anak-Anak",
              price: "Bulanan",
              rating: 5,
              reviewCount: "200+",
              imageSrc: "http://img.b2bpic.net/free-photo/group-friends-planning-together_23-2148729711.jpg?_wi=1",
              imageAlt: "Acara Anak-Anak",
            },
            {
              id: "photo-5",
              brand: "Masjid Wisata NR",
              name: "Pelatihan Keterampilan",
              price: "Rutin",
              rating: 5,
              reviewCount: "150+",
              imageSrc: "http://img.b2bpic.net/free-photo/back-view-teenage-friends-hanging-out_23-2150521876.jpg",
              imageAlt: "Pelatihan Keterampilan",
            },
            {
              id: "photo-6",
              brand: "Masjid Wisata NR",
              name: "Acara Amal Jariah",
              price: "Berkala",
              rating: 5,
              reviewCount: "250+",
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-volunteer-holding-food-donations-box_23-2148732642.jpg?_wi=1",
              imageAlt: "Acara Amal Jariah",
            },
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Pertanyaan Umum"
          description="Jawaban untuk pertanyaan yang sering diajakan tentang masjid kami, jam operasional, program, dan cara berkontribusi."
          faqs={[
            {
              id: "1",
              title: "Berapa jadwal sholat di Masjid Wisata NR?",
              content: "Jadwal sholat kami mengikuti waktu setempat. Subuh jam 04:30, Dzuhur jam 12:00, Ashar jam 15:30, Maghrib jam 18:00, dan Isya jam 19:30. Untuk jadwal detail, silakan lihat di halaman utama kami.",
            },
            {
              id: "2",
              title: "Bagaimana cara berdonasi?",
              content: "Anda dapat berdonasi melalui beberapa cara: (1) Transfer langsung ke rekening masjid, (2) QRIS yang tersedia di masjid, (3) Donasi langsung ke pengurus, atau (4) Mengisi form donasi online kami. Semua donasi transparan dan tercatat dengan baik.",
            },
            {
              id: "3",
              title: "Apakah masjid terbuka untuk umum?",
              content: "Ya, masjid kami terbuka untuk semua jamaah Muslim baik lokal maupun pengunjung wisata religi. Kami menyediakan fasilitas parkir, tempat wudu yang bersih, dan area istirahat yang nyaman.",
            },
            {
              id: "4",
              title: "Program apa saja yang tersedia untuk anak-anak?",
              content: "Kami menyediakan: (1) Kelas membaca Al-Quran untuk TK dan SD, (2) Program mentoring rohani, (3) Aktivitas seni dan ketrampilan, (4) Gathering keluarga bulanan, dan (5) Camp islami saat liburan.",
            },
            {
              id: "5",
              title: "Bagaimana cara menjadi relawan?",
              content: "Silakan hubungi pengurus masjid melalui WhatsApp kami atau kunjungi langsung masjid. Kami selalu membuka peluang bagi yang ingin berkontribusi dalam berbagai bidang sesuai minat dan kemampuan Anda.",
            },
            {
              id: "6",
              title: "Apakah masjid menyediakan fasilitas untuk acara khusus?",
              content: "Ya, kami menyediakan ruang untuk acara khusus seperti halal bihalal, workshop, seminar, dan gathering komunitas. Silakan hubungi kami untuk detail dan ketersediaan ruang.",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-women-working_23-2149271733.jpg?_wi=1"
          imageAlt="FAQ Image"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Hubungi Kami - Kami siap melayani pertanyaan, menerima donasi, dan mendengarkan masukan Anda. Silakan hubungi melalui WhatsApp, telepon, atau kunjungi langsung masjid kami."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Chat WhatsApp",
              href: "https://wa.me/628123456789",
            },
            {
              text: "Telepon Kami",
              href: "tel:+628123456789",
            },
            {
              text: "Lihat Lokasi",
              href: "/contact",
            },
          ]}
          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>
  );
}