"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { CheckCircle, CreditCard, Folder } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeLargeTitles"
        background="blurBottom"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Главная",          id: "/"},
        {
          name: "О нас",          id: "/about"},
        {
          name: "Функции",          id: "/features"},
        {
          name: "Цены",          id: "/pricing"},
        {
          name: "Аккаунт",          id: "/account"},
        {
          name: "Контакты",          id: "/contact"},
      ]}
      button={{
        text: "Войти",        href: "/register"}}
      brandName="My Own Platform"
    />
  </div>

  <div id="account-features" data-section="account-features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Управление Профилем",          description: "Обновляйте личные данные, меняйте пароль и настраивайте уведомления в любое время.",          imageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg",          imageAlt: "Управление профилем"},
        {
          title: "История Платежей",          description: "Просматривайте все ваши транзакции, скачивайте инвойсы и управляйте способами оплаты.",          imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-cup-coffee-technological-devices_1232-475.jpg",          imageAlt: "История платежей"},
        {
          title: "Мои Подписки",          description: "Управляйте активными подписками, изменяйте тарифные планы или отменяйте их.",          imageSrc: "http://img.b2bpic.net/free-photo/crop-man-choosing-streaming-service-account_23-2147930580.jpg",          imageAlt: "Мои подписки"},
      ]}
      title="Ваш Личный Кабинет"
      description="Все, что вам нужно для управления вашим профилем, подписками и деятельностью на платформе, в одном удобном месте."
      tag="Панель Управления"
    />
  </div>

  <div id="account-metrics" data-section="account-metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      carouselMode="buttons"
      metrics={[
        {
          id: "1",          value: "120",          title: "Проектов",          description: "Количество проектов, которые вы активно ведете на платформе.",          icon: Folder,
        },
        {
          id: "2",          value: "500+",          title: "Транзакций",          description: "Общее количество успешных платежей и транзакций.",          icon: CreditCard,
        },
        {
          id: "3",          value: "95%",          title: "Успешности",          description: "Показатель успешности ваших операций и проектов.",          icon: CheckCircle,
        },
      ]}
      title="Ваши Показатели"
      description="Отслеживайте вашу активность и ключевые статистические данные в личном кабинете."
      tag="Ваша Активность"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/shiny-blue-computer-graphic-backdrop-with-defocused-motion-generated-by-ai_188544-9599.jpg?_wi=6"
      imageAlt="Абстрактный цифровой пейзаж"
      logoText="My Own Platform"
      columns={[
        {
          title: "Навигация",          items: [
            {
              label: "Главная",              href: "/"},
            {
              label: "О нас",              href: "/about"},
            {
              label: "Функции",              href: "/features"},
            {
              label: "Цены",              href: "/pricing"},
          ],
        },
        {
          title: "Аккаунт",          items: [
            {
              label: "Мой Аккаунт",              href: "/account"},
            {
              label: "Регистрация",              href: "/register"},
            {
              label: "Админ Панель",              href: "/admin"},
          ],
        },
        {
          title: "Поддержка",          items: [
            {
              label: "Контакты",              href: "/contact"},
            {
              label: "FAQ",              href: "/#faq"}
          ],
        },
      ]}
      copyrightText="© 2024 My Own Platform | Все права защищены."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}