"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Award, Code, DollarSign, Heart, Image, Rocket, Sparkles, Star, Target, TrendingUp, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Influence Labs"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Creative Digital Solutions"
          bottomRightText="hello@influencelabs.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="We Build Digital Presence, Not Just Websites"
          description="Transform your startup vision into a stunning digital reality. We create modern, conversion-focused websites and digital solutions that help your brand stand out and grow faster."
          tag="Digital Agency for Startups"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Our Work", href: "#portfolio" },
            { text: "Get a Quote", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "downward-rays-animated" }}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-dynamic-modern-digital-agency-video-ba-1774079659654-e7908463.png", imageAlt: "Digital agency motion graphics hero background" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-beautiful-modern-website-interface-moc-1774079660944-ab67aedf.png", imageAlt: "Modern website design showcase" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-vibrant-e-commerce-platform-interface--1774079660171-bb2725e4.png", imageAlt: "E-commerce platform interface" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-digital-marketing-dashboard-showing-an-1774079661771-8c289608.png", imageAlt: "Digital marketing analytics dashboard" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-sleek-corporate-website-for-a-tech-sta-1774079660723-f7e8a011.png", imageAlt: "Corporate website design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-vibrant-e-commerce-store-interface-for-1774079662022-34c96c45.png", imageAlt: "E-commerce fashion website" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="Our Services"
          description="We specialize in creating digital solutions tailored to startup needs. From web design to e-commerce platforms, we deliver results that drive growth."
          tag="What We Do"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          buttons={[{ text: "Explore All Services", href: "#services" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Web Design & Development",              description: "Custom, responsive websites that showcase your brand and convert visitors into customers. Modern design with optimal performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-beautiful-modern-website-interface-moc-1774079660944-ab67aedf.png",              imageAlt: "Web design and development showcase"
            },
            {
              id: 2,
              title: "E-Commerce Solutions",              description: "Full-featured online stores with secure payment processing, inventory management, and conversion optimization for maximum sales.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-vibrant-e-commerce-platform-interface--1774079660171-bb2725e4.png",              imageAlt: "E-commerce platform interface"
            },
            {
              id: 3,
              title: "Digital Marketing",              description: "Strategic digital marketing campaigns including SEO, social media, and content marketing to grow your online presence and reach.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-digital-marketing-dashboard-showing-an-1774079661771-8c289608.png",              imageAlt: "Digital marketing analytics dashboard"
            }
          ]}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MetricCardOne
          title="Why Choose Influence Labs"
          description="We understand startup challenges and deliver solutions that scale. Here's what sets us apart from the competition."
          tag="Our Advantage"
          tagIcon={Award}
          tagAnimation="blur-reveal"
          buttons={[{ text: "Learn More", href: "#about" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "Fast",              title: "Quick Turnaround",              description: "48-hour project launches without compromising quality or innovation",              icon: Zap
            },
            {
              id: "2",              value: "Modern",              title: "Latest Tech Stack",              description: "Built with cutting-edge technologies for performance and scalability",              icon: Code
            },
            {
              id: "3",              value: "Focused",              title: "Startup Expertise",              description: "Specialized in solving startup challenges and accelerating growth",              icon: Target
            },
            {
              id: "4",              value: "Affordable",              title: "Budget-Friendly",              description: "Premium quality services starting at ₹999, perfect for bootstrapped startups",              icon: DollarSign
            }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardThree
          title="Recent Portfolio Projects"
          description="Showcase of our latest work. Each project represents our commitment to excellence and client success."
          tag="Our Work"
          tagIcon={Image}
          tagAnimation="blur-reveal"
          buttons={[{ text: "View All Projects", href: "#portfolio" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          products={[
            {
              id: "1",              name: "Tech Startup Website",              price: "Completed",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-sleek-corporate-website-for-a-tech-sta-1774079660723-f7e8a011.png",              imageAlt: "Tech startup corporate website"
            },
            {
              id: "2",              name: "E-Commerce Fashion Store",              price: "Live Now",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-vibrant-e-commerce-store-interface-for-1774079662022-34c96c45.png",              imageAlt: "Fashion e-commerce platform"
            },
            {
              id: "3",              name: "Creative Agency Portfolio",              price: "Featured",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-creative-agency-portfolio-website-disp-1774079660739-2b868148.png",              imageAlt: "Creative agency showcase website"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your startup. All plans include free consultations and ongoing support."
          tag="Pricing Plans"
          tagIcon={TrendingUp}
          tagAnimation="blur-reveal"
          buttons={[{ text: "Get Started", href: "#contact" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="scale-rotate"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Sparkles,
              price: "₹999",              subtitle: "Perfect for getting started",              features: [
                "5-page responsive website",                "Mobile optimized design",                "Basic SEO setup",                "Contact form",                "30-day support"
              ]
            },
            {
              id: "business",              badge: "Best Value",              badgeIcon: Star,
              price: "₹2,999",              subtitle: "For growing businesses",              features: [
                "10-page custom website",                "Advanced SEO optimization",                "Blog integration",                "Social media integration",                "3-month support",                "Analytics setup"
              ]
            },
            {
              id: "premium",              badge: "Enterprise",              badgeIcon: Zap,
              price: "₹5,999",              subtitle: "Full digital transformation",              features: [
                "Unlimited pages",                "E-commerce integration",                "Advanced security",                "Email marketing setup",                "6-month support",                "Performance optimization",                "Priority support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="What Our Clients Say"
          cardTag="Real Success Stories"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Rahul Sharma",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-confident-b-1774079659538-0e11082b.png",              imageAlt: "Rahul Sharma, Startup Founder"
            },
            {
              id: "2",              name: "Priya Kapoor",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-female-ceo--1774079660776-143dfdc2.png",              imageAlt: "Priya Kapoor, CEO"
            },
            {
              id: "3",              name: "Amit Patel",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-startup-fou-1774079659087-27a3bf14.png",              imageAlt: "Amit Patel, Entrepreneur"
            },
            {
              id: "4",              name: "Neha Gupta",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-marketing-d-1774079659672-df7d566e.png",              imageAlt: "Neha Gupta, Marketing Director"
            },
            {
              id: "5",              name: "Vikram Singh",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-successful--1774079661450-9d44a8c5.png",              imageAlt: "Vikram Singh, Business Owner"
            },
            {
              id: "6",              name: "Anjali Verma",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFJLkZBgUDapP5DuJMtXgem8TM/a-professional-headshot-of-a-tech-founde-1774079659219-c1d4d00e.png",              imageAlt: "Anjali Verma, Tech Founder"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Grow?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Let's Transform Your Digital Presence"
          description="Join hundreds of startups that have accelerated their growth with Influence Labs. Get a free consultation and project quote today."
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "Schedule a Call", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Influence Labs Digital"
          copyrightText="© 2024 Influence Labs Digital. Building digital presence for startups worldwide."
          columns={[
            {
              title: "Quick Links",              items: [
                { label: "Home", href: "#hero" },
                { label: "Services", href: "#services" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#services" },
                { label: "E-Commerce", href: "#services" },
                { label: "Digital Marketing", href: "#services" },
                { label: "Consulting", href: "#contact" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Email: hello@influencelabs.com", href: "mailto:hello@influencelabs.com" },
                { label: "WhatsApp: +91 XXXXX XXXXX", href: "#contact" },
                { label: "Get Support", href: "#contact" },
                { label: "Schedule Call", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Disclaimer", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}