"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBase from '@/components/sections/footer/FooterBase';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "About",          id: "/about"},
        {
          name: "Gallery",          id: "/gallery"},
        {
          name: "Track Order",          id: "/track-order"},
        {
          name: "Contact",          id: "/contact"},
      ]}
      brandName="Malavida"
    />
  </div>

  <div id="track-info" data-section="track-info">
      <TextAbout
      useInvertedBackground={true}
      title="Track Your Malavida Order"
      buttons={[
        {
          text: "Go to Tracking Portal",          href: "#",          onClick: () => alert('Redirecting to external tracking service...'),
          props: {},
        },
      ]}
      description="Easily follow the journey of your Malavida apparel from our studio to your doorstep. Enter your tracking number below to get real-time updates on your shipment status."
    />
  </div>

  <div id="delivery-metrics" data-section="delivery-metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Our Shipping Promise"
      tag="Reliable Delivery"
      metrics={[
        {
          id: "1",          value: "99.8%",          description: "On-Time Deliveries"},
        {
          id: "2",          value: "2-5",          description: "Days Average Shipping"},
        {
          id: "3",          value: "Global",          description: "Shipping Coverage"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "/about"},
            {
              label: "Our Story",              href: "/about"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Shop",          items: [
            {
              label: "Collections",              href: "/gallery"},
            {
              label: "New Arrivals",              href: "/gallery"},
            {
              label: "Sale",              href: "#"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "Contact Us",              href: "/contact"},
            {
              label: "Track Order",              href: "/track-order"},
            {
              label: "FAQ",              href: "/contact#faq"},
          ],
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/fashion-accessories-logo-collection_23-2148888014.jpg"
      logoAlt="Malavida Logo"
      logoText="Malavida"
      copyrightText="© 2024 Malavida. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
