"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="large"
        background="aurora"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Bosh sahifa",
          id: "hero",
        },
        {
          name: "Men haqimda",
          id: "about",
        },
        {
          name: "Oilam",
          id: "family",
        },
        {
          name: "Ko'nikmalar",
          id: "skills",
        },
        {
          name: "Loyihalar",
          id: "projects",
        },
        {
          name: "Aloqa",
          id: "contact",
        },
      ]}
      brandName="Mening Portfoliom"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated",
      }}
      title="Men [Ismingiz], Boshlang'ich Frontend Dasturchiman"
      description="Veb-interfeyslar yaratishga ishtiyoqmand, foydalanuvchilar uchun intuitiv va vizual jozibador tajribalar yarataman."
      carouselItems={[
        {
          id: "hc1",
          imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=1",
          imageAlt: "Frontend dasturchining ish joyi",
        },
        {
          id: "hc2",
          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-lightbulb-spectacles-formula-one-car-camera-against-pink-backdrop-with-blue-light_23-2148084307.jpg?_wi=1",
          imageAlt: "Veb-ishlab chiqish abstrakt tasviri",
        },
        {
          id: "hc3",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-programer-hands-typing-machine-learning-code-laptop-keyboard-front-computer-screens-with-programming-interface-system-engineer-writing-algorithm-online-cloud-computing_482257-41853.jpg?_wi=1",
          imageAlt: "Kod yozayotgan qo'llar",
        },
        {
          id: "hc4",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg?_wi=1",
          imageAlt: "Ma'lumotlar oqimi va ulanish vizualizatsiyasi",
        },
        {
          id: "hc5",
          imageSrc: "http://img.b2bpic.net/free-photo/architecture-plan-blueprint-layout-work-concept_53876-125433.jpg?_wi=1",
          imageAlt: "UI dizaynini chizayotgan shaxs",
        },
        {
          id: "hc6",
          imageSrc: "http://img.b2bpic.net/free-photo/create-website-layout-blank-banner_53876-132284.jpg",
          imageAlt: "Veb-brauzer interfeysining minimalist tasviri",
        },
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Men haqimda"
      description="Yangi boshlovchi frontend dasturchi sifatida, men veb-texnologiyalar dunyosiga sho'ng'iganman. React, JavaScript, HTML va CSS kabi texnologiyalarni o'rganib, funksional va estetik veb-ilovalarni yaratishga intilaman. Har doim yangi narsalarni o'rganishga va rivojlanishga tayyorman."
      imageSrc="http://img.b2bpic.net/free-photo/portrait-man-his-home-office_329181-14510.jpg"
      imageAlt="Mening portretim"
    />
  </div>

  <div id="family" data-section="family">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Sevgi",
        "Hurmat",
        "Qo'llab-quvvatlash",
        "Hamjihatlik",
        "Baxt",
        "Sabr-toqat",
        "Samimiylik",
      ]}
      title="Oilaviy qadriyatlar"
      description="Oilam mening ilhom manbaim va hayotimdagi eng katta qadriyatdir. Ular meni har doim qo'llab-quvvatlaydi."
      speed={40}
      showCard={false}
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "HTML/CSS",
          description: "Veb-sahifalarni yaratish va dizayn qilishda asosiy vosita.",
          imageSrc: "http://img.b2bpic.net/free-photo/hacker-uses-green-screen-pc-ai-deep-learning-develop-zero-day-exploit_482257-88622.jpg",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
        {
          title: "JavaScript/React",
          description: "Interaktiv va dinamik veb-ilovalarni qurish.",
          imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=2",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
        {
          title: "Git/GitHub",
          description: "Kod versiyasini boshqarish va hamkorlik qilish.",
          imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-lightbulb-spectacles-formula-one-car-camera-against-pink-backdrop-with-blue-light_23-2148084307.jpg?_wi=2",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
        {
          title: "Kitob o'qish",
          description: "Yangi bilimlarni o'rganish va dunyoqarashni kengaytirish.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-programer-hands-typing-machine-learning-code-laptop-keyboard-front-computer-screens-with-programming-interface-system-engineer-writing-algorithm-online-cloud-computing_482257-41853.jpg?_wi=2",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
        {
          title: "Sport",
          description: "Jismoniy faoliyat orqali sog'lom turmush tarzini saqlash.",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg?_wi=2",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
        {
          title: "Fotografiya",
          description: "Atrof-muhit go'zalliklarini suratga olish va ijodiy fikrlash.",
          imageSrc: "http://img.b2bpic.net/free-photo/architecture-plan-blueprint-layout-work-concept_53876-125433.jpg?_wi=2",
          imageAlt: "Hacker uses green screen PC and AI deep learning to develop zero day exploit",
        },
      ]}
      title="Ko'nikmalar va sevimli mashg'ulotlar"
      description="Mening dasturlash ko'nikmalarim va bo'sh vaqtimni mazmunli o'tkazadigan sevimli mashg'ulotlarim."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Portfolio veb-sayti",
          price: "Bepul",
          variant: "Shaxsiy",
          imageSrc: "http://img.b2bpic.net/free-photo/android-using-vr-glasses-home_23-2151903290.jpg",
          imageAlt: "Portfolio veb-sayti skrinshoti",
        },
        {
          id: "p2",
          name: "Elektron do'kon maketi",
          price: "Prototip",
          variant: "React + Redux",
          imageSrc: "http://img.b2bpic.net/free-vector/fashion-shopping-app-template-collection_23-2148654437.jpg",
          imageAlt: "Elektron do'kon maketi skrinshoti",
        },
        {
          id: "p3",
          name: "Ob-havo ilovasi",
          price: "Bepul",
          variant: "API integratsiyasi",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hand-holding-phone-with-modern-software-controlling-lights_482257-8727.jpg",
          imageAlt: "Ob-havo ilovasi skrinshoti",
        },
        {
          id: "p4",
          name: "Veb-o'yin",
          price: "Bepul",
          variant: "JavaScript",
          imageSrc: "http://img.b2bpic.net/free-photo/y2k-website-window-illustration_23-2151874926.jpg",
          imageAlt: "Veb-o'yin skrinshoti",
        },
        {
          id: "p5",
          name: "Vazifalar ro'yxati",
          price: "Bepul",
          variant: "CRUD",
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-desk-medium-shot_23-2149930939.jpg",
          imageAlt: "Vazifalar ro'yxati ilovasi skrinshoti",
        },
        {
          id: "p6",
          name: "Qisqa blog platformasi",
          price: "Bepul",
          variant: "React + Firebase",
          imageSrc: "http://img.b2bpic.net/free-photo/seo-search-word-connection-internet-concept_53876-124396.jpg",
          imageAlt: "Qisqa blog platformasi skrinshoti",
        },
      ]}
      title="Mening loyihalarim"
      description="Frontend sohasidagi ba'zi loyihalarim bilan tanishing. Har bir loyiha mening o'rganish va rivojlanish jarayonimni aks ettiradi."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Qanday texnologiyalarni bilasiz?",
          content: "Men HTML, CSS, JavaScript, React, Next.js, va Git/GitHub bilan ishlayman.",
        },
        {
          id: "q2",
          title: "Nima uchun frontendni tanladingiz?",
          content: "Men foydalanuvchi interfeyslarini yaratish va ularni vizual jihatdan jozibali qilishni yaxshi ko'raman.",
        },
        {
          id: "q3",
          title: "Kelajakdagi maqsadlaringiz qanday?",
          content: "Senior frontend dasturchi bo'lish va yirik loyihalarda ishtirok etish.",
        },
        {
          id: "q4",
          title: "Qaysi dasturlash tili sizga yoqadi?",
          content: "JavaScript, chunki u juda dinamik va ko'p imkoniyatlarga ega.",
        },
      ]}
      title="Tez-tez beriladigan savollar"
      description="Mening ishim va shaxsiyatim haqida tez-tez beriladigan savollarga javoblar."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Mening blogim"
      description="Dasturlash, o'rganish jarayonlari va shaxsiy fikrlarim haqidagi maqolalar."
      blogs={[
        {
          id: "b1",
          category: "Frontend",
          title: "Reactga kirish: Birinchi qadamlar",
          excerpt: "React yordamida veb-ilovalarni qanday boshlash haqida qo'llanma.",
          imageSrc: "http://img.b2bpic.net/free-photo/admin-writing-code-doing-maintenance-artificial-intelligence-neural-networks_482257-126864.jpg",
          imageAlt: "React logosi",
          authorName: "[Ismingiz]",
          authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-jesus-christ-with-laptop_23-2150972089.jpg",
          date: "2023-10-26",
        },
        {
          id: "b2",
          category: "Dasturlash",
          title: "Git va GitHub asoslari",
          excerpt: "Kodni versiyalash va jamoada ishlash uchun muhim vositalar.",
          imageSrc: "http://img.b2bpic.net/free-photo/cool-background-blank-wallpaper-place-your-concept_1194-641481.jpg",
          imageAlt: "Git va GitHub logolari",
          authorName: "[Ismingiz]",
          authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
          date: "2023-10-15",
        },
        {
          id: "b3",
          category: "UI/UX",
          title: "Yaxshi foydalanuvchi interfeysi sirlari",
          excerpt: "Intuitiv va jozibador UI yaratish bo'yicha maslahatlar.",
          imageSrc: "http://img.b2bpic.net/free-photo/corporate-culture-composition-with-computer-windows-arrows-gear-icons-trophy-cup-doodle-characters-coworkers-vector-illustration_1284-82460.jpg",
          imageAlt: "UI/UX dizayn vizualizatsiyasi",
          authorName: "[Ismingiz]",
          authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-queer-woman-posing-with-copy-space_23-2151177816.jpg",
          date: "2023-09-30",
        },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Aloqa"
      title="Keling, birga ishlaymiz!"
      description="Agar sizda biror loyiha g'oyasi bo'lsa yoki shunchaki salomlashmoqchi bo'lsangiz, men bilan bog'laning."
      buttons={[
        {
          text: "Menga xabar yuboring",
          href: "mailto:your.email@example.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Navigatsiya",
          items: [
            {
              label: "Bosh sahifa",
              href: "#hero",
            },
            {
              label: "Men haqimda",
              href: "#about",
            },
            {
              label: "Loyihalar",
              href: "#projects",
            },
            {
              label: "Aloqa",
              href: "#contact",
            },
          ],
        },
        {
          title: "Bog'lanish",
          items: [
            {
              label: "Email",
              href: "mailto:your.email@example.com",
            },
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "GitHub",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2023 [Ismingiz]. Barcha huquqlar himoyalangan."
      bottomRightText="Webild tomonidan qurilgan"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
