"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { TrendingUp, Users, Zap, Award, Twitter, Linkedin, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="outline-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="minimal"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{
            text: "Get Started",            href: "https://webild.io"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Webild"
          description="Transform your ideas into powerful digital products with our innovative platform"
          buttons={[
            {
              text: "Start Building",              href: "https://webild.io/signup"
            },
            {
              text: "View Demo",              href: "#features"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-black-white-upshot-new-york-city-subway-s-wtc-cortlandt-station-k-oculus_181624-1651.jpg?id=7810347"
          imageAlt="Modern startup workspace with tech innovation"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="About Webild"
          title="Experience Design Excellence"
          description="Our platform combines intuitive design with powerful functionality to help teams build, launch, and scale their digital products faster than ever before. "
          phoneOne={{
            imageSrc: "https://img.b2bpic.net/free-vector/task-management-app-interface_23-2148647718.jpg",            imageAlt: "Dashboard interface with analytics"
          }}
          phoneTwo={{
            imageSrc: "https://img.b2bpic.net/free-vector/task-management-app_23-2148639059.jpg",            imageAlt: "Product management interface"
          }}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Learn More",              href: "#features"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFifteen
          title="Powerful Features Built for Teams"
          description="Everything you need to collaborate, create, and deliver exceptional digital experiences"
          features={[
            {
              id: "1",              title: "Smart Analytics",              description: "Gain actionable insights with real-time data visualization and performance metrics",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-element-collection-template_52683-24453.jpg",              imageAlt: "Analytics dashboard with charts"
            },
            {
              id: "2",              title: "Team Collaboration",              description: "Work together seamlessly with built-in communication and workflow management tools",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716102526-i1mtionj.jpg",              imageAlt: "Team collaboration interface"
            },
            {
              id: "3",              title: "Advanced Security",              description: "Enterprise-grade protection with end-to-end encryption and compliance certifications",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-holographic-infographics-element-collectio_52683-12804.jpg",              imageAlt: "Security and protection features"
            },
            {
              id: "4",              title: "Seamless Integration",              description: "Connect with your favorite tools and services through our extensive API ecosystem",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716104102-473laaod.jpg",              imageAlt: "Integration and connectivity options"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Capabilities"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="Trusted by Industry Leaders"
          description="See how companies worldwide are transforming their workflows with Webild"
          testimonials={[
            {
              id: "1",              nameTitle: "Sarah Johnson, CEO of TechFlow",              quote: "Webild transformed how our team collaborates. We've reduced project delivery time by 40% and our team has never been more productive.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716105992-gc51rle0.jpg",              imageAlt: "Sarah Johnson, CEO"
            },
            {
              id: "2",              nameTitle: "Michael Chen, CTO of InnovateLab",              quote: "The integration capabilities are exceptional. We seamlessly connected all our tools and eliminated manual data entry entirely.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716107397-7uuovbsk.jpg",              imageAlt: "Michael Chen, CTO"
            },
            {
              id: "3",              nameTitle: "Emily Rodriguez, Director of Product at GrowthCo",              quote: "Our entire organization switched to Webild. The analytics dashboard gives us the insights we need to make data-driven decisions instantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716108653-63nib93n.jpg",              imageAlt: "Emily Rodriguez, Director of Product"
            },
            {
              id: "4",              nameTitle: "David Kim, Founder of StartupXYZ",              quote: "From startup to scale-up, Webild has been our trusted partner. The security and reliability are unmatched in the industry.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716109974-1zhtwgqu.jpg",              imageAlt: "David Kim, Founder"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          tag="Client Success"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Results That Matter"
          description="Join thousands of teams achieving extraordinary growth with Webild"
          metrics={[
            {
              id: "1",              icon: TrendingUp,
              title: "Productivity Gain",              value: "45%"
            },
            {
              id: "2",              icon: Users,
              title: "Active Users",              value: "50K+"
            },
            {
              id: "3",              icon: Zap,
              title: "Faster Delivery",              value: "3.5x"
            },
            {
              id: "4",              icon: Award,
              title: "Customer Satisfaction",              value: "98%"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Impact"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to revolutionize your workflow? Join our growing community and experience the difference Webild makes."
          animationType="background-highlight"
          buttons={[
            {
              text: "Start Free Trial",              href: "https://webild.io/trial"
            },
            {
              text: "Schedule Demo",              href: "https://webild.io/demo"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Webild"
          columns={[
            {
              title: "Product",              items: [
                {
                  label: "Features",                  href: "#features"
                },
                {
                  label: "Pricing",                  href: "#pricing"
                },
                {
                  label: "Security",                  href: "/security"
                },
                {
                  label: "Enterprise",                  href: "/enterprise"
                }
              ]
            },
            {
              title: "Company",              items: [
                {
                  label: "About",                  href: "/about"
                },
                {
                  label: "Blog",                  href: "/blog"
                },
                {
                  label: "Careers",                  href: "/careers"
                },
                {
                  label: "Contact",                  href: "/contact"
                }
              ]
            },
            {
              title: "Resources",              items: [
                {
                  label: "Documentation",                  href: "/docs"
                },
                {
                  label: "API Reference",                  href: "/api"
                },
                {
                  label: "Community",                  href: "/community"
                },
                {
                  label: "Support",                  href: "/support"
                }
              ]
            },
            {
              title: "Legal",              items: [
                {
                  label: "Privacy",                  href: "/privacy"
                },
                {
                  label: "Terms",                  href: "/terms"
                },
                {
                  label: "Cookies",                  href: "/cookies"
                },
                {
                  label: "Compliance",                  href: "/compliance"
                }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/webild",              ariaLabel: "Follow us on Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/webild",              ariaLabel: "Follow us on LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com/webild",              ariaLabel: "Check out our GitHub"
            },
            {
              icon: Mail,
              href: "mailto:hello@webild.io",              ariaLabel: "Email us"
            }
          ]}
          copyrightText="© Webild, Inc. 2025. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}