"use client";

import { ThemeProvider } from "next-themes";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import { Sparkles } from 'lucide-react';

export default function Home() {
  const navItems = [
    { name: "Home", href: "/" },
    { name: "Tenders & Procurement", href: "/tenders-procurement" }
  ];

  return (
    <ThemeProvider
      attribute="class"
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <NavbarStyleCentered
        navItems={navItems}
        brandName="Webild"
        logoSrc="/placeholder-logo.svg"
      />

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Welcome to Webild"
          description="Your ultimate platform for discovering and managing tenders and procurement opportunities."
          tag="Innovation in Procurement"
          tagIcon={Sparkles}
          background={{ variant: 'sparkles-gradient' }}
          buttons={[{ text: "Explore Our Services", href: "/tenders-procurement" }]}
          imageSrc="https://images.unsplash.com/photo-1517245381830-dfc798059882?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwzMHx8YnVzaW5lc3N8ZW58MHx8fHwxNzE1Nzc2NTUwfDA&ixlib=rb-4.0.3&q=80&w=1080"
          imageAlt="Modern office with team working"
        />
      </div>
    </ThemeProvider>
  );
}
