"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextAbout from "@/components/sections/about/TextAbout";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, Crown } from "lucide-react";

export default function PricingPage() {
  const navItems = [
    { name: "الرئيسية", id: "home" },
    { name: "الأدوات", id: "tools" },
    { name: "معالج الفيديو", id: "video-processor" },
    { name: "التسعير", id: "pricing" },
    { name: "الأسئلة الشائعة", id: "faq" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="AI Studio"
          button={{
            text: "ابدأ الآن",
            href: "/dashboard",
          }}
        />
      </div>

      <div id="pricing-intro" data-section="pricing-intro">
        <TextAbout
          tag="خطط مرنة"
          tagIcon={Sparkles}
          title="اختر الخطة المناسبة لك. جميع الخطط توفر قيمة استثنائية مع ضمان رضاك."
          useInvertedBackground={false}
          buttons={[
            { text: "ابدأ مجاناً", href: "/dashboard" },
          ]}
        />
      </div>

      <div id="pricing-plans" data-section="pricing-plans">
        <PricingCardFive
          title="خطط التسعير الشفافة والمرنة"
          description="اختر من مجموعة متنوعة من الخطط المصممة لتناسب جميع الاحتياجات والميزانيات"
          tag="التسعير"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "free",
              tag: "الخطة المجانية",
              price: "مجاني",
              period: "/الشهر",
              description: "ابدأ رحلتك مع الذكاء الاصطناعي بدون تكلفة. مثالية للتجربة والاستكشاف.",
              button: { text: "ابدأ الآن", href: "/dashboard" },
              featuresTitle: "المميزات:",
              features: [
                "100 محادثة شهرية",
                "10 صور مولدة شهرياً",
                "فيديو واحد شهرياً",
                "دعم البريد الإلكتروني الأساسي",
                "حد أقصى 5 مشاريع",
                "وصول محدود للميزات الجديدة",
              ],
            },
            {
              id: "pro",
              tag: "الخطة الاحترافية",
              tagIcon: Sparkles,
              price: "49",
              period: "/الشهر",
              description: "مثالية للمحترفين والشركات الصغيرة. الخطة الأكثر شعبية.",
              button: { text: "اشترك الآن", href: "/checkout?plan=pro" },
              featuresTitle: "المميزات:",
              features: [
                "محادثات غير محدودة",
                "500 صورة مولدة شهرياً",
                "معالجة 50 فيديو شهرياً",
                "دعم الأولوية عبر البريد الإلكتروني",
                "حد أقصى 50 مشروع",
                "تحليلات متقدمة",
                "واجهة برمجية (API)",
                "إزالة العلامات المائية",
              ],
            },
            {
              id: "enterprise",
              tag: "الخطة المؤسسية",
              tagIcon: Crown,
              price: "199",
              period: "/الشهر",
              description: "للمؤسسات الكبيرة. الحل الكامل مع دعم مخصص.",
              button: { text: "تواصل معنا", href: "/contact" },
              featuresTitle: "المميزات:",
              features: [
                "موارد معالجة غير محدودة",
                "أولوية عالية في المعالجة",
                "مدير حساب مخصص",
                "تدريب وتطوير مخصص",
                "دعم الهاتف 24/7",
                "تكامل مخصص",
                "سياسات الأمان المتقدمة",
                "عقود سنوية مخصصة",
                "استضافة خاصة",
              ],
            },
          ]}
        />
      </div>

      <div id="pricing-faq" data-section="pricing-faq">
        <FaqSplitText
          faqs={[
            {
              id: "1",
              title: "هل يمكنني تغيير الخطة لاحقاً؟",
              content: "نعم، يمكنك تغيير الخطة في أي وقت. إذا قمت بالترقية ستدفع الفرق الذي تم حسابه نسبياً. إذا قمت بالخفض ستحصل على رصيد للفترة المتبقية.",
            },
            {
              id: "2",
              title: "هل هناك عقود طويلة الأجل؟",
              content: "لا، جميع الخطط تعمل بنظام الاشتراك الشهري. لا توجد عقود طويلة الأجل إلزامية. للخطة المؤسسية، يمكننا مناقشة عقود سنوية مخصصة.",
            },
            {
              id: "3",
              title: "ما الفرق بين الخطط الثلاث؟",
              content: "الخطة المجانية للاستكشاف والتجربة. الخطة الاحترافية للمحترفين والشركات الصغيرة. الخطة المؤسسية للمؤسسات الكبيرة مع دعم مخصص.",
            },
            {
              id: "4",
              title: "هل هناك خصم للدفع السنوي؟",
              content: "نعم، الدفع السنوي يوفر 20% مقارنة بالدفع الشهري. اتصل بنا للحصول على عرض مخصص.",
            },
            {
              id: "5",
              title: "ما هي سياسة الاسترجاع؟",
              content: "نقدم ضمان استرجاع الأموال لمدة 30 يوم من تاريخ الاشتراك بدون أسئلة.",
            },
          ]}
          sideTitle="أسئلة شائعة عن التسعير"
          sideDescription="إجابات لأسئلتك حول الخطط والأسعار"
          textPosition="left"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "المنتج",
              items: [
                { label: "الأدوات", href: "/tools" },
                { label: "معالج الفيديو", href: "/video-processor" },
                { label: "التسعير", href: "/pricing" },
                { label: "الميزات", href: "/" },
              ],
            },
            {
              title: "الشركة",
              items: [
                { label: "حول الشركة", href: "/" },
                { label: "المدونة", href: "/blog" },
                { label: "الأخبار", href: "/news" },
                { label: "الوظائف", href: "/careers" },
              ],
            },
            {
              title: "الدعم",
              items: [
                { label: "مركز المساعدة", href: "/help" },
                { label: "التواصل معنا", href: "/contact" },
                { label: "الأسئلة الشائعة", href: "/pricing" },
                { label: "الحالة", href: "/status" },
              ],
            },
            {
              title: "المتابعة",
              items: [
                { label: "تويتر", href: "https://twitter.com" },
                { label: "فيسبوك", href: "https://facebook.com" },
                { label: "لينكدإن", href: "https://linkedin.com" },
                { label: "إنستاجرام", href: "https://instagram.com" },
              ],
            },
          ]}
          bottomLeftText="© 2025 AI Studio. جميع الحقوق محفوظة."
          bottomRightText="تم إنشاؤه بواسطة Webild"
        />
      </div>
    </ThemeProvider>
  );
}