"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from "@/components/navbar/NavbarStyleMinimal";

export default function Home() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Webild"
          button={{ text: "Get Started", href: "https://webild.io" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <div className="w-full bg-gradient-to-b from-background via-background to-card py-16 px-4 md:px-8">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 1"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 2"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 3"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 4"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 5"
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="aspect-video bg-accent rounded-lg overflow-hidden">
                <img
                  src="/placeholders/placeholder-16-9.svg"
                  alt="Portfolio item 6"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}