"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, Rocket, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="none"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "About Us",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Portfolio",
          id: "#portfolio",
        },
        {
          name: "Results",
          id: "#results",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Webuild Agency"
      bottomLeftText="Global Community"
      bottomRightText="hello@webuild.com"
      button={{
        text: "Get a Quote",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboard
      background={{
        variant: "sparkles-gradient",
      }}
      title="Your Vision, Our Code. Exceptional Websites, Delivered."
      description="We are a leading web development agency specializing in crafting bespoke digital experiences that drive growth and engagement for businesses worldwide. From sleek corporate sites to robust e-commerce platforms, we build with precision and passion."
      tag="Elevate Your Online Presence"
      tagAnimation="slide-up"
      buttons={[
        {
          text: "Explore Services",
          href: "#services",
        },
        {
          text: "View Our Work",
          href: "#portfolio",
        },
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/group-young-businesspeople-meeting-office_171337-7269.jpg"
      imageAlt="Modern web development dashboard with code and UI elements"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-4617.jpg",
          alt: "Close-up portrait of a smiling blonde businesswoman formal dressed.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-smiling-handsome-man-holding-tablet-computer-looking-straight-front_342744-405.jpg",
          alt: "Portrait of young smiling handsome man holding tablet computer and looking straight to the front",
        },
        {
          src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
          alt: "Bearded young man in casual shirt standing with laptop in hands",
        },
        {
          src: "http://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",
          alt: "Friendly successful business woman posing with arms crossed",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-middle-aged-businesswoman_1262-21005.jpg",
          alt: "Cheerful middle aged businesswoman",
        },
      ]}
      avatarText="Join 150+ Satisfied Clients"
      marqueeItems={[
        {
          type: "text",
          text: "Custom Web Design",
        },
        {
          type: "text",
          text: "E-commerce Solutions",
        },
        {
          type: "text",
          text: "SEO Optimization",
        },
        {
          type: "text",
          text: "Digital Strategy",
        },
        {
          type: "text",
          text: "Ongoing Support",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      tag="About Us"
      tagAnimation="blur-reveal"
      title="Crafting Digital Success Through Innovative Web Solutions"
      buttons={[
        {
          text: "Learn More",
          href: "#",
        },
      ]}
      buttonAnimation="blur-reveal"
      description="At Webuild Agency, we combine cutting-edge technology with creative design to build websites that don't just look good, but perform exceptionally. Our team of expert developers and designers are committed to understanding your unique business needs and delivering tailor-made solutions that resonate with your target audience and achieve your strategic objectives. We believe in transparent communication, agile development, and a partnership approach to ensure your digital vision comes to life seamlessly."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Custom Web Design & Development",
          description: "Unique, responsive websites crafted from scratch to perfectly match your brand identity and business goals, ensuring a captivating user experience on any device.",
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-women-working-together-chroma-key-screen_482257-124579.jpg",
          imageAlt: "Responsive web design across devices",
          buttonIcon: "Code",
          buttonHref: "#",
        },
        {
          title: "E-commerce Solutions",
          description: "Build powerful and secure online stores that drive sales, manage inventory, and provide a seamless shopping experience for your customers.",
          imageSrc: "http://img.b2bpic.net/free-photo/shopping-cart-front-side_187299-40118.jpg",
          imageAlt: "Shopping cart icon for e-commerce",
          buttonIcon: "ShoppingCart",
          buttonHref: "#",
        },
        {
          title: "Search Engine Optimization (SEO)",
          description: "Optimize your website to rank higher on search engines, increasing organic traffic and visibility to attract more potential clients.",
          imageSrc: "http://img.b2bpic.net/free-photo/working-with-device-lifestyle_23-2151848729.jpg",
          imageAlt: "Magnifying glass over SEO chart",
          buttonIcon: "Search",
          buttonHref: "#",
        },
        {
          title: "Website Maintenance & Support",
          description: "Ensure your website runs smoothly with our ongoing maintenance, security updates, performance monitoring, and technical support.",
          imageSrc: "http://img.b2bpic.net/free-photo/isolated-screen-laptop-man-coding-server-farm-while-listening-music_482257-123629.jpg",
          imageAlt: "Wrench and gear icon for maintenance",
          buttonIcon: "Settings",
          buttonHref: "#",
        },
      ]}
      title="Comprehensive Web Development Services"
      description="We offer a full spectrum of web development services to cover all your digital needs, from initial concept to ongoing maintenance."
      tag="Our Services"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "E-commerce Redesign",
          price: "Fashion Retailer",
          variant: "Next.js, Shopify Integration",
          imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-shopping-bags_1157-31458.jpg",
          imageAlt: "E-commerce store UI",
        },
        {
          id: "2",
          name: "SaaS Platform Launch",
          price: "Tech Startup",
          variant: "React, Node.js, AWS",
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
          imageAlt: "SaaS platform dashboard",
        },
        {
          id: "3",
          name: "Creative Portfolio",
          price: "Design Studio",
          variant: "Vue.js, Headless CMS",
          imageSrc: "http://img.b2bpic.net/free-photo/branding-copyright-design-spaceship-graphic-concept_53876-120958.jpg",
          imageAlt: "Creative portfolio website",
        },
        {
          id: "4",
          name: "Corporate Website",
          price: "Financial Services",
          variant: "WordPress, Custom Plugins",
          imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",
          imageAlt: "Corporate website",
        },
        {
          id: "5",
          name: "Interactive Blog",
          price: "Digital Magazine",
          variant: "Gatsby, Markdown",
          imageSrc: "http://img.b2bpic.net/free-vector/business-flyer-template_23-2148005017.jpg",
          imageAlt: "Blog and magazine website",
        },
        {
          id: "6",
          name: "Online Booking System",
          price: "Health & Wellness",
          variant: "Angular, Firebase",
          imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app-screens_23-2148626966.jpg",
          imageAlt: "Online booking system",
        },
        {
          id: "7",
          name: "Event Landing Page",
          price: "Tech Conference",
          variant: "Next.js, Eventbrite API",
          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-white-party-landing-page-template_23-2149325234.jpg",
          imageAlt: "Event landing page",
        },
      ]}
      title="Showcasing Our Latest Projects"
      description="Explore a selection of our recent web development projects, demonstrating our diverse expertise and commitment to quality."
      tag="Our Portfolio"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="results" data-section="results">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",
          value: "150+",
          title: "Satisfied Clients",
          description: "Building lasting relationships and delivering exceptional digital experiences.",
          icon: Users,
        },
        {
          id: "2",
          value: "200+",
          title: "Projects Completed",
          description: "From small startups to large enterprises, we've brought countless visions to life.",
          icon: Rocket,
        },
        {
          id: "3",
          value: "10+",
          title: "Years of Expertise",
          description: "A decade of mastering web technologies and adapting to industry trends.",
          icon: Award,
        },
      ]}
      title="Driving Tangible Results for Our Clients"
      description="Our commitment to excellence translates into measurable success and long-term partnerships."
      tag="Our Achievements"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          role: "CEO, Tech Innovations",
          testimonial: "Webuild Agency transformed our online presence. Their team understood our vision perfectly and delivered a website that exceeded all our expectations in terms of design and functionality.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-confident-young-woman-start-career-look-determined-get-job-waiting-interview-lean-glass-wall-business-center-smiling-looking-away-satisfied_197531-30572.jpg",
          imageAlt: "Sarah Johnson",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "CTO, Global Solutions",
          testimonial: "The technical expertise of Webuild Agency is unparalleled. They built a scalable and robust platform that has significantly improved our operational efficiency and user engagement.",
          imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg",
          imageAlt: "Michael Chen",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Marketing Director, Creative Hub",
          testimonial: "Our new website from Webuild Agency is not just beautiful, it's a lead generation machine! The seamless user experience and SEO optimization have made a huge difference.",
          imageSrc: "http://img.b2bpic.net/free-photo/office-worker-using-cell-phone-work_329181-20159.jpg",
          imageAlt: "Emily Rodriguez",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Founder, Local Crafts Co.",
          testimonial: "As a small business, finding a reliable web agency was crucial. Webuild Agency provided an affordable yet premium solution that truly captured our brand's essence and helped us reach new customers.",
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-silly-face_1154-110.jpg",
          imageAlt: "David Kim",
        },
        {
          id: "5",
          name: "Jessica Lee",
          role: "Startup Lead, NextGen AI",
          testimonial: "Webuild Agency delivered a cutting-edge website for our AI startup on a tight deadline. Their agile approach and communication were exceptional, resulting in a product we are incredibly proud of.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
          imageAlt: "Jessica Lee",
        },
      ]}
      title="Trusted by Industry Leaders and Innovators"
      description="Hear directly from businesses who have partnered with Webuild Agency to achieve their digital goals."
      tag="What Our Clients Say"
      tagAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "What is your typical web development process?",
          content: "Our process typically involves discovery and planning, UI/UX design, development, testing, deployment, and ongoing maintenance. We prioritize clear communication at every stage to ensure your vision is realized.",
        },
        {
          id: "2",
          title: "How long does it take to build a website?",
          content: "The timeline varies depending on the complexity and scope of the project. A basic website might take 4-6 weeks, while a complex e-commerce or custom platform could take 3-6 months. We provide a detailed project timeline after our initial consultation.",
        },
        {
          id: "3",
          title: "What technologies do you specialize in?",
          content: "We specialize in modern web technologies including React, Next.js, Node.js, Vue.js, along with various headless CMS solutions, cloud platforms (AWS, Azure, GCP), and database management systems. We choose the best tech stack suited for your project's needs.",
        },
        {
          id: "4",
          title: "Do you offer post-launch support and maintenance?",
          content: "Yes, we offer comprehensive post-launch support and maintenance packages tailored to your needs. This includes security updates, performance monitoring, content updates, and bug fixes to ensure your website remains optimal.",
        },
        {
          id: "5",
          title: "How much does a website cost?",
          content: "Website costs depend on various factors such as features, design complexity, and integration requirements. We provide custom quotes after a detailed consultation to understand your specific needs and project scope. We strive to offer transparent and competitive pricing.",
        },
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Have a question about our process, pricing, or what we can do for your business? Find answers to the most common inquiries here. If you can't find what you're looking for, feel free to reach out to us directly."
      buttons={[
        {
          text: "Contact Support",
          href: "#contact",
        },
      ]}
      buttonAnimation="blur-reveal"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in Touch"
      title="Ready to Transform Your Online Presence?"
      description="Let's discuss your project. Fill out the form below or reach out directly to start building something amazing together."
      tagAnimation="blur-reveal"
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By submitting this form, you agree to our Terms and Conditions and Privacy Policy."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Webuild Agency"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Web Design",
              href: "#services",
            },
            {
              label: "E-commerce",
              href: "#services",
            },
            {
              label: "SEO",
              href: "#services",
            },
            {
              label: "Maintenance",
              href: "#services",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Portfolio",
              href: "#portfolio",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Webuild Agency. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
