"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Bookmark, Sun, Heart, Sprout, Radio, Shield } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Categories", id: "categories" },
            { name: "Search", id: "search" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="RemembGoal"
          bottomLeftText="Islamic Remembrance"
          bottomRightText="Daily Spiritual Growth"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Start Your Day with Divine Remembrance"
          description="Discover daily Islamic Dhikr (remembrances) organized by time and category. Simple, beautiful, and spiritually uplifting—designed for both mobile and desktop."
          tag="Welcome to RemembGoal"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          leftCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg", imageAlt: "Morning Dhikr" },
            { imageSrc: "http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg", imageAlt: "Evening Dhikr" },
            { imageSrc: "http://img.b2bpic.net/free-photo/man-temple_119272-7.jpg", imageAlt: "After Prayer Dhikr" },
            { imageSrc: "http://img.b2bpic.net/free-photo/woman-walking-road-highlands_657883-134.jpg", imageAlt: "Travel Dhikr" }
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/candid-shot-unshaven-young-male-shoes-lying-comfortably-gray-couch-with-portable-computer-his-lap-having-nap-meditating-keeping-his-eyes-closed-listening-relaxing-music_343059-798.jpg", imageAlt: "Sleep Dhikr" },
            { imageSrc: "http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg", imageAlt: "Islamic Remembrance" },
            { imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-tree-bark-through-magnifying-glass_23-2147776833.jpg", imageAlt: "Search Dhikr" },
            { imageSrc: "http://img.b2bpic.net/free-vector/valentine-s-day-banner-template_23-2148013779.jpg", imageAlt: "Save Favorites" }
          ]}
          carouselPosition="right"
          buttons={[
            { text: "Explore Dhikr", href: "#categories" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="categories" data-section="categories">
        <FeatureCardTwentyOne
          title="Dhikr by Category"
          description="Find the perfect remembrances for every moment of your day. Explore Dhikr organized by time and occasion."
          tag="Organized Collection"
          tagIcon={Bookmark}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg"
          imageAlt="Dhikr Categories"
          mediaAnimation="slide-up"
          mediaPosition="left"
          useInvertedBackground={false}
          accordionItems={[
            {
              id: "morning",              title: "Morning Dhikr (Adhkar As-Sabah)",              content: "Begin your day with morning remembrances. Includes Takbir, Tahmid, and Tahlil to seek Allah's blessing and protection throughout the day."
            },
            {
              id: "evening",              title: "Evening Dhikr (Adhkar Al-Masaa)",              content: "End your day with evening remembrances. Includes reflections and gratitude for the day's blessings, seeking protection through the night."
            },
            {
              id: "after-prayer",              title: "After Prayer Dhikr (Adhkar After Salah)",              content: "Complete your prayers with prescribed remembrances. Subhanallah, Alhamdulillah, and Allahu Akbar enhance spiritual connection after worship."
            },
            {
              id: "travel",              title: "Travel Dhikr (Adhkar As-Safar)",              content: "Seek Allah's protection and blessing during journeys. Includes Dua for safe travels and remembrances for the protection of body and soul."
            },
            {
              id: "sleep",              title: "Before Sleep Dhikr (Adhkar Qabla An-Noom)",              content: "Prepare for restful sleep with nighttime remembrances. Includes Ayat Al-Kursi and other peaceful Dhikr to ensure protected and blessed rest."
            }
          ]}
        />
      </div>

      <div id="dhikr-display" data-section="dhikr-display">
        <ProductCardFour
          products={[
            {
              id: "morning-1",              name: "Morning Greeting",              variant: "Upon Waking",              price: "Arabic + English",              imageSrc: "http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg",              imageAlt: "Morning Dhikr"
            },
            {
              id: "mid-day-1",              name: "Midday Remembrance",              variant: "During Noon",              price: "Arabic + English",              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-tree-bark-through-magnifying-glass_23-2147776833.jpg",              imageAlt: "Midday Dhikr"
            },
            {
              id: "evening-1",              name: "Evening Reflection",              variant: "At Sunset",              price: "Arabic + English",              imageSrc: "http://img.b2bpic.net/free-photo/human-hands-open-palm-up-worship_1150-7243.jpg",              imageAlt: "Evening Dhikr"
            }
          ]}
          title="Today's Dhikr Highlights"
          description="Essential remembrances to practice today, categorized by time. Click on any Dhikr to view the full Arabic text with English translation."
          tag="Daily Practice"
          tagIcon={Sun}
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="search" data-section="search">
        <TextSplitAbout
          title="Search & Explore"
          description={[
            "Find any Dhikr instantly using our powerful search feature. Filter by category, time, or keyword to locate the exact remembrance you need.",            "Save your favorite Dhikr for quick access. Build your personal collection of meaningful remembrances for daily practice and spiritual growth."
          ]}
          useInvertedBackground={false}
          showBorder={false}
          buttons={[
            { text: "Start Searching", href: "#" }
          ]}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <MetricCardThree
          metrics={[
            { id: "peace", icon: Heart, title: "Inner Peace", value: "Find Calm" },
            { id: "growth", icon: Sprout, title: "Spiritual Growth", value: "Develop Daily" },
            { id: "connection", icon: Radio, title: "Divine Connection", value: "Strengthen Bond" },
            { id: "protection", icon: Shield, title: "Spiritual Protection", value: "Stay Protected" }
          ]}
          title="Why Daily Dhikr Matters"
          description="Regular remembrance of Allah brings peace, spiritual growth, and divine guidance into your daily life."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          faqs={[
            {
              id: "1",              title: "What is Dhikr?",              content: "Dhikr is the Islamic practice of remembering and glorifying Allah through specific phrases and supplications. It's a fundamental spiritual practice that brings Muslims closer to their faith and provides peace and tranquility."
            },
            {
              id: "2",              title: "How often should I perform Dhikr?",              content: "Dhikr can be performed at any time throughout the day. However, performing specific Dhikr in the morning and evening is highly recommended in Islamic tradition. You can also perform Dhikr after prayers and during moments of spiritual need."
            },
            {
              id: "3",              title: "Can I save my favorite Dhikr?",              content: "Yes! RemembGoal allows you to save your favorite remembrances for easy access. You can build a personalized collection that resonates with your spiritual journey and daily practice."
            },
            {
              id: "4",              title: "Is the translation accurate?",              content: "All translations on RemembGoal are carefully selected from trusted Islamic sources. We prioritize accuracy and clarity to ensure you understand the meaning and significance of each Dhikr."
            },
            {
              id: "5",              title: "Can I use RemembGoal on mobile?",              content: "Absolutely! RemembGoal is fully optimized for mobile devices. The clean, simple interface works beautifully on both phones and tablets for on-the-go spiritual practice."
            },
            {
              id: "6",              title: "Are there Dhikr for specific situations?",              content: "Yes! We provide Dhikr for various situations including morning, evening, travel, before sleep, after prayers, and many more. Our categorized collection helps you find the right remembrance for every moment."
            }
          ]}
          title="Frequently Asked Questions"
          description="Common questions about RemembGoal and how to use the platform effectively."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="RemembGoal"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}
