"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "hero" },
              { name: "Products", id: "products" },
              { name: "About", id: "features" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="City Mobile Bazaar"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardCarousel
            background={{ variant: "gradient-bars" }}
            title="Welcome to City Mobile Bazaar"
            description="Your ultimate destination for the latest smartphones and mobile technology. Expert service, competitive prices, and a huge selection of top brands."
            tag="Mobile Tech Experts"
            buttons={[
              { text: "View Products", href: "#products" },
              { text: "Contact Us", href: "#contact" }
            ]}
            mediaItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/young-slavic-female-barber-wearing-uniform-singing-using-mobile-phone-as-microphone-keeping-hand-air-isolated-orange-background_141793-89843.jpg", imageAlt: "Flagship Smartphone" },
              { imageSrc: "http://img.b2bpic.net/free-photo/person-controlling-house-light-using-smart-home-application-touching-screen-turn-it-by-mobile_482257-2842.jpg", imageAlt: "Display Screen" },
              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-phone_23-2148883535.jpg", imageAlt: "Retail Display" },
              { imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-design_1176-229.jpg", imageAlt: "Smartphone Held" },
              { imageSrc: "http://img.b2bpic.net/free-photo/woman-using-smartphone-technology_23-2149263977.jpg", imageAlt: "Collection" },
              { imageSrc: "http://img.b2bpic.net/free-photo/background-with-printed-circuit-board-concept-modern-technologies_169016-61800.jpg", imageAlt: "Tech Background" }
            ]}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="four-items-2x2-equal-grid"
            useInvertedBackground={true}
            products={[
              { id: "p1", name: "Ultra Pro X", price: "$999", imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5130.jpg" },
              { id: "p2", name: "Elite Note", price: "$849", imageSrc: "http://img.b2bpic.net/free-photo/golden-phone-rendering-black-background_187299-46588.jpg" },
              { id: "p3", name: "Galaxy Vision", price: "$799", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-mobile-crescent-perspective-side-white-background_187299-37679.jpg" },
              { id: "p4", name: "Smart Edge 5", price: "$699", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-surrounded-with-rosemary-black-pepper-garlic-dark-backdrop_23-2147917362.jpg" },
              { id: "p5", name: "Basic Plus", price: "$499", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-white-podium-with-cubes-modern-studio_187299-46586.jpg" },
              { id: "p6", name: "Power Series", price: "$399", imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-white-background_58702-5011.jpg" }
            ]}
            title="Latest Arrivals"
            description="Explore our curated selection of the newest and best performing mobile devices on the market."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardFourteen
            useInvertedBackground={false}
            title="Why Choose City Mobile Bazaar"
            tag="Our Achievements"
            metrics={[
              { id: "m1", value: "15k+", description: "Happy Customers" },
              { id: "m2", value: "20+", description: "Top Brands" },
              { id: "m3", value: "5+", description: "Retail Locations" }
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyFour
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { id: "f1", title: "Expert Repair", author: "Tech Support", description: "Professional mobile phone repairs with genuine parts and quick turnaround.", tags: ["Support", "Expertise"], imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-checking-her-phone_23-2148452656.jpg" },
              { id: "f2", title: "Trade-in Program", author: "Finance Team", description: "Get the best value for your old device when upgrading to the latest model.", tags: ["Value", "Savings"], imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201858.jpg" },
              { id: "f3", title: "Lifetime Support", author: "CS Team", description: "We stand by our products with dedicated after-sales support and helpful advice.", tags: ["Reliability", "Support"], imageSrc: "http://img.b2bpic.net/free-photo/seller-man-mobile-phone-professional-consultant-tech-store-shop_627829-4977.jpg" }
            ]}
            title="Exceptional Service"
            description="We are committed to providing the best shopping experience for mobile technology enthusiasts in the city."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Sarah Johnson", handle: "@sarah_j", testimonial: "Excellent service and the best selection of phones in the city!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg" },
              { id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "Very professional staff and great trade-in deals.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-short-curly-hair-showing-credit-card-looking-aside-smiling-standing-white-wall_141793-29289.jpg" },
              { id: "3", name: "Emily Rodriguez", handle: "@em_rod", testimonial: "Always the first place I go when I need an upgrade.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg" },
              { id: "4", name: "David Kim", handle: "@dkim", testimonial: "The repair services saved my phone when I thought it was gone for good.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13320.jpg" },
              { id: "5", name: "Jessica Lee", handle: "@jlee", testimonial: "Fantastic experience every time I shop here.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/european-man-smiling-cheerful-expression-closeup-portrait_53876-129391.jpg" }
            ]}
            showRating={true}
            title="What Our Customers Say"
            description="We pride ourselves on our community and the trust our customers place in us daily."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
            textboxLayout="split"
            useInvertedBackground={true}
            faqs={[
              { id: "q1", title: "Do you offer financing?", content: "Yes, we offer flexible financing plans through our partners." },
              { id: "q2", title: "Are repairs guaranteed?", content: "All repairs come with a standard 90-day warranty on parts and labor." },
              { id: "q3", title: "Can I trade in an older model?", content: "Absolutely, bring in your device and get an instant quote." }
            ]}
            title="Frequently Asked Questions"
            description="Get quick answers to common questions about our products and services."
            faqsAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-screen-concept_1194-638673.jpg"
            mediaAnimation="slide-up"
          />
        </div>

        <div id="socialProof" data-section="socialProof">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={false}
            names={["Apple", "Samsung", "Google", "OnePlus", "Xiaomi", "Motorola", "Sony"]}
            title="Trusted Partners"
            description="We are proud to work with the industry's leading brands."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "gradient-bars" }}
            text="Have questions or need support? Our team is ready to help you."
            buttons={[{ text: "Contact Us", href: "mailto:hello@citymobile.com" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="City Mobile Bazaar"
            columns={[
              { title: "Shop", items: [{ label: "Smartphones", href: "#products" }, { label: "Accessories", href: "#" }] },
              { title: "Support", items: [{ label: "Repairs", href: "#features" }, { label: "FAQs", href: "#faq" }] },
              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}