"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Code, Layers, Shield, Sparkles, Workflow, Zap, Star } from "lucide-react";
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="Romet Kriks"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
      <HeroBillboard
      title="Hero"
      description="Motion graphics technical artist specializing in animation, visual effects, and creative motion design. Transforming ideas into dynamic visual experiences."
      background={{ variant: "sparkles-gradient" }}
      tag="Label"
      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
      imageSrc="https://placehold.co/600x400"
      />
      </div>

      <div id="about" data-section="about">
      <FeatureCardSeven
      features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
      animationType="none"
      title="something different? didn't like the approach"
      description="Dedicated to creating compelling motion experiences through technical expertise and creative vision."
      tag="Label"
      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
      textboxLayout="default"
      useInvertedBackground="noInvert"
      />
      </div>

      <div id="work" data-section="work">
        <ProductCardFour 
          title="Featured Projects"
          description="A selection of recent motion graphics work showcasing technical skill and creative innovation across various mediums and industries."
          textboxLayout="default"
          products={[
            {
              id: "1",              name: "Corporate Branding Animation",              price: "2024",              variant: "Cinema 4D • After Effects • 30s",              imageSrc: "https://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149207962.jpg",              imageAlt: "Corporate branding animation project"
            },
            {
              id: "2",              name: "Character Animation Sequence",              price: "2024",              variant: "Blender • Motion Design • 45s",              imageSrc: "https://img.b2bpic.net/free-photo/technician-employs-ai-chatbot-pc-monitor-executing-programming-code_482257-120774.jpg",              imageAlt: "Character animation project"
            },
            {
              id: "3",              name: "Visual Effects Composition",              price: "2023",              variant: "Houdini • Nuke • VFX",              imageSrc: "https://img.b2bpic.net/free-photo/focused-editor-woman-works-video-montage-creative-software_482257-120176.jpg",              imageAlt: "Visual effects composition project"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="skills" data-section="skills">
      <FeatureCardSeven
      features={[
      {
      icon: Zap,
      title: "3D Animation",              description: "Character rigging, keyframe animation, motion capture integration, and complex mechanical animation using industry-standard software."
      },
      {
      icon: Shield,
      title: "VFX & Compositing",              description: "Advanced compositing, particle systems, green screen keying, color grading, and seamless integration of visual effects into final footage."
      },
      {
      icon: Code,
      title: "Motion Design",              description: "Kinetic typography, logo animations, transition design, and creative motion solutions for broadcast and digital platforms."
      },
      {
      icon: Layers,
      title: "3D Modeling",              description: "Photorealistic modeling, UV unwrapping, texturing, and lighting setup for product visualization and architectural animation."
      },
      {
      icon: Sparkles,
      title: "Creative Direction",              description: "Conceptual development, storyboarding, creative problem-solving, and visual narrative construction for complex projects."
      },
      {
      icon: Workflow,
      title: "Pipeline Optimization",              description: "Streamlined production workflows, asset management, version control, and efficient rendering pipelines for large-scale projects."
      }
      ]}
      animationType="slide-up"
      title="Technical Skills"
      description="Core competencies and specialized expertise in motion graphics and animation production."
      tag="Label"
      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
      textboxLayout="default"
      useInvertedBackground="noInvert"
      />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve 
          cardTitle="Trusted by leading creative studios and filmmakers worldwide"
          cardTag="Client Testimonials"
          cardTagIcon={Star}
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Alexandra Chen",              imageSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              imageAlt: "Alexandra Chen, Creative Director"
            },
            {
              id: "2",              name: "Marcus Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg",              imageAlt: "Marcus Johnson, Film Producer"
            },
            {
              id: "3",              name: "Sarah Williams",              imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13831.jpg",              imageAlt: "Sarah Williams, Director of Photography"
            },
            {
              id: "4",              name: "David Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-145.jpg",              imageAlt: "David Martinez, Design Director"
            },
            {
              id: "5",              name: "Emma Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6551.jpg",              imageAlt: "Emma Thompson, Studio Head"
            },
            {
              id: "6",              name: "James Park",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg",              imageAlt: "James Park, Executive Producer"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText 
          text="Ready to bring your creative vision to life? Let's collaborate on your next motion graphics project."
          animationType="reveal-blur"
          buttons={[
            {
              text: "Get In Touch",              href: "mailto:contact@rometkriks.com"
            },
            {
              text: "View Full Portfolio",              href: "https://portfolio.rometkriks.com"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis 
          logoText="romet kriks"
          columns={[
            {
              items: [
                { label: "About", href: "about" },
                { label: "Work", href: "work" },
                { label: "Skills", href: "skills" }
              ]
            },
            {
              items: [
                { label: "Email", href: "mailto:romet@example.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Vimeo", href: "https://vimeo.com" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Privacy", href: "#privacy" },
                { label: "Terms", href: "#terms" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}