"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { DM_Sans } from "next/font/google";
import { Feather, Lightbulb, BookOpen, Heart, MessageSquare, Gem } from "lucide-react";

const dmSans = DM_Sans({
  variable: "--font-dm-sans",  subsets: ["latin"],
});

const assetMap: Record<string, { url: string; alt: string }> = {
  "logo": { "url": "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y4xhfq", "alt": "whatsapp channel logo design" },
  "hero-main": { "url": "http://img.b2bpic.net/free-photo/angel-death-standing-white-costume_23-2147905756.jpg", "alt": "inspirational quotes arabic calligraphy" },
  "about-image": { "url": "http://img.b2bpic.net/free-photo/mobile-phone-blank-spiral-notebook-pencil-coffee-cup-house-model-wooden-desk_23-2148038658.jpg", "alt": "person writing inspirational quotes" },
  "feature-icon-1": { "url": "http://img.b2bpic.net/free-photo/paper-cut-out-yellow-light-bulb-blue-background_23-2147873510.jpg", "alt": "feather pen icon elegant" },
  "feature-icon-2": { "url": "http://img.b2bpic.net/free-photo/chat-message-front-side-white-background_187299-40133.jpg", "alt": "light bulb ideas icon creative" },
  "feature-icon-3": { "url": "http://img.b2bpic.net/free-photo/light-bulb-sticky-note-drawn-face-outline-with-chalk-blackboard_23-2147874003.jpg", "alt": "open book icon knowledge learning" },
  "testimonial-1-avatar": { "url": "http://img.b2bpic.net/free-photo/businessman-young-elegant-businessman-with-cup-hands_259150-58620.jpg", "alt": "arabic man portrait happy" },
  "testimonial-1-image": { "url": "http://img.b2bpic.net/free-photo/portrait-cute-smiling-young-social-media-content-creator-girl-records-video-digital-camera_1258-281552.jpg", "alt": "person reading phone whatsapp" },
  "testimonial-2-avatar": { "url": "http://img.b2bpic.net/free-photo/arabic-man-traditional-wear-smiling-showing-thumbs-up-standing-white-wall_141793-48098.jpg", "alt": "arabic woman portrait thoughtful" },
  "testimonial-2-image": { "url": "http://img.b2bpic.net/free-photo/note-encouragement-papr_23-2150105165.jpg", "alt": "person writing notes inspired" },
  "testimonial-3-avatar": { "url": "http://img.b2bpic.net/free-photo/two-indian-men-turbans-making-selfie_259150-59426.jpg", "alt": "arabic young man profile confident" },
  "testimonial-3-image": { "url": "http://img.b2bpic.net/free-photo/content-people-playing-cards-party_23-2147745124.jpg", "alt": "person sharing content phone" },
  "testimonial-4-avatar": { "url": "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg", "alt": "arabic woman smiling close up" },
  "testimonial-4-image": { "url": "http://img.b2bpic.net/free-photo/view-beach-sand-summertime-with-message-written-it_23-2151145633.jpg", "alt": "person meditating peaceful thoughts" },
  "testimonial-5-avatar": { "url": "http://img.b2bpic.net/free-photo/close-up-woman-with-glasses-library_23-2148680197.jpg", "alt": "arabic man thoughtful pose" },
  "testimonial-5-image": { "url": "http://img.b2bpic.net/free-photo/mentoring-coaching-tutor-guiding-helping-concept_53876-128048.jpg", "alt": "person reading book sunlight" },
  "social-logo-1": { "url": "http://img.b2bpic.net/free-photo/close-up-woman-choosing-costume-carnival-party_23-2148412877.jpg", "alt": "arabic calligraphy logo inspiration" },
  "social-logo-2": { "url": "http://img.b2bpic.net/free-vector/line-style-simple-business-logotype-template-set_1017-51615.jpg", "alt": "modern minimal logo design abstract" },
  "social-logo-3": { "url": "http://img.b2bpic.net/free-photo/floral-design-dark-black-background_23-2147881236.jpg", "alt": "floral pattern logo natural" },
  "social-logo-4": { "url": "http://img.b2bpic.net/free-photo/social-media-still-life-with-heart_23-2149019246.jpg", "alt": "star burst logo radiant" },
  "social-logo-5": { "url": "http://img.b2bpic.net/free-photo/balance-healthcare-healthy-life-meditation_53876-120645.jpg", "alt": "wave abstract logo fluid" },
  "social-logo-6": { "url": "http://img.b2bpic.net/free-photo/hand-arranging-growing-bars-business-growth-success-concept-pink-background-3d-rendering_56104-1471.jpg", "alt": "mountain peak logo adventure" },
  "social-logo-7": { "url": "http://img.b2bpic.net/free-photo/smiling-earth-held-by-hands-with-growing-roots_1308-186847.jpg", "alt": "hand holding plant logo growth" }
};

function getAssetUrl(id: string): string {
  return assetMap[id]?.url || `/${id}.jpg`;
}

function getAssetAlt(id: string, defaultAlt: string): string {
  return assetMap[id]?.alt || defaultAlt;
}

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav" className={dmSans.variable}>
        <NavbarLayoutFloatingOverlay
          brandName="أثر لايزول | Athar🤎"
          navItems={[
            { name: "الرئيسية", id: "#home" },
            { name: "من نحن", id: "#about" },
            { name: "ميزات", id: "#features" },
            { name: "شهادات", id: "#testimonials" },
            { name: "أسئلة شائعة", id: "#faq" },
            { name: "تواصل", id: "#contact" }
          ]}
          logoSrc={getAssetUrl("logo")}
          logoAlt={getAssetAlt("logo", "شعار أثر لايزول")}
        />
      </div>
      <div id="home" data-section="home" className={dmSans.variable}>
        <HeroSplit
          title="أثر لايزول | Athar🤎"
          description="قناتك للإلهام اليومي والعبارات التي تبقى في القلب. انضم إلينا لتجد كلمات تلامس روحك وتترك أثراً لا يمحى."
          background={{"variant":"plain"}}
          buttons={[
            { text: "اشترك الآن على واتساب", href: "https://whatsapp.com/channel/YOUR_CHANNEL_LINK_HERE" },
            { text: "اكتشف المزيد", href: "#about" }
          ]}
          mediaAnimation="hover-magnetic"
          imageSrc={getAssetUrl("hero-main")}
          imageAlt={getAssetAlt("hero-main", "صورة خلفية ملهمة")}
          imagePosition="right"
          fixedMediaHeight={true}
          useInvertedBackground={false}
        />
      </div>
      <div id="about" data-section="about" className={dmSans.variable}>
        <SplitAbout
          title="من نحن؟ وديع مطر وقناة أثر لايزول"
          description="نحن نؤمن بقوة الكلمة وتأثيرها الدائم. هنا، يقدم لكم وديع مطر محتوى فريداً من العبارات الملهمة والحكم العميقة التي تهدف إلى ترك بصمة إيجابية في حياتكم. هدفنا هو إثراء أرواحكم بكلمات تعيش معكم للأبد."
          bulletPoints={[
            { title: "محتوى حصري", description: "عبارات وخواطر لم تسمعها من قبل، منتقاة بعناية لروحك." },
            { title: "إلهام يومي", description: "جرعتك اليومية من الأمل والتفكير الإيجابي لتجميل يومك." },
            { title: "أثر دائم", description: "كلمات لا تُنسى تبقى في الذاكرة وتحدث فرقاً حقيقياً." }
          ]}
          mediaAnimation="hover-magnetic"
          textboxLayout="default"
          useInvertedBackground={true}
          imageSrc={getAssetUrl("about-image")}
          imageAlt={getAssetAlt("about-image", "وديع مطر يكتب عبارات ملهمة")}
          imagePosition="left"
        />
      </div>
      <div id="features" data-section="features" className={dmSans.variable}>
        <FeatureBorderGlow
          title="ما يميز قناتنا"
          description="نقدم لكم محتوى فريداً ومميزاً يلامس القلب والعقل، مصمماً بعناية ليناسب ذوقكم الرفيع ويترك أثراً إيجابياً دائماً في حياتكم."
          features={[
            { icon: Feather, title: "جودة المحتوى", description: "نختار كل عبارة بعناية فائقة لضمان العمق والتأثير." },
            { icon: Lightbulb, title: "إلهام متجدد", description: "محتوى يومي جديد يضيء دربك ويجدد روحك بالإيجابية." },
            { icon: BookOpen, title: "أثر لايزول", description: "رسائل خالدة تبقى في ذاكرتك لترافقك في كل مراحل حياتك." },
            { icon: Heart, title: "لمسة شخصية", description: "عبارات تعكس تجارب وديع مطر ومصاغة بأسلوبه الفريد." },
            { icon: MessageSquare, title: "مجتمع داعم", description: "انضم إلى مجتمع من محبي الكلمة والإلهام." },
            { icon: Gem, title: "تصميم أنيق", description: "نقدم العبارات بتصاميم بصرية هادئة ومريحة للعين." }
          ]}
          animationType="none"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="testimonials" data-section="testimonials" className={dmSans.variable}>
        <TestimonialCardFive
          title="ماذا يقول مشتركونا"
          description="شهادات من قلوب متابعينا الذين وجدوا الإلهام والراحة في كلماتنا، وشعروا بالأثر الحقيقي لقناة أثر لايزول."
          testimonials={[
            { id: "1", name: "سارة المحمد", date: "2024-03-10", title: "إلهام يومي لا يقدر بثمن", quote: "قناة أثر لايزول أصبحت جزءاً لا يتجزأ من روتيني الصباحي. كل عبارة هي جرعة من الإيجابية تمدني بالطاقة ليومي. شكراً وديع مطر على هذا المحتوى الرائع.", tag: "ملهمة", avatarSrc: getAssetUrl("testimonial-1-avatar"), avatarAlt: getAssetAlt("testimonial-1-avatar", "صورة سارة المحمد"), imageSrc: getAssetUrl("testimonial-1-image"), imageAlt: getAssetAlt("testimonial-1-image", "امرأة سعيدة تتصفح هاتفها") },
            { id: "2", name: "أحمد الزهراني", date: "2024-02-25", title: "كلمات تلامس الروح", quote: "لطالما بحثت عن محتوى عميق ومؤثر، ووجدته هنا في أثر لايزول. كلمات الأستاذ وديع مطر تعبر عما يجول بخاطري وتمنحني منظوراً جديداً للحياة.", tag: "عميقة", avatarSrc: getAssetUrl("testimonial-2-avatar"), avatarAlt: getAssetAlt("testimonial-2-avatar", "صورة أحمد الزهراني"), imageSrc: getAssetUrl("testimonial-2-image"), imageAlt: getAssetAlt("testimonial-2-image", "رجل يكتب في دفتر") },
            { id: "3", name: "ليلى الفهاد", date: "2024-03-01", title: "راحة نفسية وإيجابية", quote: "في خضم ضغوط الحياة، أجد في عبارات أثر لايزول ملاذاً للهدوء والإيجابية. إنها تذكرني دائماً بالجمال الكامن في الحياة وتمنحني القوة للمضي قدماً.", tag: "مريحة", avatarSrc: getAssetUrl("testimonial-3-avatar"), avatarAlt: getAssetAlt("testimonial-3-avatar", "صورة ليلى الفهاد"), imageSrc: getAssetUrl("testimonial-3-image"), imageAlt: getAssetAlt("testimonial-3-image", "امرأة تتأمل في هدوء") },
            { id: "4", name: "خالد المنصور", date: "2024-02-18", title: "مصدر للإلهام والتفكير", quote: "قناة وديع مطر ليست مجرد عبارات، بل هي دروس في الحياة. كل رسالة تدفعني للتفكير والتأمل في جوانب لم أكن لألتفت إليها. محتوى قيم جداً.", tag: "فكرية", avatarSrc: getAssetUrl("testimonial-4-avatar"), avatarAlt: getAssetAlt("testimonial-4-avatar", "صورة خالد المنصور"), imageSrc: getAssetUrl("testimonial-4-image"), imageAlt: getAssetAlt("testimonial-4-image", "رجل يقرأ كتاباً") },
            { id: "5", name: "ريم القحطاني", date: "2024-03-05", title: "أثر لا يمحى فعلاً", quote: "أثر لايزول هو الاسم على مسمى. الكلمات التي أقرأها هنا تبقى معي طويلاً وتؤثر في قراراتي ومزاجي بشكل إيجابي. شكراً لهذا العطاء المستمر.", tag: "مؤثرة", avatarSrc: getAssetUrl("testimonial-5-avatar"), avatarAlt: getAssetAlt("testimonial-5-avatar", "صورة ريم القحطاني"), imageSrc: getAssetUrl("testimonial-5-image"), imageAlt: getAssetAlt("testimonial-5-image", "امرأة تبتسم وهي تحمل هاتفها") }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="social-proof" data-section="social-proof" className={dmSans.variable}>
        <SocialProofOne
          title="شركاء الإلهام"
          description="نتشرف بالتعاون مع مؤثرين ومنصات مختلفة لنشر رسالة الأثر الدائم والكلمة الطيبة على نطاق أوسع."
          names={[
            "مؤثرون",            "صفحات أدبية",            "مدونون",            "منصات إعلامية",            "مجموعات ثقافية",            "جهات خيرية",            "مؤسسات تعليمية"
          ]}
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          textboxLayout="default"
        />
      </div>
      <div id="faq" data-section="faq" className={dmSans.variable}>
        <FaqDouble
          title="أسئلة شائعة"
          description="كل ما تود معرفته عن قناة أثر لايزول، طريقة عملنا، وكيف يمكنك الاستفادة القصوى من محتوانا."
          faqs={[
            { id: "q1", title: "كيف يمكنني الانضمام لقناة أثر لايزول على واتساب؟", content: "يمكنك الانضمام بسهولة عن طريق الضغط على زر 'اشترك الآن' الموجود في القسم الرئيسي من هذا الموقع. سيتم توجيهك مباشرة إلى القناة." },
            { id: "q2", title: "ما نوع المحتوى الذي تقدمه القناة؟", content: "نقدم عبارات يومية ملهمة، خواطر عميقة، مقتبسات حكيمة، ورسائل إيجابية تهدف إلى إثراء حياتكم وترك أثر دائم في نفوسكم." },
            { id: "q3", title: "هل المحتوى مجاني؟", content: "نعم، جميع العبارات والمحتوى المقدم عبر قناة أثر لايزول مجاني بالكامل ومتاح للجميع." },
            { id: "q4", title: "كم مرة يتم نشر المحتوى؟", content: "نحرص على نشر محتوى جديد وملهم بشكل يومي، لضمان حصولكم على جرعة مستمرة من الإيجابية." },
            { id: "q5", title: "هل يمكنني مشاركة المحتوى من القناة؟", content: "بالتأكيد! نشجعكم على مشاركة العبارات مع أصدقائكم وعائلاتكم لنشر الأثر الإيجابي لأثر لايزول." },
            { id: "q6", title: "من هو وديع مطر؟", content: "وديع مطر هو صاحب القناة والمبدع وراء العبارات والخواطر التي تلامس القلوب، يسعى لنشر الإيجابية والأثر الدائم من خلال كلماته." }
          ]}
          faqsAnimation="hover-magnetic"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="contact" data-section="contact" className={dmSans.variable}>
        <ContactCenter
          tag="تواصل معنا"
          title="ابق على اطلاع دائم بجديدنا"
          description="اشترك الآن في قائمتنا البريدية لتصلك أحدث العبارات والإلهامات مباشرة إلى بريدك الإلكتروني، ولتكون أول من يعلم عن أي جديد من وديع مطر."
          background={{"variant":"plain"}}
          useInvertedBackground={false}
          inputPlaceholder="أدخل بريدك الإلكتروني"
          buttonText="اشترك"
          termsText="بالاشتراك، أنت توافق على سياسة الخصوصية."
        />
      </div>
      <div id="footer" data-section="footer" className={dmSans.variable}>
        <FooterBase
          logoText="أثر لايزول | Athar🤎"
          columns={[
            { title: "الروابط السريعة", items: [{ label: "الرئيسية", href: "#home" }, { label: "من نحن", href: "#about" }, { label: "الميزات", href: "#features" }] },
            { title: "المساعدة", items: [{ label: "الأسئلة الشائعة", href: "#faq" }, { label: "تواصل معنا", href: "#contact" }] },
            { title: "تابعنا", items: [{ label: "واتساب", href: "https://whatsapp.com/channel/YOUR_CHANNEL_LINK_HERE" }, { label: "انستغرام", href: "#" }, { label: "تويتر", href: "#" }] }
          ]}
          copyrightText="© 2024 أثر لايزول. جميع الحقوق محفوظة."
        />
      </div>
    </ThemeProvider>
  );
}