"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Award, Users, Sparkles } from 'lucide-react';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "Services", id: "/services" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" }
  ];

  const footerColumns = [
    {
      title: "Navigatsiya",      items: [
        { label: "Bosh sahifa", href: "/" },
        { label: "Portfolio", href: "/portfolio" }
      ]
    },
    {
      title: "Ijtimoiy tarmoqlar",      items: [
        { label: "Telegram", href: "https://t.me/monstyle" },
        { label: "Instagram", href: "https://instagram.com/monstyle" },
        { label: "Email", href: "mailto:info@monstyle.uz" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="MONSTYLE"
          navItems={navItems}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="MONSTYLE"
          description="Brendingizni keyingi bosqichga olib chiqing\nLogo dizayn, brending va veb-sayt yechimlari"
          buttons={[
            { text: "Portfolio ko'rish", href: "/portfolio" },
            { text: "Bog'lanish", href: "/contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/messy-office-desk-still-life_23-2150155615.jpg"
          imageAlt="modern minimalist design studio interior white blue"
          mediaAnimation="opacity"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Biz Haqimizda"
          description="MONSTYLE — brending va dizayn sohasida kreativ yechimlar taklif etuvchi studiya. Bizning maqsadimiz — mijozlarimizga unutilmas brend identifikatsiyasini yaratish, ularni raqamli dunyoda ajralib turishga yordam berish va bizneslarini rivojlantirish."
          bulletPoints={[
            { title: "Kreativlik", description: "Har bir loyihaga noyob va yangi yondashuvni ta'minlaymiz." },
            { title: "Sifat", description: "Ishimizda eng yuqori standartlarga rioya qilamiz." },
            { title: "Mijozga yo'naltirilganlik", description: "Mijozlarimizning ehtiyojlarini birinchi o'ringa qo'yamiz." }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/multiethnic-designers-looking-tablet-screen-woman-hands_74855-10283.jpg"
          imageAlt="design team collaborating modern office"
          mediaAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-choose-us" data-section="why-choose-us">
        <FeatureCardSeven
          title="Nima uchun bizni tanlaysiz?"
          description="Bizning tajribamiz va kreativ yondashuvimiz brendingizni bozorda ajratib turishga yordam beradi."
          features={[
            { title: "Kreativ yechimlar", description: "Biz har bir mijozning noyob talablariga mos keladigan innovatsion g'oyalarni taklif etamiz.", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-art-marbling-colorful_181624-61733.jpg", imageAlt: "abstract creative design concept blue white" },
            { title: "Professional jamoa", description: "Tajribali dizaynerlar va brend mutaxassislardan iborat jamoamiz xizmatingizda.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1672.jpg", imageAlt: "professional business meeting collaboration" },
            { title: "Mijozga e'tibor", description: "Biz mijozlarimiz bilan yaqin hamkorlikda ishlaymiz va ularning maqsadlariga erishishga yordam beramiz.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-applicant-receiving-access-security-card-from-hr-manager-onboarding_482257-136431.jpg", imageAlt: "client meeting design discussion laptop" }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Bizga ishonganlar"
          description="Biz ishonchli hamkorlik orqali mijozlarimizning muvaffaqiyatiga hissa qo'shamiz."
          names={[
            "GlobalTech",            "Innovate Solutions",            "FutureCorp",            "CreativeHub",            "MarketMakers",            "Synergy Group",            "Visionary Brands"
          ]}
          useInvertedBackground={false}
          animationType="opacity"
        />
      </div>

      <div id="our-achievements" data-section="our-achievements">
        <MetricCardThree
          title="Bizning Muvaffaqiyatlarimiz"
          description="Bizning tajribamiz va natijalarimiz o'z-o'zidan so'zlaydi. Biz mijozlarimizga doimiy ravishda yuqori sifatli xizmat ko'rsatib kelmoqdamiz."
          metrics={[
            { id: "metric-1", icon: Award, title: "Muvaffaqiyatli loyihalar", value: "150+" },
            { id: "metric-2", icon: Users, title: "Mamnun mijozlar", value: "98%" },
            { id: "metric-3", icon: Sparkles, title: "Yaratilgan logotiplar", value: "200+" }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Keling, loyihangizni birgalikda muhokama qilaylik. Bizning jamoamiz sizning brendingizni yangi cho'qqilarga olib chiqishga tayyor."
          buttons={[
            { text: "Bog'lanish", href: "/contact" },
            { text: "Telegram", href: "https://t.me/monstyle" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© MONSTYLE. Barcha huquqlar himoyalangan."
          bottomRightText="Dizayn va brending studiyasi."
        />
      </div>
    </ThemeProvider>
  );
}