'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, Shield, Star, CheckCircle, ArrowRight } from 'lucide-react';

const navItems = [
  { name: 'Home', id: '/' },
  { name: 'About', id: '/about' },
  { name: 'Contact', id: '/contact' }
];

export default function Page() {
  return (
    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems} brandName="Webild" />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial 
          title="Welcome to Webild"
          description="The future of building digital experiences is here."
          background={{ variant: "gradient-bars" }}
          testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Incredible experience!", rating: 5 }]}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureHoverPattern
          title="Core Features"
          description="Powerful tools for your workflow."
          animationType="slide-up"
          useInvertedBackground={false}
          textboxLayout="default"
          features={[
            { icon: Zap, title: "Speed", description: "Lightning fast performance." },
            { icon: Shield, title: "Security", description: "Top-tier safety standards." }
          ]}
        />
      </div>
      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Products"
          description="Check out our latest innovations."
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "p1", brand: "Brand A", name: "Product 1", price: "$99", rating: 4, reviewCount: "10", imageSrc: "/img1.jpg" },
            { id: "p2", brand: "Brand B", name: "Product 2", price: "$199", rating: 5, reviewCount: "20", imageSrc: "/img2.jpg" },
            { id: "p3", brand: "Brand C", name: "Product 3", price: "$299", rating: 4, reviewCount: "30", imageSrc: "/img3.jpg" }
          ]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Simply the best platform I have used!"
          rating={5}
          author="John Smith"
          avatars={[{ src: "/a1.jpg", alt: "User" }]}
          ratingAnimation="blur-reveal"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get In Touch"
          description="We'd love to hear from you."
          inputs={[
            { name: "name", type: "text", placeholder: "Name" },
            { name: "email", type: "email", placeholder: "Email" }
          ]}
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Webild"
          columns={[{ title: "Company", items: [{ label: "About", href: "/about" }] }]}
        />
      </div>
    </ThemeProvider>
  );
}