"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "About", id: "/about" },
              { name: "Pillars", id: "/about#pillars" },
              { name: "Calendar", id: "/about#calendar" },
              { name: "Testimonials", id: "/#testimonials" },
              { name: "FAQ", id: "/#faq" },
              { name: "Blog", id: "/#blog" },
              { name: "Contact", id: "/#contact" }
            ]}
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
            brandName="Nur Al-Islam"
          />
        </div>

        <div id="about" data-section="about">
          <SplitAbout
            textboxLayout="default"
            useInvertedBackground={true}
            imagePosition="right"
            title="Our Mission: Illuminating the Path of Islam"
            description="At Nur Al-Islam, we are dedicated to providing authentic and accessible Islamic knowledge for everyone. Our platform serves as a trusted resource for Muslims worldwide, fostering a deeper understanding of our faith and practices."
            bulletPoints={[
              {
                title: "Comprehensive Teachings",                description: "Explore in-depth lessons on Quran, Hadith, and Islamic jurisprudence."},
              {
                title: "Daily Spiritual Guidance",                description: "Access resources for prayer times, duas, and dhikr to strengthen your daily connection with Allah."},
              {
                title: "Global Community",                description: "Join a vibrant community of learners and scholars to share insights and support."},
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-holding-crucifix_23-2149301765.jpg?_wi=2"
            imageAlt="Open Holy Quran on a wooden table"
            mediaAnimation="slide-up"
          />
        </div>

        <div id="pillars" data-section="pillars">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              {
                id: "prayer",                title: "Five Daily Prayers (Salat)",                subtitle: "Detailed guides for performing all five daily prayers, including Wudu, Raka'at counts, and essential supplications.",                category: "Worship",                value: "Guidance"},
              {
                id: "dua",                title: "Heartfelt Duas (Supplications)",                subtitle: "A vast collection of Duas for every occasion, from morning invocations to prayers for seeking forgiveness and blessings.",                category: "Prayer",                value: "Blessings"},
              {
                id: "quranic-surahs",                title: "Profound Quranic Surahs",                subtitle: "Learn the meanings and recitations of powerful Surahs like Al-Fatiha, Yaseen, Ar-Rahman, Al-Baqarah, and more, with tafsir.",                category: "Quran",                value: "Wisdom"},
            ]}
            title="Key Pillars of Islamic Knowledge"
            description="Delve into the foundational aspects of Islam with our structured content, covering everything from daily worship to spiritual nourishment."
          />
        </div>

        <div id="calendar" data-section="calendar">
          <MetricCardSeven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            metrics={[
              {
                id: "hajj",                value: "Hajj",                title: "Spiritual Journey",                items: [
                  "Comprehensive guide to performing Hajj.",                  "Significance of each ritual explained.",                  "Tips for pilgrims."],
              },
              {
                id: "umrah",                value: "Umrah",                title: "Minor Pilgrimage",                items: [
                  "Step-by-step instructions for Umrah.",                  "Recommended duas for Umrah.",                  "Historical context of sites."],
              },
              {
                id: "ramadan",                value: "Ramadan",                title: "Month of Fasting",                items: [
                  "Rules and virtues of fasting.",                  "Iftar and Suhoor guidance.",                  "Lailatul Qadr insights."],
              },
              {
                id: "zakat",                value: "Zakat & Fitra",                title: "Charity & Purification",                items: [
                  "Calculations for Zakat and Fitra.",                  "Importance of giving in Islam.",                  "Guidelines for distribution."],
              },
            ]}
            title="Islamic Calendar & Blessings"
            description="Understand the significance of each month in the Islamic calendar and the unique blessings and practices associated with them, including Hajj, Umrah, and Ramadan."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Explore",                items: [
                  { label: "Prayers", href: "/about#pillars" },
                  { label: "Surahs", href: "/about#pillars" },
                  { label: "Hajj & Umrah", href: "/about#calendar" },
                  { label: "Ramadan", href: "/about#calendar" },
                  { label: "Zakat", href: "/about#calendar" },
                ],
              },
              {
                title: "Resources",                items: [
                  { label: "About Us", href: "/about" },
                  { label: "Blog", href: "/#blog" },
                  { label: "FAQ", href: "/#faq" },
                  { label: "Testimonials", href: "/#testimonials" },
                ],
              },
              {
                title: "Legal",                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" },
                ],
              },
            ]}
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
            logoText="Nur Al-Islam"
            copyrightText="© 2024 Nur Al-Islam. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
