"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Sparkles, Users, Globe, TrendingUp, Award, Twitter, Linkedin, Github } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Webild"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Transform Your Business With Custom Web Solutions"
          description="We develop beautiful, high-performing websites that help small businesses establish their digital presence and grow online."
          background={{ variant: "sparkles-gradient" }}
          tag="Web Development Agency"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "View Our Work", href: "portfolio" },
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-modern-elegant-website-design-showcase-1772835069391-c420ebff.png?_wi=1",
              imageAlt: "Custom website design example",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/an-e-commerce-website-interface-showing--1772835070548-2c7f3d36.png",
              imageAlt: "E-commerce solution showcase",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-business-website-template-showcasing-s-1772835070441-babe584a.png",
              imageAlt: "Business website template",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-responsive-design-showcase-displaying--1772835070064-4f112b1d.png",
              imageAlt: "Responsive design example",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-website-interface-with-na-1772835071001-23e2ae0a.png",
              imageAlt: "Professional website interface",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-modern-web-application-dashboard-showi-1772835070910-1503f1d2.png",
              imageAlt: "Modern web application",
            },
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Webild"
          title="We're passionate about helping small businesses succeed online with professional web development services that deliver real results."
          useInvertedBackground={false}
          buttons={[{ text: "Learn More", href: "/about" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Why Choose Webild"
          description="We combine technical expertise with strategic thinking to create websites that work for your business."
          tag="Our Expertise"
          features={[
            {
              id: "01",
              title: "Custom Design",
              description: "Tailored website designs that reflect your brand identity and engage your target audience effectively.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-designer-working-on-custom-website-des-1772835070867-520d1685.png?_wi=1",
              imageAlt: "Custom web design process",
            },
            {
              id: "02",
              title: "Responsive Development",
              description: "Fully responsive websites that work flawlessly on all devices, from mobile phones to desktop computers.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-website-displayed-on-multiple-devices--1772835070032-92cc076b.png?_wi=1",
              imageAlt: "Responsive design implementation",
            },
            {
              id: "03",
              title: "SEO Optimized",
              description: "Built-in SEO best practices to help your website rank higher in search engines and attract more visitors.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/an-seo-analytics-dashboard-showing-searc-1772835070514-62bc2eb0.png?_wi=1",
              imageAlt: "SEO optimization dashboard",
            },
            {
              id: "04",
              title: "Fast Performance",
              description: "Lightning-fast loading times and optimized performance for the best user experience and conversion rates.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-website-performance-monitoring-dashboa-1772835070490-56151bb0.png?_wi=1",
              imageAlt: "Performance analytics",
            },
          ]}
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardThree
          title="Our Services"
          description="Comprehensive web solutions designed to meet the unique needs of small businesses."
          tag="Services"
          products={[
            {
              id: "1",
              name: "Business Website",
              price: "Starting at $999",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-business-website-mockup-s-1772835071050-baff1988.png?_wi=1",
              imageAlt: "Professional business website",
            },
            {
              id: "2",
              name: "E-Commerce Store",
              price: "Starting at $1,499",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/an-e-commerce-website-showing-a-product--1772835075091-f72040fa.png?_wi=1",
              imageAlt: "E-commerce platform setup",
            },
            {
              id: "3",
              name: "Web App Development",
              price: "Starting at $2,499",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-sophisticated-web-application-interfac-1772835071688-57b11502.png?_wi=1",
              imageAlt: "Custom web application",
            },
          ]}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <BlogCardOne
          title="Recent Projects"
          description="Explore some of our recent web development projects and see the quality of work we deliver."
          tag="Portfolio"
          blogs={[
            {
              id: "1",
              category: "Business",
              title: "Local Bakery Website",
              excerpt: "Beautiful responsive website for a local bakery featuring online ordering and gallery.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-beautiful-bakery-website-featuring-pro-1772835072711-452a72dc.png",
              imageAlt: "Bakery website project",
              authorName: "Webild Team",
              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-headshot-of-a-web-develop-1772835069341-d6cc5de6.png",
              date: "15 Jan 2025",
            },
            {
              id: "2",
              category: "E-Commerce",
              title: "Fashion Boutique Store",
              excerpt: "Full-featured e-commerce store with inventory management and payment integration.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-fashion-boutique-e-commerce-website-sh-1772835078353-6686ba85.png",
              imageAlt: "Fashion store project",
              authorName: "Webild Team",
              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-headshot-of-a-web-develop-1772835069341-d6cc5de6.png",
              date: "10 Jan 2025",
            },
            {
              id: "3",
              category: "Service",
              title: "Fitness Studio Website",
              excerpt: "Dynamic website with class scheduling, membership portal, and member testimonials.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-fitness-studio-website-featuring-class-1772835073852-4b469dcf.png",
              imageAlt: "Fitness studio website",
              authorName: "Webild Team",
              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-headshot-of-a-web-develop-1772835069341-d6cc5de6.png",
              date: "05 Jan 2025",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Track Record"
          description="Results that speak for themselves - we're proud of what we've accomplished for our clients."
          tag="Impact"
          metrics={[
            {
              id: "1",
              icon: Users,
              title: "Happy Clients",
              value: "150+",
            },
            {
              id: "2",
              icon: Globe,
              title: "Websites Built",
              value: "200+",
            },
            {
              id: "3",
              icon: TrendingUp,
              title: "Avg Traffic Increase",
              value: "340%",
            },
            {
              id: "4",
              icon: Award,
              title: "Years Experience",
              value: "8+",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Real feedback from businesses we've helped establish their online presence."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              handle: "Owner, Bloom Bakery",
              testimonial: "Webild transformed our business! Our website is stunning and has doubled our online orders. Highly recommend!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-a-woman-1772835072690-978cf1ec.png?_wi=1",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "Manager, Fashion Forward",
              testimonial: "The e-commerce store they built has been a game-changer for our sales. Professional and reliable team.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-an-asia-1772835069726-ce614ed1.png?_wi=1",
              imageAlt: "Michael Chen",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              handle: "Director, FitLife Studio",
              testimonial: "Amazing support and expertise. The website has made managing my fitness studio so much easier.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-a-woman-1772835069838-9b63dfbb.png?_wi=1",
              imageAlt: "Emily Rodriguez",
            },
            {
              id: "4",
              name: "David Kim",
              handle: "CEO, Local Marketing",
              testimonial: "Best investment we made for our business. Webild's team is professional, creative, and responsive.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-an-asia-1772835069981-b246a9c2.png?_wi=1",
              imageAlt: "David Kim",
            },
            {
              id: "5",
              name: "Jessica Martinez",
              handle: "Owner, Green Consulting",
              testimonial: "The website exceeded our expectations. Great design, fast performance, and excellent customer service.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-a-woman-1772835070210-5ac50485.png?_wi=1",
              imageAlt: "Jessica Martinez",
            },
            {
              id: "6",
              name: "Robert Thompson",
              handle: "Founder, Tech Startup",
              testimonial: "Professional developers who understand business needs. Would work with them again in a heartbeat.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaeDSNUHXfjKtvhLOnnnLya22j/a-professional-portrait-photo-of-a-man-i-1772835069694-e0e14a61.png?_wi=1",
              imageAlt: "Robert Thompson",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to launch your online presence? Get in touch with our team today and let's build something amazing together."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[{ text: "Contact Us Now", href: "/about" }]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Webild"
          copyrightText="© 2025 Webild. All rights reserved."
          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" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}