"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { Award, Clock, Lightbulb } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Plan",
          id: "/plan",
        },
        {
          name: "Settings",
          id: "/settings",
        },
        {
          name: "Account",
          id: "/account",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/education-business-logo-template-branding-design-vector-learning-institution-text_53876-151216.jpg"
      logoAlt="StudyBalance Logo"
      brandName="StudyBalance"
      bottomLeftText="💰 Streaks"
      bottomRightText="❓ Help"
      button={{
        text: "Log In",
        href: "/account",
      }}
    />
  </div>

  <div id="account-dashboard" data-section="account-dashboard">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Welcome to Your Personalized Account Dashboard"
      description="Your StudyBalance account is the central hub for all your academic activities. Track your progress, manage your study plans, customize your profile, and explore new features tailored to your learning journey."
      bulletPoints={[
        {
          title: "Overview of Progress",
          description: "See your study streaks, earned coins, and overall learning achievements at a glance.",
        },
        {
          title: "Manage Study Plans",
          description: "Access, modify, and create new study plans to stay on top of your academic goals.",
        },
        {
          title: "Profile Customization",
          description: "Update your personal information, settings, and avatar preferences.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/college-students-cramming-outdoor_23-2149649371.jpg"
      imageAlt="Student account dashboard overview"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="account-metrics" data-section="account-metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",
          value: "150+",
          title: "Study Hours",
          description: "Total hours spent actively studying on the platform this month.",
          icon: Clock,
        },
        {
          id: "2",
          value: "85%",
          title: "Average Quiz Score",
          description: "Your average performance across all completed quizzes and assessments.",
          icon: Lightbulb,
        },
        {
          id: "3",
          value: "20+",
          title: "Study Streaks",
          description: "Consecutive days you've engaged with your study plans and materials.",
          icon: Award,
        },
      ]}
      title="Your Learning Performance"
      description="Monitor your key academic metrics and celebrate your progress on StudyBalance."
    />
  </div>

  <div id="main-footer" data-section="main-footer">
      <FooterBaseReveal
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7zpdi0"
      logoAlt="StudyBalance Logo"
      logoText="StudyBalance"
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Plan",
              href: "/plan",
            },
            {
              label: "Settings",
              href: "/settings",
            },
            {
              label: "Account",
              href: "/account",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Upload Materials",
              href: "/upload",
            },
            {
              label: "Educational Games",
              href: "/#about-games",
            },
            {
              label: "Help & Support",
              href: "#",
            },
            {
              label: "FAQ",
              href: "/#faq-general",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 StudyBalance. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
