"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, CheckCircle, HelpCircle, Send, Sparkles, Star, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="animatedAurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Build Modern Web Experiences"
          description="Create stunning, responsive websites with our comprehensive component library and design system. Transform your ideas into powerful digital solutions."
          tag="Welcome"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717186718-2w0ix4wj.jpg"
          imageAlt="Modern workspace with technology"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            {
              text: "Get Started",              href: "#contact"
            },
            {
              text: "Learn More",              href: "#features"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Client Success"
          tagIcon={Award}
          title="Transformed their entire digital presence and doubled their conversion rate within three months."
          description="Sarah Johnson"
          subdescription="TechVenture Inc."
          icon={CheckCircle}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717882566-7jznobyf.jpg"
          imageAlt="Sarah Johnson"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFourteen
          title="Powerful Features"
          description="Everything you need to create exceptional digital experiences. Explore our core capabilities that drive results."
          tag="Features"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Lightning Fast Performance",              description: "Optimized for speed with modern web technologies and best practices built in.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717888642-vhavvz4m.jpg",              imageAlt: "Fast performance indicator"
            },
            {
              id: "2",              title: "Fully Responsive Design",              description: "Beautiful on every device from mobile to desktop with intelligent layout adaptation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717889578-qjcqug9d.jpg",              imageAlt: "Responsive design showcase"
            }
          ]}
          buttons={[
            {
              text: "Explore All Features",              href: "#pricing"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Simple, Transparent Pricing"
          description="Choose the plan that works best for your project needs. No hidden fees."
          tag="Pricing"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              title: "Starter",              price: "$29",              period: "/month",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717890684-28jfv6dy.jpg",              imageAlt: "Starter plan",              button: {
                text: "Get Started",                href: "#contact"
              },
              features: [
                "Up to 5 projects",                "Basic analytics",                "Community support",                "Monthly updates"
              ]
            },
            {
              id: "professional",              title: "Professional",              price: "$79",              period: "/month",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717891567-g68fz63g.jpg",              imageAlt: "Professional plan",              button: {
                text: "Choose Plan",                href: "#contact"
              },
              features: [
                "Unlimited projects",                "Advanced analytics",                "Priority support",                "Weekly updates",                "Custom integrations"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact"
          description="Trusted by leading companies worldwide to deliver results."
          tag="Results"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Active Projects"
            },
            {
              id: "2",              value: "99.9%",              description: "Uptime Guarantee"
            },
            {
              id: "3",              value: "2M+",              description: "Users Worldwide"
            },
            {
              id: "4",              value: "24/7",              description: "Support Available"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="What Our Clients Say"
          description="Hear from businesses that have experienced the power of our platform."
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              nameTitle: "Sarah Chen, CEO of InnovateLab",              quote: "This platform completely transformed how we approach web development. We've seen a 200% increase in project delivery speed and our clients are thrilled with the results.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717884214-y5santuo.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              nameTitle: "Marcus Williams, Design Director at CreativeStudio",              quote: "The design system and component library saved us months of work. We can now focus on innovation instead of reinventing the wheel every project.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717885116-d82urm1m.jpg",              imageAlt: "Marcus Williams"
            },
            {
              id: "3",              nameTitle: "Elena Rodriguez, Product Manager at TechScale",              quote: "Incredible platform with outstanding support. Our team productivity has skyrocketed and our websites are faster and more responsive than ever.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717886162-73tbmscv.jpg",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              nameTitle: "David Kim, Founder of StartupX",              quote: "From day one, this platform made a difference. The learning curve is minimal and the results are outstanding. Highly recommended for any web professional.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717887418-2sh2944w.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our platform and services."
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I get started with the platform?",              content: "Getting started is easy! Sign up for a free account, choose your plan, and follow our onboarding tutorial. You'll be building websites in minutes."
            },
            {
              id: "2",              title: "What kind of projects can I create?",              content: "You can create any type of website or web application. From landing pages to complex web apps, our platform supports it all with unlimited flexibility."
            },
            {
              id: "3",              title: "Is there a free trial?",              content: "Yes! We offer a 14-day free trial with full access to all features. No credit card required to get started."
            },
            {
              id: "4",              title: "Do you provide customer support?",              content: "Absolutely! We provide 24/7 customer support via email, chat, and phone. Professional plans include priority support with faster response times."
            },
            {
              id: "5",              title: "Can I export my projects?",              content: "Yes, you can export your projects in multiple formats including HTML, CSS, and JavaScript. Full code access is available on all paid plans."
            },
            {
              id: "6",              title: "Is my data secure?",              content: "Security is our top priority. We use industry-standard encryption, regular security audits, and comply with GDPR and other data protection regulations."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Ready to transform your web projects?"
          description="Join thousands of professionals using our platform to create exceptional digital experiences. Start your free trial today."
          tagIcon={Send}
          useInvertedBackground="invertCard"
          inputPlaceholder="Enter your email address"
          buttonText="Sign Up Free"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We'll only use your email for onboarding and updates."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          copyrightText="© 2025 Webild. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                {
                  label: "Features",                  href: "#features"
                },
                {
                  label: "Pricing",                  href: "#pricing"
                },
                {
                  label: "FAQ",                  href: "#faq"
                },
                {
                  label: "Status",                  href: "https://status.webild.io"
                }
              ]
            },
            {
              title: "Company",              items: [
                {
                  label: "About Us",                  href: "#about"
                },
                {
                  label: "Blog",                  href: "https://blog.webild.io"
                },
                {
                  label: "Careers",                  href: "https://careers.webild.io"
                },
                {
                  label: "Contact",                  href: "#contact"
                }
              ]
            },
            {
              title: "Legal",              items: [
                {
                  label: "Privacy Policy",                  href: "https://webild.io/privacy"
                },
                {
                  label: "Terms of Service",                  href: "https://webild.io/terms"
                },
                {
                  label: "Security",                  href: "https://webild.io/security"
                },
                {
                  label: "Compliance",                  href: "https://webild.io/compliance"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}