"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import TextAbout from "@/components/sections/about/TextAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, Award, Zap, Shield, Star, Heart, Crown } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="GM"
          navItems={[
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Experience Premium Innovation"
          description="Discover cutting-edge products designed for those who demand excellence. Premium quality meets modern design."
          background={{ variant: "sparkles-gradient" }}
          tag="Welcome to GM"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/dashboard-element-collection_23-2148394289.jpg"
          imageAlt="GM Dashboard"
          mediaAnimation="slide-up"
          buttons={[
            { text: "Explore Products", href: "#products" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="slide-up"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "User 1"},
            {
              src: "http://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              alt: "User 2"},
            {
              src: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg",              alt: "User 3"},
          ]}
          avatarText="Trusted by 50,000+ satisfied customers"
          marqueeItems={[
            { type: "text", text: "Premium Quality" },
            { type: "text", text: "Innovation First" },
            { type: "text", text: "Customer Focused" },
            { type: "text", text: "Global Standard" },
          ]}
          marqueeSpeed={30}
          showMarqueeCard={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About GM"
          tagIcon={Award}
          title="We redefine industry standards through unwavering commitment to excellence and customer satisfaction"
          useInvertedBackground={false}
          buttons={[{ text: "Discover Our Story", href: "#" }]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Products"
          description="Explore our premium collection of innovative products"
          tag="New Arrivals"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "Premium Elite Pro",              price: "$2,499",              imageSrc: "http://img.b2bpic.net/free-photo/english-teacher-elements-arrangement_23-2148999509.jpg",              imageAlt: "Premium Elite Pro"},
            {
              id: "2",              name: "Innovation Max",              price: "$1,999",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-upside-down_23-2148253662.jpg",              imageAlt: "Innovation Max"},
            {
              id: "3",              name: "Excellence Ultra",              price: "$3,199",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-dark-blue-cylindrical-podium-with-golden-rim-dramatic-lighting_84443-73637.jpg",              imageAlt: "Excellence Ultra"},
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Why Choose GM"
          description="Exceptional features designed for maximum performance and user satisfaction"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          features={[
            {
              id: "1",              title: "Advanced Technology Integration",              tags: ["Innovation", "Future-Ready"],
              imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-power-button-virtual-screen-smart-home-technology_53876-104196.jpg",              imageAlt: "Advanced Technology"},
            {
              id: "2",              title: "Unmatched Security Standards",              tags: ["Protected", "Certified"],
              imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041842.jpg",              imageAlt: "Security"},
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="Partnering with the world's most innovative companies"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Partners"
          tagIcon={Shield}
          names={["Microsoft", "Google", "Apple", "Amazon", "Tesla", "Facebook", "Netflix"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Plan"
          description="Select the perfect option for your needs"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Popular Choice",              badgeIcon: Star,
              price: "$29/month",              subtitle: "Perfect for getting started",              buttons: [{ text: "Get Started", href: "#" }],
              features: [
                "Basic features included",                "24/7 customer support",                "Cloud storage 50GB",                "Monthly updates",                "Community access"],
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$79/month",              subtitle: "Ideal for professionals",              buttons: [{ text: "Choose Plan", href: "#" }],
              features: [
                "Advanced features",                "Priority support",                "Cloud storage 500GB",                "Weekly updates",                "Analytics dashboard",                "Team collaboration"],
            },
            {
              id: "enterprise",              badge: "Premium",              badgeIcon: Crown,
              price: "$199/month",              subtitle: "For large organizations",              buttons: [{ text: "Contact Sales", href: "#" }],
              features: [
                "All professional features",                "Dedicated account manager",                "Unlimited storage",                "Real-time updates",                "Advanced analytics",                "Custom integrations",                "White-label options"],
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Join 50,000+ satisfied customers who've transformed their experience with GM"
          cardTag="See what they say"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              name: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "Michael Chen"},
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              name: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/young-serious-businessman-looking-camera-meeting-headshot-portrait_1163-3923.jpg",              imageAlt: "David Kim"},
            {
              id: "5",              name: "Jessica Liu",              imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-leader-modern-office-with-businesspeople-workin_1139-956.jpg",              imageAlt: "Jessica Liu"},
            {
              id: "6",              name: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1649.jpg",              imageAlt: "James Wilson"},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with GM"
          description="Subscribe to our newsletter for exclusive updates, product launches, and special offers delivered to your inbox"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg"
          imageAlt="GM Footer"
          logoText="GM"
          copyrightText="© 2025 GM. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
