"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Zap, TrendingUp, Users, Building2, Globe, Award, Heart, Mail, Twitter, Linkedin, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Build Your Future Today"
          description="Create stunning digital experiences with our innovative platform. Designed for modern teams who want to ship faster and dream bigger."
          background={{
            variant: "gradient-bars"
          }}
          kpis={[
            {
              value: "10x",              label: "Faster Development"
            },
            {
              value: "99.8%",              label: "Uptime Guaranteed"
            },
            {
              value: "24/7",              label: "Expert Support"
            }
          ]}
          enableKpiAnimation={true}
          tag="Welcome to Tomorrow"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/businessman-working-tablet-cafe_53876-104032.jpg"
          imageAlt="Modern technology innovation"
          imagePosition="right"
          buttons={[
            {
              text: "Start Free Trial",              href: "#contact"
            },
            {
              text: "View Demo",              href: "#features"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",              content: "Crafted for"
            },
            {
              type: "image",              src: "https://img.b2bpic.net/free-vector/abstract-business-card-template_23-2148303097.jpg",              alt: "Brand"
            },
            {
              type: "text",              content: "forward-thinking teams"
            }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn More",              href: "#features"
            },
            {
              text: "Explore Plans",              href: "#pricing"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Powerful Features"
          description="Everything you need to build, deploy, and scale your digital products with confidence"
          tag="Core Features"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Lightning Fast",              description: "Built on cutting-edge infrastructure for maximum performance and reliability",              imageSrc: "https://img.b2bpic.net/free-photo/ideas-progress-vision-inspiration-design-concept_53876-120004.jpg"
            },
            {
              id: 2,
              title: "Scale Effortlessly",              description: "Grow your application without worrying about infrastructure costs or complexity",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-abstract-innovation-assortment_23-2148909074.jpg"
            },
            {
              id: 3,
              title: "Enterprise Quality",              description: "Security and compliance features trusted by leading organizations worldwide",              imageSrc: "https://img.b2bpic.net/free-photo/branding-innovation-creative-inspire-concept_53876-127566.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Explore All Features",              href: "#"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Join thousands of companies transforming their operations"
          tag="Results"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Active Users",              value: "50,000+"
            },
            {
              id: "2",              icon: Building2,
              title: "Companies",              value: "1,200+"
            },
            {
              id: "3",              icon: Globe,
              title: "Countries",              value: "95"
            },
            {
              id: "4",              icon: Award,
              title: "Industry Awards",              value: "15"
            }
          ]}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "David Kim"
            }
          ]}
          cardTitle="Trusted by innovators and industry leaders worldwide"
          cardTag="Customer Stories"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Business?"
          description="Join thousands of companies already using our platform. Get started for free today and see the difference we can make."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/smiling-woman-using-smartphone-couch_53876-96944.jpg"
          imageAlt="Contact us"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Webild"
          copyrightText="© 2025 Webild. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com",              ariaLabel: "GitHub"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}