"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Mail } from "lucide-react";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Ben"
          button={{
            text: "Get in Touch",
            href: "#contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          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"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888719283-nfmcx166.jpg"
          imageAlt="Hero 3D render"
          frameStyle="card"
          metricsLabel="Trusted by studios and brands worldwide"
          metrics={[
            {
              id: "1",
              value: "8+",
              label: "Years in 3D"
            },
            {
              id: "2",
              value: "150+",
              label: "Projects Completed"
            },
            {
              id: "3",
              value: "50+",
              label: "Happy Clients"
            }
          ]}
          buttons={[
            {
              text: "View Portfolio",
              href: "#gallery"
            },
            {
              text: "Get Started",
              href: "#contact"
            }
          ]}
        />
      </div>
      
      <div id="gallery" data-section="gallery">
        <ProductCardSix
          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: "Portfolio",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg",
              imageAlt: "3D character model",
              description: "Advanced character sculpting and topology optimization using Blender. Includes rigging setup, UV unwrapping, and texture preparation for animation pipelines."
            },
            {
              id: "2",
              name: "Visual Effects",
              price: "Portfolio",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg",
              imageAlt: "3D animation and effects",
              description: "Particle systems, simulations, and motion graphics. Built with Blender's Geometry Nodes and shader effects to create dynamic visual experiences."
            },
            {
              id: "3",
              name: "Product Rendering",
              price: "Portfolio",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg",
              imageAlt: "3D product render",
              description: "High-fidelity product visualization with photorealistic lighting and materials. Optimized for e-commerce and marketing presentations."
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="about" data-section="about">
        <TextAbout
          title="I bring imagination to life through cutting-edge 3D technology and creative storytelling"
          buttons={[
            {
              text: "View All Work",
              href: "#gallery"
            },
            {
              text: "Get Started",
              href: "#contact"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="skills" data-section="skills">
        <FeatureCardEight
          title="Core Competencies"
          description="Specialized expertise in 3D creation and digital art production"
          features={[
            {
              id: 1,
              title: "3D Modeling",
              description: "Advanced character and environment modeling using Blender and industry-standard techniques",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888720392-ehsyl2xj.jpg"
            },
            {
              id: 2,
              title: "Rendering & Shading",
              description: "Photorealistic rendering with Cycles and specialized material development",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888721289-rze89n00.jpg"
            },
            {
              id: 3,
              title: "Animation",
              description: "Smooth character rigging, motion capture, and keyframe animation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766888722652-paaoqfev.jpg"
            }
          ]}
          textboxLayout="split"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Mail}
          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."
          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."
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseCard
          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: "#"
                }
              ]
            }
          ]}
          copyrightText="© 2025 Ben - 3D Artist & Blender Specialist"
        />
      </div>
    </ThemeProvider>
  );
}