"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { Globe, Monitor, Moon, Palette, Sun, Volume2, VolumeX, SlidersHorizontal, Languages } 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="settings-options" data-section="settings-options">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Light / Dark Mode",          description: "Switch between light and dark themes for comfortable viewing in any environment.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bebnnv",            imageAlt: "Light/Dark Mode Toggle"},
          items: [
            {
              icon: Sun,
              text: "Light Theme"},
            {
              icon: Moon,
              text: "Dark Theme"},
            {
              icon: Monitor,
              text: "System Default"},
          ],
          reverse: false
        },
        {
          title: "Sound Controls",          description: "Toggle sound effects and notifications on or off to maintain focus during study sessions.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zt2vj9",            imageAlt: "Sound On/Off Toggle"},
          items: [
            {
              icon: Volume2,
              text: "Sound On"},
            {
              icon: VolumeX,
              text: "Sound Off"},
          ],
          reverse: true
        },
        {
          title: "Appearance Customization",          description: "Personalize the color scheme of your StudyBalance interface to match your preference.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=83rtz5",            imageAlt: "Appearance Color Picker"},
          items: [
            {
              icon: Palette,
              text: "Choose your colors"},
            {
              icon: SlidersHorizontal,
              text: "Adjust vibrancy"},
          ],
          reverse: false
        },
        {
          title: "Language Options",          description: "Select your preferred language for navigating the StudyBalance platform.",          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9dtei1",            imageAlt: "Language Selection"},
          items: [
            {
              icon: Languages,
              text: "Multiple languages"},
            {
              icon: Globe,
              text: "Global accessibility"},
          ],
          reverse: true
        }
      ]}
      title="Personalize Your Study Experience"
      description="Customize StudyBalance to perfectly fit your preferences and learning style with our comprehensive settings."
    />
  </div>

  <div id="settings-font" data-section="settings-font">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      title="Dyslexic-Friendly Font"
      description="We are committed to making learning accessible for everyone. StudyBalance offers a specially designed dyslexic-friendly font option to enhance readability and reduce visual strain, ensuring a more comfortable and effective study experience for users with dyslexia."
      bulletPoints={[
        {
          title: "Improved Readability",          description: "Text is designed to be easier to distinguish and follow."},
        {
          title: "Reduced Visual Strain",          description: "Minimizes eye fatigue for extended study sessions."},
        {
          title: "Inclusive Learning",          description: "Ensures our platform is welcoming to all learners."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/colorful-letters-forming-word-international_53876-21134.jpg"
      imageAlt="Dyslexic-friendly font example"
      mediaAnimation="slide-up"
    />
  </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>
  );
}
