"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Sparkles, TrendingUp, Users, Globe, Award, Zap, Phone, Twitter, Linkedin, Github, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{
            text: "Get Started",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Transform Your Ideas Into Reality"
          description="Build stunning digital experiences with our comprehensive design and development platform. From concept to launch, we've got you covered."
          tag="Featured Platform"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "Start Free Trial",
              href: "#pricing"
            },
            {
              text: "View Demo",
              href: "#features"
            }
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711788197-0w6oufzg.jpg",
              imageAlt: "Modern technology workspace"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711789536-xk6gbqb1.jpg",
              imageAlt: "Software development environment"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711791014-nz5e20ez.jpg",
              imageAlt: "Creative innovation team"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711792206-bm2woi82.jpg",
              imageAlt: "Professional collaboration space"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711793551-m6af3q94.jpg",
              imageAlt: "Digital growth analytics"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Trusted by leading companies worldwide to deliver exceptional results"
          useInvertedBackground="noInvert"
          metrics={[
            {
              icon: TrendingUp,
              label: "Projects Completed",
              value: "500+"
            },
            {
              icon: Users,
              label: "Happy Clients",
              value: "200+"
            },
            {
              icon: Globe,
              label: "Countries Served",
              value: "45+"
            },
            {
              icon: Award,
              label: "Industry Awards",
              value: "28"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Our Process"
          description="We follow a proven 4-step methodology to transform your vision into exceptional digital products"
          tag="How It Works"
          tagIcon={Zap}
          buttons={[
            {
              text: "Learn More",
              href: "#contact"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Research & Discovery",
              description: "Deep dive into your market, users, and competitive landscape to uncover insights",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711795288-1z6rczes.jpg",
              imageAlt: "Research and analysis phase"
            },
            {
              id: 2,
              title: "Design & Strategy",
              description: "Create compelling prototypes and strategies tailored to your unique business goals",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711796972-6b3ec1j6.jpg",
              imageAlt: "Design creation and prototyping"
            },
            {
              id: 3,
              title: "Development & Build",
              description: "Engineer robust, scalable solutions using cutting-edge technologies and best practices",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711798614-q2otfxbi.jpg",
              imageAlt: "Development and coding"
            },
            {
              id: 4,
              title: "Launch & Optimize",
              description: "Deploy with confidence and continuously optimize based on real user feedback",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711800232-v8rpba4o.jpg",
              imageAlt: "Product launch and optimization"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Transparent Pricing Plans"
          description="Choose the perfect plan for your project. Scale up or down as your needs evolve."
          tag="Pricing"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",
              title: "Starter",
              price: "$2,999",
              period: "/project",
              imageSrc: "https://img.b2bpic.net/free-vector/subscription-options-web_1034-698.jpg",
              imageAlt: "Starter plan illustration",
              button: {
                text: "Get Started",
                href: "#contact"
              },
              features: [
                "Initial concept & strategy",
                "Basic design mockups",
                "Up to 2 revisions",
                "1 week turnaround",
                "Email support"
              ]
            },
            {
              id: "professional",
              title: "Professional",
              price: "$7,999",
              period: "/project",
              imageSrc: "https://img.b2bpic.net/free-vector/banners-web-subscriptions_1034-279.jpg",
              imageAlt: "Professional plan illustration",
              button: {
                text: "Start Now",
                href: "#contact"
              },
              features: [
                "Comprehensive research & planning",
                "Full design system",
                "Unlimited revisions",
                "3 week turnaround",
                "Development ready assets",
                "Priority support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="What Our Clients Say"
          description="Real feedback from companies we've helped transform their digital presence"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              nameTitle: "Sarah Chen, CEO at TechVenture",
              quote: "Their team transformed our vision into a stunning platform that exceeded our expectations. The results have been incredible for our growth.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711802548-atxknmjb.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              nameTitle: "Michael Rodriguez, Founder at InnovateLabs",
              quote: "Working with them was a game-changer. Their strategic approach and attention to detail helped us stand out in a competitive market.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711804205-v2izc9e0.jpg",
              imageAlt: "Michael Rodriguez"
            },
            {
              id: "3",
              nameTitle: "Emma Thompson, Product Director at ScaleUp Inc",
              quote: "Exceptional service from start to finish. They understand not just design, but business. Our conversion rates have doubled since launch.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711805680-gico7cbn.jpg",
              imageAlt: "Emma Thompson"
            },
            {
              id: "4",
              nameTitle: "David Kim, CTO at GlobalTech Solutions",
              quote: "The most professional team we've worked with. They delivered on time, on budget, and with solutions that scale beautifully.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711806760-d8en1z43.jpg",
              imageAlt: "David Kim"
            },
            {
              id: "5",
              nameTitle: "Lisa Anderson, VP Engineering at CloudForward",
              quote: "Their deep understanding of both design and technology made all the difference. Highly recommend for any serious project.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711808060-o0t6ss45.jpg",
              imageAlt: "Lisa Anderson"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Transform Your Project?"
          ctaDescription="Let's discuss how we can bring your vision to life. Schedule a free consultation call with our team."
          ctaButton={{
            text: "Book a Call",
            href: "mailto:hello@webild.io"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",
              title: "What is your typical project timeline?",
              content: "Project timelines vary based on scope and complexity. Our Starter plan typically takes 1 week, Professional plans take 3 weeks, and Enterprise projects are customized. We provide detailed timelines during the discovery phase."
            },
            {
              id: "2",
              title: "Do you offer ongoing support after launch?",
              content: "Yes! All our plans include post-launch support. Professional and Enterprise plans include priority support with guaranteed response times. We also offer optional maintenance and optimization packages."
            },
            {
              id: "3",
              title: "Can you work with existing codebases?",
              content: "Absolutely. We have extensive experience integrating with existing systems and modernizing legacy applications. We'll assess your current setup and provide recommendations during the discovery call."
            },
            {
              id: "4",
              title: "What technologies do you use?",
              content: "We work with modern tech stacks including React, Next.js, Node.js, TypeScript, Tailwind CSS, and more. We choose technologies based on your project requirements and scalability needs."
            },
            {
              id: "5",
              title: "How do you handle revisions?",
              content: "Starter plans include 2 revisions, Professional plans include unlimited revisions during the project phase, and Enterprise has a dedicated account manager for all your needs."
            }
          ]}
        />
      </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"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#about"
                },
                {
                  label: "Blog",
                  href: "#blog"
                },
                {
                  label: "Careers",
                  href: "#careers"
                }
              ]
            },
            {
              title: "Resources",
              items: [
                {
                  label: "Documentation",
                  href: "#docs"
                },
                {
                  label: "Support",
                  href: "#contact"
                },
                {
                  label: "FAQ",
                  href: "#faq"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "#privacy"
                },
                {
                  label: "Terms of Service",
                  href: "#terms"
                },
                {
                  label: "Cookie Policy",
                  href: "#cookies"
                }
              ]
            }
          ]}
          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"
            },
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram"
            }
          ]}
          copyrightText="© Webild, Inc. 2025. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}