"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import { AlertTriangle, Box, Package, ShoppingCart, Star, Wallet, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Overview",          id: "#overview"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Analytics",          id: "#analytics"},
        {
          name: "Modules",          id: "#modules"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Support",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/fashion-repair-service-logo-design_23-2150253045.jpg"
      logoAlt="KHATWA Logo"
      brandName="KHATWA"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="KHATWA"
      description="A comprehensive digital platform designed to empower your e-commerce business. Streamline operations and drive growth with our intuitive solutions."
      buttons={[
        {
          text: "Explore Our Platform",          href: "#features"},
        {
          text: "Request Demo",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-vector/elegant-design-car-rental-business-infographic_23-2149235348.jpg"
      imageAlt="Digital platform dashboard overview with analytics and business data"
    />
  </div>

  <div id="overview" data-section="overview">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Streamlined Operations for Your E-commerce Business"
      description="The KHATWA platform provides complete control over your inventory, orders, and customer data with a clean, responsive, and multilingual interface. Focus on growth while we handle the operational complexity."
      metrics={[
        {
          value: "24/7",          title: "Uptime"},
        {
          value: "JOD",          title: "Local Currency"},
        {
          value: "EN/AR",          title: "Language Support"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg"
      imageAlt="Dashboard showing sales metrics and platform overview"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      features={[
        {
          title: "Product Catalog Management (CRUD)",          description: "Add, edit, and manage your product catalog with multi-language (EN/AR) descriptions, detailed categories, pricing, stock levels, and multiple images. Set primary images, reorder, and delete with ease.",          imageSrc: "http://img.b2bpic.net/free-photo/mobile-shopping-experience_23-2151952959.jpg",          imageAlt: "Product management interface",          titleImageSrc: "http://img.b2bpic.net/free-photo/multicultural-team-women-leaders-hold-online-conference-call_482257-123708.jpg",          buttonText: "Learn More"},
        {
          title: "Order Fulfillment & Tracking",          description: "View and manage all customer orders, update statuses (New, Confirmed, Shipped, Delivered, Cancelled), and track payment methods. Access full order details and customer information.",          imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg",          imageAlt: "Order management interface",          titleImageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg",          buttonText: "View Details"},
      ]}
      title="Comprehensive E-commerce Platform Capabilities"
      description="Unlock powerful tools to manage your products, orders, and customer base effortlessly. From detailed listings to real-time tracking, KHATWA has you covered."
    />
  </div>

  <div id="analytics" data-section="analytics">
      <MetricCardThree
      textboxLayout="default"
      useInvertedBackground={true}
      animationType="slide-up"
      metrics={[
        {
          id: "total-sales",          icon: Wallet,
          title: "Total Sales",          value: "250,000 JOD"},
        {
          id: "orders-today",          icon: ShoppingCart,
          title: "Orders Today",          value: "45"},
        {
          id: "pending-orders",          icon: Package,
          title: "Pending Orders",          value: "12"},
        {
          id: "low-stock",          icon: AlertTriangle,
          title: "Low Stock Items",          value: "7"},
        {
          id: "total-products",          icon: Box,
          title: "Total Products",          value: "120"},
      ]}
      title="Real-time Business Performance Analytics"
      description="Keep a pulse on your business with key performance indicators and insightful reports. Track total sales, daily orders, low-stock items, and more, all from your dashboard."
    />
  </div>

  <div id="modules" data-section="modules">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "core-modules",          badge: "Standard",          badgeIcon: Star,
          price: "Included",          subtitle: "Essential for daily operations",          buttons: [
            {
              text: "View Demo"},
          ],
          features: [
            "Dashboard & KPIs",            "Product CRUD (EN/AR)",            "Order Management",            "Categories & Collections",            "Basic Settings"],
        },
        {
          id: "advanced-modules",          badge: "Premium",          badgeIcon: Zap,
          price: "Upgrade",          subtitle: "Enhanced control and customization",          buttons: [
            {
              text: "Contact Sales"},
          ],
          features: [
            "All Standard features",            "Discounts & Coupons",            "Customer Management",            "Advanced Shipping Rules",            "Announcement Bar"],
        },
      ]}
      title="KHATWA Platform Modules"
      description="The KHATWA platform comes packed with essential modules to give you full control over your e-commerce operations. From product listings to global store settings, manage everything in one place."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "What payment methods does the platform support?",          content: "The KHATWA platform supports Cash on Delivery (COD) and CliQ, the local Jordanian instant bank transfer method."},
        {
          id: "faq-2",          title: "Can I manage product descriptions in Arabic?",          content: "Yes, the platform supports dual language inputs (English and Arabic) for product names, descriptions, and other store-facing text fields."},
        {
          id: "faq-3",          title: "How are shipping fees handled?",          content: "You can set a free-shipping threshold, a flat shipping fee, and optional per-area fees for different Jordan governorates directly from the platform settings."},
        {
          id: "faq-4",          title: "Is the platform mobile-responsive?",          content: "Absolutely. The KHATWA platform is fully responsive, with a collapsible sidebar that adapts to mobile and tablet devices for seamless management on the go."}
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about the KHATWA platform."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      text="Ready to streamline your e-commerce operations? Contact us for a demo or support."
      buttons={[
        {
          text: "Get in Touch",          href: "mailto:support@khatwa.com"},
        {
          text: "Call Us",          href: "tel:+9627XXXXXXXX"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Quick Links",          items: [
            {
              label: "Platform Overview",              href: "#hero"},
            {
              label: "Features",              href: "#features"},
            {
              label: "Support",              href: "#contact"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About KHATWA",              href: "https://www.khatwa.com/about"},
            {
              label: "Contact Store",              href: "https://www.khatwa.com/contact"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "/privacy-policy"},
            {
              label: "Terms of Service",              href: "/terms-of-service"},
          ],
        },
      ]}
      bottomLeftText="© 2024 KHATWA. All rights reserved."
      bottomRightText="Built for E-commerce in Jordan"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}