"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Zap, CheckCircle, Award, Star, Twitter, Linkedin, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Products", id: "products" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Generate Projects in Seconds"
          description="Webild automates project creation from concept to deployment. Describe your vision, and our intelligent system builds production-ready applications for you."
          tag="AI-Powered Development"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg"
          imageAlt="Webild project generation dashboard"
          buttons={[
            { text: "Start Building", href: "contact" },
            { text: "Watch Demo", href: "#features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="How Webild Works"
          description="Our intelligent workflow transforms your project ideas into fully functional applications through four seamless stages."
          tag="Smart Process"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Smart Analysis",              description: "Our AI analyzes your requirements and identifies the optimal tech stack, architecture patterns, and best practices for your project.",              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-16267.jpg"
            },
            {
              id: 2,
              title: "Code Generation",              description: "Automatic generation of clean, well-structured code following industry standards and your project specifications.",              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-16269.jpg"
            },
            {
              id: 3,
              title: "Integration",              description: "Seamless integration of APIs, databases, and third-party services with intelligent configuration management.",              imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-financial-report-using-modern-gadget_273609-5547.jpg"
            },
            {
              id: 4,
              title: "Monitoring",              description: "Built-in monitoring and analytics to track performance, identify issues, and optimize your application in real-time.",              imageSrc: "https://img.b2bpic.net/free-photo/man-writting-using-mouse_1150-80.jpg"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Project Templates"
          description="Choose from our curated collection of project templates, each optimized for specific use cases and industries."
          tag="Ready to Use"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Web Application",              price: "Pro",              imageSrc: "https://img.b2bpic.net/free-photo/programmer-colleague-office-training-machine-learning-algorithms_482257-116901.jpg"
            },
            {
              id: "2",              name: "Mobile App",              price: "Pro",              imageSrc: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241233.jpg"
            },
            {
              id: "3",              name: "Backend API",              price: "Pro",              imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations_23-2148820171.jpg"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Webild Impact"
          description="See how Webild is transforming development workflows and accelerating project delivery worldwide."
          tag="Results"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "10x",              title: "Faster Development",              description: "Projects delivered in days instead of weeks",              imageSrc: "https://img.b2bpic.net/free-photo/business-colleagues-banner-concept-with-copy-space_23-2149601494.jpg"
            },
            {
              id: "2",              value: "99.9%",              title: "Code Quality",              description: "Production-ready code with best practices built-in",              imageSrc: "https://img.b2bpic.net/free-photo/young-people-collaborating-meeting_23-2148826950.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Loved by Developers"
          description="Join thousands of developers who have accelerated their projects with Webild."
          tag="Customer Stories"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Alex Rivera",              handle: "@alexrivera",              testimonial: "Webild cut our development time in half. The AI-generated code is clean and maintainable. Absolutely game-changing!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial: "Finally, a tool that understands what developers need. Webild eliminates boilerplate and lets us focus on innovation.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg"
            },
            {
              id: "3",              name: "Marcus Johnson",              handle: "@mjohnson",              testimonial: "The quality of generated projects is exceptional. Our team was skeptical until we saw the results. Now we can't imagine working without it.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
            },
            {
              id: "4",              name: "Emily Rodriguez",              handle: "@emilyrod",              testimonial: "Webild's intelligent architecture recommendations have improved our application stability significantly. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Get answers to common questions about Webild and how it can transform your development workflow."
          useInvertedBackground="invertDefault"
          textPosition="left"
          faqs={[
            {
              id: "1",              title: "How does Webild generate code?",              content: "Webild uses advanced AI models trained on millions of lines of production code. It analyzes your requirements and generates clean, well-structured code following industry best practices and design patterns specific to your project type."
            },
            {
              id: "2",              title: "What programming languages are supported?",              content: "Webild currently supports JavaScript/TypeScript, Python, Java, Go, and Rust. Additional languages are being added regularly. You can specify your preferred language when creating a new project."
            },
            {
              id: "3",              title: "Can I customize the generated code?",              content: "Absolutely! The generated code is fully yours to modify. Webild provides a solid foundation, and you can extend, customize, or refactor it exactly as needed for your specific use case."
            },
            {
              id: "4",              title: "Is the generated code production-ready?",              content: "Yes, Webild generates production-ready code that follows security best practices, includes error handling, and incorporates modern development patterns. However, we recommend thorough testing before deploying to production."
            },
            {
              id: "5",              title: "What about security and intellectual property?",              content: "Your code belongs to you. Webild doesn't use your project data to train its models or share it with third parties. All data is processed securely, and we maintain strict privacy standards."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated"
          description="Subscribe to our newsletter for product updates, AI development tips, and exclusive early access to new features."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-vector/computer-with-social-profile-social-community_24877-53905.jpg"
          imageAlt="Newsletter signup illustration"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

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