"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
  Sparkles,
  Award,
  Zap,
  PenTool,
  Code,
  Lightbulb,
  Smartphone,
  Shield,
  Trophy,
  Users,
  Target,
  Heart,
  Star,
  Rocket,
} from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webuild"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Projects", id: "#projects" },
            { name: "Services", id: "#services" },
            { name: "About", id: "/about" },
          ]}
          button={{
            text: "Start Project",            href: "#contact"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Transform Your Ideas into Stunning Digital Experiences"
          description="We craft beautiful, responsive websites that captivate your audience and drive business growth. From concept to launch, we bring your vision to life with cutting-edge design and development."
          tag="Web Design Agency"
          tagIcon={Sparkles}
          background={{
            variant: "glowing-orb"}}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-stunning-web-design-agency-workspace-w-1772996198341-22245b4e.png"
          imageAlt="Web design agency workspace with modern displays"
          imagePosition="right"
          mediaAnimation="slide-up"
          buttons={[
            {
              text: "View Our Work",              href: "#projects"},
            {
              text: "Get Started",              href: "#contact"},
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardOne
          title="Featured Projects"
          description="Explore our latest work showcasing our expertise in web design and development across diverse industries."
          tag="Portfolio"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Luxury Fashion E-Commerce",              price: "Custom Design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-sleek-e-commerce-website-design-for-a--1772996200095-d08f9b49.png",              imageAlt: "Luxury fashion ecommerce website"},
            {
              id: "2",              name: "SaaS Dashboard Platform",              price: "Full Stack Development",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-vibrant-saas-dashboard-interface-desig-1772996199695-16a944db.png",              imageAlt: "SaaS analytics dashboard interface"},
            {
              id: "3",              name: "Architecture Portfolio",              price: "Design & Development",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-creative-portfolio-website-for-an-arch-1772996200200-af72d9d5.png",              imageAlt: "Architecture firm portfolio website"},
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureHoverPattern
          title="Our Services"
          description="Comprehensive digital solutions tailored to elevate your brand and engage your audience."
          tag="What We Offer"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              icon: PenTool,
              title: "Web Design",              description: "Stunning, user-centric designs that capture your brand essence and engage visitors with intuitive interfaces."},
            {
              icon: Code,
              title: "Development",              description: "Robust, scalable web applications built with modern technologies and best practices for performance."},
            {
              icon: Lightbulb,
              title: "Strategy & UX",              description: "Data-driven strategies and user experience optimization to maximize conversions and user satisfaction."},
            {
              icon: Smartphone,
              title: "Responsive Design",              description: "Seamless experiences across all devices, ensuring your website looks perfect on mobile, tablet, and desktop."},
            {
              icon: Zap,
              title: "Performance",              description: "Lightning-fast load times and optimized performance to keep your users engaged and improve SEO rankings."},
            {
              icon: Shield,
              title: "Security",              description: "Enterprise-grade security measures to protect your website and user data with industry-leading standards."},
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Why Choose Webuild"
          description="We're not just web designers—we're digital strategists committed to transforming your ideas into market-winning solutions."
          tag="Our Expertise"
          tagIcon={Trophy}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png"
          imageAlt="Team collaboration and strategic planning"
          bulletPoints={[
            {
              icon: Users,
              title: "Expert Team",              description: "Designers, developers, and strategists with years of industry experience and proven track record."},
            {
              icon: Target,
              title: "Results-Driven",              description: "Every project is guided by clear objectives and measured by real business impact and user engagement."},
            {
              icon: Heart,
              title: "Client-Focused",              description: "We treat your business as our own, investing time to understand your goals and deliver exceptional solutions."},
            {
              icon: Zap,
              title: "Innovation",              description: "We stay ahead of design and technology trends to deliver cutting-edge solutions that set you apart."},
          ]}
          buttons={[
            {
              text: "Learn More",              href: "/about"},
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Clients Say"
          description="Trusted by leading companies and startups worldwide to deliver exceptional digital experiences."
          tag="Client Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              title: "Transformed Our Online Presence",              quote: "Webuild completely redesigned our website and the results have been phenomenal. Our conversion rates increased by 45% within three months. The team's attention to detail and strategic approach was exactly what we needed.",              name: "Sarah Johnson",              role: "CEO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-confident-bus-1772996199716-3232c800.png",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              title: "Exceptional Development Partnership",              quote: "Working with Webuild was a game-changer for our startup. They didn't just build our platform—they helped us think strategically about our product. The quality of their work and communication was outstanding.",              name: "Michael Chen",              role: "Founder",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-male-entrepre-1772996198379-1845b2c5.png",              imageAlt: "Michael Chen"},
            {
              id: "3",              title: "True Digital Partners",              quote: "The Webuild team goes beyond typical agency work. They truly understand our brand and market. Their designs are not only beautiful but incredibly functional. Highly recommend for any serious digital project.",              name: "Emily Rodriguez",              role: "Marketing Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-woman-product-1772996198712-9928c824.png",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              title: "Unmatched Creative Excellence",              quote: "From initial concept to final launch, Webuild delivered excellence at every step. Their creative direction elevated our brand significantly. The website has become our strongest marketing asset.",              name: "David Kim",              role: "Design Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-man-design-di-1772996199164-0b5c717e.png",              imageAlt: "David Kim"},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Rocket}
          title="Let's Bring Your Vision to Life"
          description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
          background={{
            variant: "plain"}}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Start Your Project",              href: "/contact"},
            {
              text: "Schedule a Call",              href: "mailto:hello@webuild.com"},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Webuild"
          leftLink={{
            text: "Privacy Policy",            href: "#privacy"}}
          rightLink={{
            text: "Terms of Service",            href: "#terms"}}
        />
      </div>
    </ThemeProvider>
  );
}