"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  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: "ہوم",          id: "#home"},
        {
          name: "ہمارے بارے میں",          id: "#about"},
        {
          name: "ستون",          id: "#pillars"},
        {
          name: "اسلامی کیلنڈر",          id: "#calendar"},
        {
          name: "تعریفیں",          id: "#testimonials"},
        {
          name: "عمومی سوالات",          id: "#faq"},
        {
          name: "بلاگ",          id: "#blog"},
        {
          name: "رابطہ کریں",          id: "#contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
      brandName="نور الاسلام"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardScroll
      background={{
        variant: "radial-gradient"}}
      title="اپنے اسلامی علم کو بڑھائیں"
      description="روزانہ کی نمازوں، مقدس دعاؤں، گہری سورتوں اور اسلام کی بنیادی تعلیمات پر جامع رہنمائی دریافت کریں۔ گہرے ایمان کی طرف آپ کا سفر یہاں سے شروع ہوتا ہے۔"
      tag="نور الاسلام"
      tagAnimation="slide-up"
      buttons={[
        {
          text: "سیکھنا شروع کریں",          href: "#about"},
        {
          text: "وسائل دریافت کریں",          href: "#blog"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/ancient-doors-cathedral-turquoise-old-doors_169016-21644.jpg"
      imageAlt="Serene mosque interior with light streaming in"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      imagePosition="right"
      title="ہمارا مشن: اسلام کی راہ کو روشن کرنا"
      description="نور الاسلام میں، ہم ہر ایک کے لیے مستند اور قابل رسائی اسلامی علم فراہم کرنے کے لیے وقف ہیں۔ ہمارا پلیٹ فارم دنیا بھر کے مسلمانوں کے لیے ایک قابل اعتماد وسیلہ ہے، جو ہمارے دین اور طریقوں کی گہری سمجھ کو فروغ دیتا ہے۔"
      bulletPoints={[
        {
          title: "جامع تعلیمات",          description: "قرآن، حدیث اور اسلامی فقہ پر گہرے اسباق دریافت کریں۔"},
        {
          title: "روزانہ روحانی رہنمائی",          description: "اللہ کے ساتھ اپنے روزانہ کے تعلق کو مضبوط کرنے کے لیے نماز کے اوقات، دعاؤں اور ذکر کے وسائل تک رسائی حاصل کریں۔"},
        {
          title: "عالمی برادری",          description: "بصیرت اور تعاون کا اشتراک کرنے کے لیے سیکھنے والوں اور علماء کی ایک متحرک برادری میں شامل ہوں۔"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-holding-crucifix_23-2149301765.jpg?_wi=1"
      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: "پانچ وقت کی نماز (صلوٰۃ)",          subtitle: "وضو، رکعات کی تعداد اور ضروری دعاؤں سمیت پانچوں وقت کی نماز ادا کرنے کے لیے تفصیلی رہنمائی۔",          category: "عبادت",          value: "رہنمائی"},
        {
          id: "dua",          title: "دلی دعائیں (التجائیں)",          subtitle: "ہر موقع کے لیے دعاؤں کا ایک وسیع مجموعہ، صبح کی دعاؤں سے لے کر مغفرت اور برکت مانگنے تک۔",          category: "دعا",          value: "برکات"},
        {
          id: "quranic-surahs",          title: "گہری قرآنی سورتیں",          subtitle: "الفاتحہ، یٰسین، الرحمن، البقرہ، اور بہت سی دیگر طاقتور سورتوں کے معنی اور تلاوت کو تفسیر کے ساتھ سیکھیں۔",          category: "قرآن",          value: "حکمت"},
      ]}
      title="اسلامی علم کے اہم ستون"
      description="روزانہ کی عبادت سے لے کر روحانی غذائیت تک، ہمارے منظم مواد کے ساتھ اسلام کے بنیادی پہلوؤں میں گہرائی سے داخل ہوں۔"
    />
  </div>

  <div id="calendar" data-section="calendar">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "hajj",          value: "حج",          title: "روحانی سفر",          items: [
            "حج ادا کرنے کے لیے جامع رہنمائی۔",            "ہر رسم کی اہمیت کی وضاحت۔",            "حجاج کرام کے لیے نکات۔"],
        },
        {
          id: "umrah",          value: "عمرہ",          title: "چھوٹا حج",          items: [
            "عمرہ کے لیے قدم بہ قدم ہدایات۔",            "عمرہ کے لیے تجویز کردہ دعائیں.",            "مقامات کا تاریخی پس منظر۔"],
        },
        {
          id: "ramadan",          value: "رمضان",          title: "روزوں کا مہینہ",          items: [
            "روزے کے قواعد و فضائل۔",            "افطار اور سحری کی رہنمائی۔",            "لیلۃ القدر کی بصیرتیں۔"],
        },
        {
          id: "zakat",          value: "زکوٰۃ و فطرہ",          title: "صدقہ و پاکیزگی",          items: [
            "زکوٰۃ اور فطرہ کے لیے حساب کتاب۔",            "اسلام میں دینے کی اہمیت۔",            "تقسیم کے لیے رہنما اصول۔"],
        },
      ]}
      title="اسلامی کیلنڈر اور برکات"
      description="اسلامی کیلنڈر میں ہر مہینے کی اہمیت اور ان سے وابستہ منفرد برکات اور طریقوں کو سمجھیں، بشمول حج، عمرہ اور رمضان۔"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Aisha Rahman",          handle: "@AishaR",          testimonial: "نور الاسلام نے میرے ایمان کی سمجھ کو بدل دیا ہے۔ نمازوں اور سورتوں کی تفصیلی وضاحتیں انمول ہیں۔ واقعی ایک نعمت!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/muslim-woman-wearing-pink-sweater_273609-22156.jpg",          imageAlt: "Portrait of Aisha Rahman"},
        {
          id: "2",          name: "Omar Khan",          handle: "@OmarK_Learns",          testimonial: "مجھے ہمیشہ زکوٰۃ کو سمجھنے میں مشکل پیش آتی تھی، لیکن یہاں کی واضح رہنما اصولوں نے اسے بہت آسان بنا دیا۔ مستند علم کے خواہشمند ہر شخص کے لیے انتہائی سفارش کی جاتی ہے۔",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-man-posing-looking-directly_114579-79351.jpg",          imageAlt: "Portrait of Omar Khan"},
        {
          id: "3",          name: "Fatima Ali",          handle: "@FatimaA",          testimonial: "حج اور عمرہ کی رہنما اصول ناقابل یقین حد تک جامع ہیں۔ اب میں اپنے حج کے لیے بہت زیادہ تیار محسوس کرتی ہوں، ماشاءاللہ!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/redhead-young-female-smiling-camera-red-background_23-2148183393.jpg",          imageAlt: "Portrait of Fatima Ali"},
        {
          id: "4",          name: "Ahmed Hassan",          handle: "@AhmedH",          testimonial: "یہ پلیٹ فارم دعاؤں اور ان کی اہمیت کو سیکھنے کے لیے ایک خزانہ ہے۔ اس نے میری روزانہ کی روحانی مشق کو نمایاں طور پر گہرا کیا ہے۔",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-with-laptop_23-2149122766.jpg",          imageAlt: "Portrait of Ahmed Hassan"},
        {
          id: "5",          name: "Zahra Malik",          handle: "@ZahraM",          testimonial: "ایک نئے مسلمان کے طور پر، نور الاسلام ایک ضروری رہنما رہا ہے۔ پیچیدہ موضوعات کے لیے سیدھا سادہ طریقہ کار وہی ہے جس کی مجھے ضرورت تھی۔",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-fingers-crossed-raising-head-while-closing-eyes-beige-jacket-cap-looking-serious-front-view_176474-47692.jpg",          imageAlt: "Portrait of Zahra Malik"},
      ]}
      showRating={true}
      title="ہمارے سیکھنے والے کیا کہتے ہیں"
      description="ان افراد سے سنیں جن کی زندگیوں پر نور الاسلام کی طرف سے فراہم کردہ جامع اسلامی علم اور رہنمائی نے مثبت اثر ڈالا ہے۔"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "prayer-times",          title: "نماز کے صحیح اوقات کیسے تلاش کروں؟",          content: "ہمارا پلیٹ فارم آپ کے مقام کی بنیاد پر صحیح اوقات فراہم کرنے کے لیے عالمی نماز کے وقت کی API کے ساتھ مربوط ہے۔ آپ ہر نماز کے لیے اطلاعات ترتیب دے سکتے ہیں۔"},
        {
          id: "quran-recitation",          title: "کیا قرآن کی تلاوت سیکھنے کے لیے وسائل موجود ہیں؟",          content: "جی ہاں، ہم درست تلفظ اور سمجھ میں مدد کے لیے معروف قاریوں کی آڈیو تلاوتیں، نیز ترجمہ اور تشریح پیش کرتے ہیں۔"},
        {
          id: "islamic-calendar",          title: "اسلامی کیلنڈر کی کیا اہمیت ہے؟",          content: "اسلامی کیلنڈر، یا ہجری کیلنڈر، ایک قمری کیلنڈر ہے جو اسلامی تہواروں اور رسومات، جیسے رمضان اور حج کی تاریخوں کا تعین کرنے کے لیے استعمال ہوتا ہے۔"},
        {
          id: "zakat-calculation",          title: "میں اپنی زکوٰۃ کا حساب کیسے لگاؤں؟",          content: "ہم آپ کے اثاثوں اور آمدنی کی بنیاد پر آپ کی زکوٰۃ کی ذمہ داریوں کا تعین کرنے میں مدد کے لیے تفصیلی رہنما اصول اور استعمال میں آسان کیلکولیٹر فراہم کرتے ہیں۔"},
      ]}
      sideTitle="عمومی سوالات"
      sideDescription="اسلامی طریقوں، پلیٹ فارم، اور مزید کے بارے میں عام سوالات کے جوابات تلاش کریں۔"
      faqsAnimation="slide-up"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="ہمارے اسلامی علم کے بلاگ کو دریافت کریں"
      description="اسلامی تعلیمات، تاریخی بصیرت، اور عصری مسائل پر ہمارے تازہ ترین مضامین کے ساتھ باخبر اور متاثر رہیں۔"
      blogs={[
        {
          id: "hajj-journey",          category: "حج",          title: "حج کا روحانی سفر: ایک قدم بہ قدم رہنمائی",          excerpt: "ایمان کے ایک گہرے سفر پر روانہ ہوں۔ یہ مضمون آپ کو حج کے ہر قدم، اس کی اہمیت اور روحانی تیاری کے بارے میں رہنمائی کرتا ہے۔",          imageSrc: "http://img.b2bpic.net/free-photo/preparation-ramadan-tradition_23-2151925280.jpg",          imageAlt: "Pilgrims circumambulating the Kaaba",          authorName: "ڈاکٹر امینہ یوسف",          authorAvatar: "http://img.b2bpic.net/free-photo/front-view-male-student-striped-shirt-wearing-yellow-backpack-holding-books-light-blue-wall_140725-46783.jpg",          date: "12 جولائی، 2024"},
        {
          id: "ramadan-blessings",          category: "رمضان",          title: "رمضان میں برکات کو زیادہ سے زیادہ کرنا: روزے سے آگے",          excerpt: "رمضان صرف کھانے پینے سے پرہیز کا نام نہیں ہے۔ نماز، صدقہ اور غور و فکر کے ذریعے اس کے روحانی انعامات کو مکمل طور پر کیسے حاصل کیا جائے، دریافت کریں۔",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-dried-fruits-with-different-raisins-snacks-grey-space_140725-76077.jpg",          imageAlt: "Family sharing Iftar meal during Ramadan",          authorName: "شیخ خالد مرزا",          authorAvatar: "http://img.b2bpic.net/free-photo/portrait-middle-aged-man-holding-book-head-as-house-roof-shirt-looking-hesitant-front-view_176474-55056.jpg",          date: "20 مارچ، 2024"},
        {
          id: "zakat-principles",          category: "صدقہ",          title: "زکوٰۃ اور فطرہ کو سمجھنا: اصول اور عمل",          excerpt: "زکوٰۃ اور فطرہ کی ذمہ داری، ان کے حساب کتاب، اور وہ کیسے دولت کو پاک کرتے ہیں اور معاشرے کو فائدہ پہنچاتے ہیں، کے بارے میں ایک گہری بصیرت۔",          imageSrc: "http://img.b2bpic.net/free-photo/person-giving-chocolate-pieces-foil-wooden-backdrop_23-2147890176.jpg",          imageAlt: "Hands giving and receiving charity",          authorName: "سسٹر عائشہ بلال",          authorAvatar: "http://img.b2bpic.net/free-photo/optimistic-lovely-muslim-woman-clenches-fist-closes-eyes-from-pleasure_273609-25352.jpg",          date: "15 فروری، 2024"},
        {
          id: "quran-reflection",          category: "اسلامی علم",          title: "قرآن پاک میں تدبر: معنی اور فہم کی گہرائی",          excerpt: "قرآن پاک کا گہرائی سے مطالعہ کیسے کیا جائے اور اس کے معانی کو اپنی زندگی میں کیسے شامل کیا جائے۔",          imageSrc: "http://img.b2bpic.net/free-photo/holy-quran-with-arabic-rosary_23-2148710928.jpg",          imageAlt: "قرآن پاک اور تسبیح",          authorName: "مفتی احمد رضا",          authorAvatar: "http://img.b2bpic.net/free-photo/young-man-with-dark-hair-beard-green-hoodie-glasses_140725-45269.jpg",          date: "10 اگست، 2024"
        }
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="رابطہ کریں"
      title="نور الاسلام سے رابطہ کریں"
      description="سوالات ہیں یا مدد کی ضرورت ہے؟ ہمیں ایک پیغام بھیجیں، اور ہم آپ کے اسلامی علم کے سفر میں مدد کے لیے فوری طور پر آپ سے رابطہ کریں گے۔"
      tagAnimation="slide-up"
      inputPlaceholder="اپنا ای میل ایڈریس درج کریں"
      buttonText="استفسار جمع کروائیں"
      termsText="جمع کرانے سے، آپ ہماری رازداری کی پالیسی اور سروس کی شرائط سے اتفاق کرتے ہیں۔"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "دریافت کریں",          items: [
            {
              label: "نمازیں",              href: "#pillars"},
            {
              label: "سورتیں",              href: "#pillars"},
            {
              label: "حج و عمرہ",              href: "#calendar"},
            {
              label: "رمضان",              href: "#calendar"},
            {
              label: "زکوٰۃ",              href: "#calendar"},
          ],
        },
        {
          title: "وسائل",          items: [
            {
              label: "ہمارے بارے میں",              href: "#about"},
            {
              label: "بلاگ",              href: "#blog"},
            {
              label: "عمومی سوالات",              href: "#faq"},
            {
              label: "تعریفیں",              href: "#testimonials"},
          ],
        },
        {
          title: "قانونی",          items: [
            {
              label: "رازداری کی پالیسی",              href: "#"},
            {
              label: "سروس کی شرائط",              href: "#"},
          ],
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
      logoText="نور الاسلام"
      copyrightText="© 2024 نور الاسلام۔ تمام حقوق محفوظ ہیں۔"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
