'use client';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Zap, Target, Shield, Star, Rocket } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  const navItems = [{ name: "Home", id: "/" }, { name: "Contact", id: "/contact" }];
  return (
    <ThemeProvider>
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems} />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial 
          title="Welcome to Webild"
          description="Revolutionizing your digital experience with modern components."
          background={{ variant: "gradient-bars" }}
          testimonials={[]}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureHoverPattern 
          title="Core Features"
          description="Everything you need to succeed."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { icon: Zap, title: "Fast", description: "Lightning fast performance." },
            { icon: Target, title: "Precise", description: "Precision engineered tools." }
          ]}
        />
      </div>
      <div id="products" data-section="products">
        <ProductCardTwo 
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          title="Our Products"
          description="Quality items for your needs."
          products={[
            { id: "1", brand: "Brand A", name: "Product 1", price: "$10", rating: 5, reviewCount: "10", imageSrc: "" },
            { id: "2", brand: "Brand B", name: "Product 2", price: "$20", rating: 4, reviewCount: "20", imageSrc: "" },
            { id: "3", brand: "Brand C", name: "Product 3", price: "$30", rating: 5, reviewCount: "30", imageSrc: "" }
          ]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen 
          testimonial="Amazing service!"
          rating={5}
          author="John Doe"
          avatars={[]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Get in Touch"
          description="We'd love to hear from you."
          inputs={[{ name: "email", type: "email", placeholder: "Email" }, { name: "name", type: "text", placeholder: "Name" }]} 
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseCard 
          logoText="Webild"
          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
        />
      </div>
    </ThemeProvider>
  );
}