"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="grid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Bosh sahifa",          id: "bosh-sahifa"},
        {
          name: "Men haqimda",          id: "men-haqimda"},
        {
          name: "Ko'nikmalar",          id: "ko'nikmalar"},
        {
          name: "Loyihalar",          id: "loyihalar"},
        {
          name: "Qiziqishlar",          id: "qiziqishlar"},
        {
          name: "Oilam",          id: "oilam"},
        {
          name: "Bog'lanish",          id: "bog'lanish"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/half-charged-battery-left-side-with-white-background_187299-40056.jpg"
      logoAlt="Uzbek Dev Logo"
      brandName="Frontend Dasturchi"
    />
  </div>

  <div id="bosh-sahifa" data-section="bosh-sahifa">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Salom, men Muhammadamin!"
      description="Men web dasturlash olamiga endigina qadam qo'yayotgan boshlang'ich frontend dasturchiman. Intuitiv va ijodiy interfeyslarni yaratishga ishtiyoqmandman."
      tag="Dasturchilikka qiziqishim"
      buttons={[
        {
          text: "Loyihalarimni ko'ring",          href: "#loyihalar"},
        {
          text: "Men bilan bog'lanish",          href: "#bog'lanish"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-with-laptop_23-2148350554.jpg",          imageAlt: "Muhammadamin laptopda ishlayapti"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645643.jpg",          imageAlt: "Abstrakt kod satrlari"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Kelajakdagi yulduz"
    />
  </div>

  <div id="men-haqimda" data-section="men-haqimda">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Men haqimda"
      title="Frontend olamiga sayohatim"
      description="Men Muhammadamin, yosh va g'ayratli frontend dasturchiman. Kodlashga bo'lgan muhabbatim va foydalanuvchi tajribasiga bo'lgan e'tiborim meni doim yangiliklarni o'rganishga undaydi. Har bir loyihada ijodkorlik va aniqlik bilan yondashaman."
      subdescription="Keling, birgalikda keyingi katta narsani yarataylik!"
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-smiley-man-working-laptop_23-2149936199.jpg"
      imageAlt="Muhammadamin portreti"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="ko'nikmalar" data-section="ko'nikmalar">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Web Dasturlash Asoslari",          description: "HTML, CSS, JavaScript yordamida zamonaviy va responsiv veb-sahifalarni yaratish.",          imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg",          imageAlt: "Web development icon"
        },
        {
          title: "JavaScript va ES6+",          description: "Zamonaviy JavaScript xususiyatlaridan foydalangan holda interaktiv ilovalarni ishlab chiqish.",          imageSrc: "http://img.b2bpic.net/free-photo/colon-punctuation-mark-front-side_187299-47193.jpg",          imageAlt: "JavaScript icon"
        },
        {
          title: "React.js",          description: "Komponentlarga asoslangan arxitektura bilan yuqori samarali foydalanuvchi interfeyslarini qurish.",          imageSrc: "http://img.b2bpic.net/free-photo/network-connection-graphic-overlay-background-laptop-screen_53876-124151.jpg",          imageAlt: "React.js icon"
        }
      ]}
      title="Mening Ko'nikmalarim"
      description="Dasturlashda ishlatadigan asosiy texnologiyalarim va ulardagi bilamlarim."
      tag="Texnologiya"
    />
  </div>

  <div id="loyihalar" data-section="loyihalar">
      <ProductCardOne
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      animationType="slide-up"
      products={[
        {
          id: "p-1",          name: "Elektron Savdo Sayti",          price: "React, Next.js",          imageSrc: "http://img.b2bpic.net/free-photo/purchase-sale-discount-fashion-style_53876-15282.jpg",          imageAlt: "Elektron savdo sayti maketi"
        },
        {
          id: "p-2",          name: "Shaxsiy Blog",          price: "React, Sanity CMS",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-shiny-gold-stars_53876-128560.jpg",          imageAlt: "Blog sayti maketi"
        },
        {
          id: "p-3",          name: "Portfolio Sayti",          price: "Next.js, Tailwind CSS",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-desk_23-2149930959.jpg",          imageAlt: "Portfolio sayti maketi"
        },
        {
          id: "p-4",          name: "Admin Paneli Dashboard",          price: "React, Chart.js",          imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",          imageAlt: "Dashboard UI maketi"
        },
        {
          id: "p-5",          name: "Bitta Sahifali Landing",          price: "HTML, CSS, JS",          imageSrc: "http://img.b2bpic.net/free-vector/abstract-colorful-design-blog-header_23-2148886967.jpg",          imageAlt: "Landing sahifa maketi"
        },
        {
          id: "p-6",          name: "Mobil Ilova UI",          price: "React Native",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671564.jpg",          imageAlt: "Mobil ilova UI maketi"
        }
      ]}
      title="Loyihalarim"
      description="Mening yaratgan ba'zi ajoyib ishlarim. Har bir loyiha o'ziga xos muammolarni hal qilishga qaratilgan."
      tag="Amaliyot"
    />
  </div>

  <div id="qiziqishlar" data-section="qiziqishlar">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "Musiqa tinglash",          content: "Bo'sh vaqtlarimda turli janrdagi musiqalarni tinglashni yoqtiraman. Bu menga dam olishga va yangi g'oyalarni topishga yordam beradi."
        },
        {
          id: "faq-2",          title: "Kitob o'qish",          content: "Ilmiy fantastika va shaxsiy rivojlanishga oid kitoblar meni o'ziga jalb qiladi. Kitoblar orqali dunyoqarashimni kengaytirishga harakat qilaman."
        },
        {
          id: "faq-3",          title: "Sport bilan shug'ullanish",          content: "Faol turmush tarzini sevaman. Haftada bir necha marta futbol yoki basketbol o'ynash, yugurish bilan shug'ullanaman. Bu jismoniy va ruhiy tetiklik beradi."
        },
        {
          id: "faq-4",          title: "Yangi texnologiyalarni o'rganish",          content: "Frontend dasturchi sifatida doimiy ravishda yangi ramkalar, kutubxonalar va dasturlash tillarini o'rganishga qiziqaman. Texnologik dunyo har kuni yangilanadi va men ham unga moslashishga harakat qilaman."
        }
      ]}
      sideTitle="Mening Qiziqishlarim"
      sideDescription="Ishdan tashqari vaqtlarimni qanday o'tkazaman va nimalarga qiziqaman. Bu mening shaxsiyatimning bir qismi."
      buttonAnimation="none"
      faqsAnimation="slide-up"
      textPosition="left"
      showCard={true}
    />
  </div>

  <div id="oilam" data-section="oilam">
      <TeamCardOne
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      animationType="slide-up"
      members={[
        {
          id: "m-1",          name: "Otam",          role: "Mening asosiy ilhom manbai",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-living-room_329181-626.jpg",          imageAlt: "Oilam a'zosi, Ota"
        },
        {
          id: "m-2",          name: "Onam",          role: "Mening eng katta qo'llab-quvvatlovchim",          imageSrc: "http://img.b2bpic.net/free-photo/lgtbiq-family-enjoying-life-together_23-2149173419.jpg",          imageAlt: "Oilam a'zosi, Ona"
        },
        {
          id: "m-3",          name: "Ukalarim/Opalrim",          role: "Doimiy do'stlarim va sirdoshlarim",          imageSrc: "http://img.b2bpic.net/free-photo/headshot-tender-cute-curly-haired-20s-woman-warm-beanie-cool-sweatshirt-smiling-broadly-enjoying-awesome-sunny-chilly-days-outdoors-having-fun-posing-blue-background-copy-space_1258-81827.jpg",          imageAlt: "Oilam a'zosi, Uka yoki Opa"
        }
      ]}
      title="Mening Oilam"
      description="Meni doim qo'llab-quvvatlaydigan va ilhomlantiradigan insonlar."
      tag="Qadriyatlar"
    />
  </div>

  <div id="bog'lanish" data-section="bog'lanish">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Men bilan aloqada bo'ling"
      description="Agar sizda biror loyiha taklifi, savol yoki shunchaki suhbatlashish istagi bo'lsa, quyidagi shaklni to'ldiring."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Ismingiz",          required: true
        },
        {
          name: "email",          type: "email",          placeholder: "Elektron pochta manzilingiz",          required: true
        }
      ]}
      textarea={{
        name: "message",        placeholder: "Xabaringiz",        rows: 5,
        required: true
      }}
      imageSrc="http://img.b2bpic.net/free-photo/mature-woman-dialing-phone-number-make-inquiries-about-productivity_482257-120194.jpg"
      imageAlt="Aloqa shakli rasmi"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="Yuborish"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Sayt",          items: [
            {
              label: "Bosh sahifa",              href: "#bosh-sahifa"
            },
            {
              label: "Men haqimda",              href: "#men-haqimda"
            },
            {
              label: "Loyihalar",              href: "#loyihalar"
            },
            {
              label: "Bog'lanish",              href: "#bog'lanish"
            }
          ]
        },
        {
          title: "Ijtimoiy",          items: [
            {
              label: "Telegram",              href: "#"
            },
            {
              label: "LinkedIn",              href: "#"
            },
            {
              label: "GitHub",              href: "#"
            }
          ]
        }
      ]}
      logoText="Frontend Dasturchi"
      copyrightText="© 2024 Muhammadamin. Barcha huquqlar himoyalangan."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
