"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterSocial from "@/components/sections/footer/FooterSocial";

export default function LandingPage() {
  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={[
            { name: "Gallery", id: "gallery" },
            { name: "About", id: "about" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get in Touch", href: "contact" }}
          brandName="Ben"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboard
          title="3D Artist & Blender Specialist"
          description="Crafting immersive digital experiences through advanced 3D modeling, rendering, and animation. Transforming concepts into stunning visual reality."
          tag="3D Creative"
          buttons={[
            { text: "View Portfolio", href: "gallery" },
            { text: "Get Started", href: "contact" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
          imageAlt="3D Artist Portfolio"
          frameStyle="card"
        />
      </div>
      
      <div id="gallery" data-section="gallery">
        <ProductCardOne
          title="Featured Work"
          description="Explore my latest 3D renders and creative projects. Each piece showcases technical expertise and artistic vision."
          products={[
            {
              id: "1",
              name: "Character Modeling",
              price: "Advanced",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
              imageAlt: "3D character model",
            },
            {
              id: "2",
              name: "Visual Effects",
              price: "Dynamic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
              imageAlt: "3D animation and effects",
            },
            {
              id: "3",
              name: "Product Rendering",
              price: "Photorealistic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
              imageAlt: "3D product render",
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
          tabs={[
            {
              id: "vision",
              label: "Vision",
              description: "Bringing concepts to life through innovative 3D visualization and artistic storytelling.",
            },
            {
              id: "expertise",
              label: "Expertise",
              description: "Specialized in Blender, character modeling, photorealistic rendering, and animation pipelines.",
            },
            {
              id: "approach",
              label: "Approach",
              description: "Combining technical excellence with creative vision to deliver stunning visual results.",
            },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
          imageAlt="About section"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="skills" data-section="skills">
        <MetricCardEleven
          title="Core Competencies"
          description="Specialized expertise in 3D creation and digital art production"
          metrics={[
            {
              id: "1",
              value: "8+",
              title: "Years in 3D",
              description: "Professional experience in 3D creation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
              imageAlt: "3D Modeling",
            },
            {
              id: "2",
              value: "150+",
              title: "Projects Completed",
              description: "High-quality deliverables across industries",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
              imageAlt: "Rendering & Shading",
            },
            {
              id: "3",
              value: "50+",
              title: "Happy Clients",
              description: "Satisfied clients worldwide",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
              imageAlt: "Animation",
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to bring your vision to life?"
          description="Interested in collaborating on your next 3D project? Reach out directly or subscribe for updates on my latest work."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888725581-tp75ftz7.jpg"
          imageAlt="Contact section"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Ben"
          columns={[
            {
              title: "Work",
              items: [
                { label: "Portfolio", href: "gallery" },
                { label: "Services", href: "skills" },
              ],
            },
            {
              title: "About",
              items: [
                { label: "Bio", href: "about" },
                { label: "Contact", href: "contact" },
              ],
            },
            {
              title: "Connect",
              items: [
                { label: "Email", href: "mailto:ben@example.com" },
                { label: "ArtStation", href: "https://artstation.com" },
              ],
            },
          ]}
          copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
        />
      </div>
    </ThemeProvider>
  );
}