"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Play, Zap, Star } from "lucide-react";

export default function MotionPortfolioPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Alex Motion"
          button={{
            text: "Get in Touch",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Motion Graphics Designer"
          description="Crafting compelling visual stories through animation, design, and movement. Specializing in explainer videos, brand animations, and immersive digital experiences."
          tag="Creative Motion Specialist"
          tagIcon={Sparkles}
          background={{ variant: "canvas-reveal" }}
          imageSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
          imageAlt="Motion graphics designer showcase"
          buttons={[
            { text: "View My Work", href: "portfolio" },
            { text: "Let's Connect", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Me"
          description={[
            "I'm a passionate motion graphics designer with 8+ years of experience creating stunning visual animations. My expertise spans from concept development through final delivery, working with brands to bring their stories to life.",            "I specialize in creating animations that blend creativity with strategy, ensuring every motion serves a purpose and resonates with audiences. From sleek UI animations to cinematic explainer videos, I deliver work that moves people.",            "Currently, I work with leading creative agencies and brands directly, helping them elevate their digital presence through thoughtful, beautifully crafted motion design."
          ]}
          useInvertedBackground="invertDefault"
          showBorder={false}
          buttons={[
            { text: "Download Resume", href: "#" }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Featured Projects"
          description="A selection of recent motion design work showcasing various styles and disciplines"
          tag="Portfolio"
          tagIcon={Play}
          products={[
            {
              id: "1",              name: "Brand Reveal Animation",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg",              imageAlt: "Brand reveal animation project"
            },
            {
              id: "2",              name: "SaaS Explainer Video",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-photo/technician-employs-ai-chatbot-pc-monitor-executing-programming-code_482257-120774.jpg",              imageAlt: "SaaS explainer video project"
            },
            {
              id: "3",              name: "3D Product Animation",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-photo/woman-using-ai-chatbot-interface-generate-video-game-spaceship-environments_482257-125800.jpg",              imageAlt: "3D product animation project"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Work", href: "#" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="Services & Expertise"
          description="Comprehensive motion design solutions tailored to your brand's unique needs and vision"
          tag="What I Do"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
          imageAlt="Motion design services"
          useInvertedBackground="invertDefault"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",              title: "Explainer Videos",              content: "Engaging animated videos that break down complex concepts into compelling visual narratives. Perfect for product launches, onboarding, and educational content."
            },
            {
              id: "2",              title: "Brand Animation",              content: "Distinctive motion design that brings your brand identity to life. From logo animations to brand intros, creating memorable visual experiences."
            },
            {
              id: "3",              title: "UI/UX Animation",              content: "Smooth, purposeful animations that enhance user experience. Microinteractions, transitions, and interactive elements that delight users."
            },
            {
              id: "4",              title: "3D Motion Design",              content: "Cutting-edge 3D animation and motion graphics. Creating depth, dimension, and visual impact with advanced 3D techniques and rendering."
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Client Testimonials"
          description="What clients and collaborators say about working on motion design projects"
          tag="Social Proof"
          tagIcon={Star}
          showRating={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahmitchell",              testimonial: "Alex transformed our product concept into a stunning explainer video. The attention to detail and creative direction exceeded our expectations. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "David Chen",              handle: "@davidchen_co",              testimonial: "Working with Alex was a game-changer for our brand animations. The motion design perfectly captured our brand essence and helped us stand out in the market.",              rating: 5,
              imageSrc: "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",              imageAlt: "David Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmarod_creative",              testimonial: "Exceptional talent in motion graphics. Alex's ability to translate ideas into compelling animations is remarkable. Very professional and easy to work with.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "James Wilson",              handle: "@jameswilsondesign",              testimonial: "The 3D motion design work was phenomenal. Alex brought our vision to life with technical expertise and creative excellence. A true motion design professional.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "James Wilson"
            },
            {
              id: "5",              name: "Lisa Park",              handle: "@lisapark_studios",              testimonial: "Outstanding motion designer. Delivered high-quality work on time and was incredibly collaborative throughout the entire project. Would definitely work together again.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Lisa Park"
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Amazing"
          description="Have a project in mind? I'd love to hear about it. Get in touch and let's discuss how motion design can elevate your brand."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149207962.jpg"
          imageAlt="Motion graphics studio workspace"
          mediaPosition="right"
          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/Brand Name",              required: false
            },
            {
              name: "projectType",              type: "text",              placeholder: "Project Type (e.g., Explainer Video)",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell me about your project and vision...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/gradient-triangles-abstract-sport-background_52683-14013.jpg"
          imageAlt="Motion graphics background"
          logoText="Alex Motion"
          copyrightText="© 2024 Alex Motion. All rights reserved."
          columns={[
            {
              title: "Work",              items: [
                { label: "Portfolio", href: "portfolio" },
                { label: "Case Studies", href: "#" },
                { label: "Latest Projects", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Email", href: "contact" },
                { label: "LinkedIn", href: "#" },
                { label: "Instagram", href: "#" },
                { label: "Behance", href: "#" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Explainer Videos", href: "#" },
                { label: "Brand Animation", href: "#" },
                { label: "UI Animation", href: "#" },
                { label: "3D Motion", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}