"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, User, Film, Layers, Linkedin, Github, Mail, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Romet Kriks"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Motion Graphics Studio"
          bottomRightText="hello@rometkriks.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          background={{ variant: "sparkles-gradient" }}
          title="Motion Graphics & Technical Art"
          description="Crafting dynamic visual experiences through cutting-edge motion design and technical artistry. Transform your vision into compelling animated narratives."
          tag="Creative Direction"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
          imageAlt="Motion graphics hero visual"
          buttons={[
            { text: "View Portfolio", href: "work" },
            { text: "Get in Touch", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Me"
          tagIcon={User}
          title="Technical Artist with a Passion for Motion Design"
          description="Romet Kriks"
          subdescription="Motion Graphics & Animation Specialist"
          icon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/male-artist-painting-studio-with-watercolors_23-2149908447.jpg"
          imageAlt="Romet Kriks - Technical Artist"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardFour
          title="Featured Work"
          description="Exploring the intersection of creative vision and technical precision through motion graphics and animation"
          tag="Portfolio"
          tagIcon={Film}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              name: "3D Character Animation",              price: "2024",              variant: "Character Rigging & Animation",              imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148904313.jpg",              imageAlt: "3D character animation project"
            },
            {
              id: "2",              name: "Motion Graphics Title Sequence",              price: "2024",              variant: "Broadcast Design & Animation",              imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148904016.jpg",              imageAlt: "Motion graphics title sequence"
            },
            {
              id: "3",              name: "Visual Effects Compositing",              price: "2024",              variant: "VFX & Post-Production",              imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148887427.jpg",              imageAlt: "Visual effects compositing project"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          buttons={[
            { text: "View Full Portfolio", href: "https://behance.net" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureProcessSteps
          tag="My Approach"
          tagIcon={Layers}
          title="Technical Excellence Meets Creative Vision"
          description="A proven workflow combining conceptual ideation, technical implementation, and iterative refinement to deliver exceptional motion design solutions."
          useInvertedBackground="noInvert"
          steps={[
            {
              number: "01",              title: "Concept & Direction",              tag: "Planning",              description: "Collaborate with clients to establish creative direction, visual style, and technical requirements for the project."
            },
            {
              number: "02",              title: "Design & Previsualization",              tag: "Development",              description: "Create detailed storyboards and animatics to communicate the vision and plan technical implementation strategies."
            },
            {
              number: "03",              title: "Production & Animation",              tag: "Execution",              description: "Build assets, rig characters, create animations, and compose visual effects using industry-standard software."
            },
            {
              number: "04",              title: "Refinement & Delivery",              tag: "Polish",              description: "Iterate based on feedback, optimize performance, and deliver final assets in required formats for all platforms."
            }
          ]}
          buttons={[
            { text: "Discuss Your Project", href: "contact" }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Romet's technical expertise combined with creative instinct transformed our brand's visual identity. The animations are not only visually stunning but also perform flawlessly across all platforms."
          rating={5}
          author="Creative Director, Digital Studios"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              alt: "Client testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              alt: "Client testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              alt: "Client testimonial"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Amazing"
          description="Ready to bring your vision to life? I'm available for freelance projects, consultations, and full-time opportunities. Get in touch to discuss your motion graphics needs."
          useInvertedBackground="noInvert"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company or Project Name",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-vector/flat-timeline-infographic-template_23-2148914623.jpg"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Romet Kriks"
          copyrightText="© 2025 Romet Kriks. All rights reserved."
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/in/rometkriks",              ariaLabel: "LinkedIn Profile"
            },
            {
              icon: Github,
              href: "https://github.com/rometkriks",              ariaLabel: "GitHub Profile"
            },
            {
              icon: Mail,
              href: "mailto:hello@rometkriks.com",              ariaLabel: "Email Contact"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}