"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
import { AppWindow, BarChart2, Camera, CheckCircle, Cloud, Code, Globe, Home, Layout, MapPin, MessageCircle, Settings, Smartphone, Smile, Sparkles, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="aurora"
        cardStyle="inset"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Packages",          id: "#packages"},
        {
          name: "Results",          id: "#results"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Clients",          id: "#clients"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lbhnlx"
      brandName="Webuild Innovations"
      button={{
        text: "Get Started",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "animated-grid"}}
      imagePosition="right"
      title="Build Your Vision with Expert Website Design"
      description="Transform your ideas into stunning, high-performing websites. We craft digital experiences that engage, convert, and grow your business."
      testimonials={[
        {
          name: "Sarah Johnson",          handle: "@sjtechsolutions",          testimonial: "Webuild Innovations transformed our online presence! The new website is not only beautiful but also incredibly functional, leading to a significant increase in client inquiries. Their team was professional, responsive, and truly understood our vision.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-holding-his-chin_329181-19392.jpg",          imageAlt: "Sarah Johnson"},
        {
          name: "Michael Chen",          handle: "@innovatelab",          testimonial: "Outstanding service from start to finish. Webuild Innovations delivered a complex e-commerce platform that exceeded our expectations. The attention to detail and dedication to performance were evident in every aspect of the project. Highly recommended!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-jacket-leaning-wall-cafe_171337-16379.jpg",          imageAlt: "Michael Chen"},
        {
          name: "Emily Rodriguez",          handle: "@growthco",          testimonial: "Choosing Webuild Innovations was the best decision for our startup. Their agile approach and creative solutions brought our brand to life online. The site's user experience is seamless, and we've seen fantastic engagement from our target audience.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/traveler-studio-portrait-handsome-bearded-man-wearing-ca_613910-12296.jpg",          imageAlt: "Emily Rodriguez"},
        {
          name: "David Kim",          handle: "@startupxyz",          testimonial: "The team at Webuild Innovations is truly exceptional. They took our vague ideas and turned them into a stunning, responsive website that perfectly captures our brand. Their communication was excellent, and the project was delivered on time and within budget.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/curly-redhead-woman-looking-camera_23-2148281614.jpg",          imageAlt: "David Kim"},
        {
          name: "Jessica Lee",          handle: "@digitalpros",          testimonial: "We needed a website refresh that truly stood out, and Webuild Innovations delivered beyond expectations. Their innovative design concepts and robust development skills gave us a cutting-edge site that performs beautifully across all devices. A fantastic partner!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/crazy-hippie-angry-expression_1194-3931.jpg",          imageAlt: "Jessica Lee"},
      ]}
      buttons={[
        {
          text: "View Our Portfolio",          href: "#packages"},
        {
          text: "Get a Free Quote",          href: "#contact"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151099250.jpg",          alt: "Sarah Johnson"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-designer-with-musical-earphones-standing-office-holding-folder_1303-32105.jpg",          alt: "Michael Chen"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-greenhouse-sitting_23-2148509935.jpg",          alt: "Emily Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-african-american-man-drawing-canvas-art-class-paying-attention-inspiration-model-teacher-artistic-lesson-workshop-learn-how-draw-professional-sketch-design_482257-43120.jpg",          alt: "David Kim"},
        {
          src: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",          alt: "Male graphic designer using digital tablet"},
      ]}
      avatarText="Join 250+ businesses thriving online"
      imageSrc="http://img.b2bpic.net/free-photo/urban-apartment-with-minimalist-home-office-wooden-furniture_482257-120933.jpg"
      imageAlt="Modern website development dashboard with collaborative team"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text-icon",          text: "Seamless Integration",          icon: CheckCircle,
        },
        {
          type: "text-icon",          text: "Modern Design",          icon: Sparkles,
        },
        {
          type: "text-icon",          text: "Global Reach",          icon: Globe,
        },
        {
          type: "text-icon",          text: "Mobile Optimized",          icon: Smartphone,
        },
        {
          type: "text-icon",          text: "Clean Code",          icon: Code,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Your Partner in Digital Success"
      buttons={[
        {
          text: "Learn More About Us",          href: "#"},
      ]}
      
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Custom Web Development",          description: "Crafting bespoke websites tailored to your unique brand identity and business objectives, ensuring a distinctive online presence.",          bentoComponent: "reveal-icon",          icon: Code
        },
        {
          title: "Responsive Design & UX",          description: "Delivering seamless user experiences across all devices with cutting-edge responsive design and intuitive user interface principles.",          bentoComponent: "globe"
        },
        {
          title: "E-commerce & Integrations",          description: "Building powerful online stores and integrating essential tools to streamline operations and maximize sales potential for your business.",          bentoComponent: "phone",          statusIcon: Layout,
          alertIcon: MessageCircle,
          alertTitle: "New Sale!",          alertMessage: "John just purchased a 'Pro Package'.",          apps: [
            {
              name: "Dashboard",              icon: AppWindow,
            },
            {
              name: "Messages",              icon: MessageCircle,
            },
            {
              name: "Settings",              icon: Settings,
            },
            {
              name: "Camera",              icon: Camera,
            },
            {
              name: "Maps",              icon: MapPin,
            },
            {
              name: "Cloud",              icon: Cloud,
            },
            {
              name: "Home",              icon: Home,
            },
            {
              name: "Users",              icon: Users,
            },
          ]
        },
      ]}
      title="Comprehensive Solutions for Your Business"
      description="From initial concept to launch and beyond, we offer a full suite of services to ensure your digital success, tailored to your growth."
    />
  </div>

  <div id="packages" data-section="packages">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "starter-website",          name: "Starter Website",          price: "$999",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",          imageAlt: "Starter Website Package"},
        {
          id: "business-pro",          name: "Business Pro Website",          price: "$2,499",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345419.jpg",          imageAlt: "Business Pro Website Package"},
        {
          id: "ecommerce-powerhouse",          name: "E-commerce Powerhouse",          price: "$4,999",          imageSrc: "http://img.b2bpic.net/free-photo/person-adding-clothes-cart-closeup-online-shopping-campaign_53876-98449.jpg",          imageAlt: "E-commerce Powerhouse Package"},
        {
          id: "custom-web-app",          name: "Custom Web Application",          price: "Starting at $7,500",          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-homepage-illustration_23-2149250406.jpg",          imageAlt: "Custom Web Application Service"},
        {
          id: "maintenance-support",          name: "Maintenance & Support",          price: "Monthly from $149",          imageSrc: "http://img.b2bpic.net/free-photo/construction-technology-tools-with-laptop-hard-hat-pliers_187299-46331.jpg",          imageAlt: "Website Maintenance & Support Package"},
        {
          id: "seo-marketing",          name: "SEO & Marketing Boost",          price: "Starting at $399",          imageSrc: "http://img.b2bpic.net/free-vector/e-mail-marketing-set-icons_24877-51327.jpg",          imageAlt: "SEO & Digital Marketing Integration Package"},
      ]}
      title="Tailored Website Development Packages"
      description="Choose from our flexible packages, designed to fit businesses of all sizes and aspirations. Each package is fully customizable to ensure your vision comes to life with measurable results."
    />
  </div>

  <div id="results" data-section="results">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "clients",          icon: Users,
          title: "Satisfied Clients",          value: "250+"},
        {
          id: "projects",          icon: BarChart2,
          title: "Projects Completed",          value: "500+"},
        {
          id: "satisfaction",          icon: Smile,
          title: "Client Satisfaction",          value: "98%"},
      ]}
      title="Achieving Excellence, Together"
      description="Our commitment to quality and client satisfaction is reflected in our remarkable achievements and consistent results in web development."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          title: "Truly Transformed Our Online Presence!",          quote: "Webuild Innovations delivered a stunning and highly functional website that significantly boosted our client inquiries. Their professionalism and deep understanding of our brand's needs were simply outstanding.",          name: "Sarah Johnson",          role: "CEO, Tech Solutions Inc.",          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-camera-happy-positive-pointing-with-index-finger-side-standing-brown-background_141793-133837.jpg",          imageAlt: "Sarah Johnson"},
        {
          id: "2",          title: "Exceeded All Our Expectations",          quote: "The e-commerce platform developed by Webuild Innovations is phenomenal. Their team’s dedication to detail and performance ensured a seamless user experience, driving higher conversions for our business.",          name: "Michael Chen",          role: "Founder, Innovate Labs",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg",          imageAlt: "Michael Chen"},
        {
          id: "3",          title: "A Game-Changer for Our Startup",          quote: "Their agile development and creative problem-solving made all the difference. Webuild Innovations not only brought our vision to life but optimized it for incredible engagement and growth.",          name: "Emily Rodriguez",          role: "Marketing Director, GrowthCo",          imageSrc: "http://img.b2bpic.net/free-photo/wooden-vintage-background-with-letter-cup-coffee-decor_169016-27818.jpg",          imageAlt: "Emily Rodriguez"},
        {
          id: "4",          title: "Professionalism and Punctuality at Its Best",          quote: "Webuild Innovations crafted a responsive website that perfectly reflects our brand. Their communication was impeccable, and they delivered a high-quality project on time and within budget.",          name: "David Kim",          role: "Product Manager, StartupXYZ",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg",          imageAlt: "David Kim"},
        {
          id: "5",          title: "Innovative Design and Robust Development",          quote: "For our website refresh, Webuild Innovations provided cutting-edge designs and robust development that made our site stand out. Their ability to deliver a high-performing site across all devices is remarkable.",          name: "Jessica Lee",          role: "CTO, Digital Pros",          imageSrc: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg",          imageAlt: "Jessica Lee"},
      ]}
      title="What Our Clients Say About Us"
      description="Hear directly from businesses that have thrived with our expert web solutions and dedicated support, achieving their digital goals."
    />
  </div>

  <div id="clients" data-section="clients">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "InnovateSphere",        "GrowthWave",        "ShopSpark",        "Synergy Solutions",        "InsightFlow",        "Community Hub",        "LearnPath"]}
      title="Trusted by Leading Businesses"
      description="We've had the privilege of partnering with a diverse range of clients, helping them achieve their digital goals and elevate their online presence."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "What is your website development process?",          content: "Our process typically involves discovery and planning, design and prototyping, development and testing, and finally, deployment and ongoing support. We ensure client collaboration at every stage."},
        {
          id: "faq-2",          title: "How long does it take to build a website?",          content: "The timeline varies based on complexity and features. A basic website might take 4-6 weeks, while a custom e-commerce or web application can take 3-6 months. We provide a detailed timeline during our initial consultation."},
        {
          id: "faq-3",          title: "Do you offer website maintenance after launch?",          content: "Yes, we offer comprehensive maintenance and support packages to ensure your website remains secure, up-to-date, and performs optimally. This includes regular updates, backups, and security monitoring."},
        {
          id: "faq-4",          title: "Can you integrate third-party services like CRM or payment gateways?",          content: "Absolutely. We specialize in integrating various third-party services such as CRM systems, payment gateways (e.g., Stripe, PayPal), marketing automation tools, and other essential APIs to enhance your website's functionality."},
        {
          id: "faq-5",          title: "What are your pricing models?",          content: "We offer flexible pricing models including fixed-price packages for standard projects and hourly rates for custom development and ongoing support. We'll provide a transparent quote after understanding your specific requirements."},
        {
          id: "faq-6",          title: "Do I own my website after it's built?",          content: "Yes, once the project is completed and final payment is received, you will have full ownership of your website and all its assets. We provide all necessary files and credentials for your peace of mind."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our website building services, process, and pricing. If you don't see your question here, feel free to contact us directly."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      tag="Ready to Start?"
      title="Let's Build Something Amazing Together"
      description="Get in touch with us to discuss your project, get a free quote, or simply ask a question. We're excited to hear from you and help bring your vision to life!"
      imageSrc="http://img.b2bpic.net/free-photo/graphic-designers-discussing-laptop_1170-1865.jpg"
      imageAlt="Team collaborating on a web design project"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By sending a message, you agree to our Terms and Conditions and Privacy Policy."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lbhnlx"
      columns={[
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Services",              href: "#services"},
            {
              label: "Portfolio",              href: "#packages"},
          ],
        },
        {
          items: [
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "Clients",              href: "#clients"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          items: [
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoText="Webuild Innovations"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
