"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { BookOpen, Layers, Music, Palette, PenTool, Shield, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Portfolio",          id: "portfolio"},
        {
          name: "About",          id: "about"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Jovan"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "sparkles-gradient"}}
      title="Jovan Markoski"
      description="Graphic Designer & Visual Creator. I create bold visual identities and covers that stand out."
      buttons={[
        {
          text: "View Portfolio",          href: "#portfolio"},
        {
          text: "Contact Me",          href: "#contact"},
      ]}
      mediaAnimation="blur-reveal"
      imageSrc="http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg"
      imageAlt="minimal dark background neon lines"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg",          alt: "Portrait of handsome bearded man in suit"},
        {
          src: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-with-smile-happy-face_141793-111811.jpg",          alt: "Bearded man in brown suit wearing glasses looking with smile on happy face"},
        {
          src: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg",          alt: "Man portrait,"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-confident-bearded-man-brown-suit-wearing-glasses-looking-camera-smiling-cheerfully-with-arms-crossed-standing-purple-background_141793-110713.jpg",          alt: "Happy and confident bearded man in brown suit wearing glasses looking at camera smiling cheerfully with arms crossed standing over purple background"},
        {
          src: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-camera-happy-positive-pointing-with-index-fingers-camera-standing-brown-background_141793-133634.jpg",          alt: "Middle age man with grey hair in dark color shirt looking at camera happy and positive pointing with index fingers at camera standing over brown background"},
      ]}
      marqueeItems={[
        {
          type: "text",          text: "CREATIVE DIRECTION"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-plexus-background-with-connecting-lines-dots-network-communications_1048-12336.jpg",          alt: "3D plexus background with connecting lines and dots, network communications"},
        {
          type: "text",          text: "BRAND IDENTITY"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-render-simplistic-design-with-flowing-particles_1048-13355.jpg",          alt: "3D render of a simplistic design with flowing particles"},
        {
          type: "text",          text: "VISUAL ASSETS"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFive
      textboxLayout="split"
      animationType="blur-reveal"
      useInvertedBackground={false}
      features={[
        {
          title: "Logo Design",          description: "Iconic marks for brands that need to be remembered.",          icon: Sparkles,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/real-life-zodiac-collage_23-2149588383.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543685.jpg"},
          ]
        },
        {
          title: "Cover Art",          description: "Captivating designs for albums, singles, and movie projects.",          icon: Music,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/two-poster-frame-mockup-scandinavian-style-living-room-interior_41470-5137.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-creativity-template_23-2150385990.jpg"},
          ]
        },
        {
          title: "Branding",          description: "Holistic visual systems that elevate your professional presence.",          icon: Shield,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/prism-dispersing-colorful-lights_23-2148599245.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg"},
          ]
        },
        {
          title: "Social Visuals",          description: "Engaging graphics for modern digital platforms and social growth.",          icon: Zap,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/urban-double-exposure-collage-concept_23-2149657944.jpg"},
          ]
        },
      ]}
      title="My Creative Services"
      description="Specializing in crafting high-impact visual identities and digital assets."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          name: "Album Cover A",          price: "Music",          variant: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-shooting-with-projector-medium-shot_23-2149424934.jpg"},
        {
          id: "2",          name: "Poster B",          price: "Print",          variant: "2023",          imageSrc: "http://img.b2bpic.net/free-vector/business-template-abstract-style_23-2148476981.jpg"},
        {
          id: "3",          name: "Brand Identity C",          price: "Corporate",          variant: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-mockup_23-2147730259.jpg"},
        {
          id: "4",          name: "Social Asset D",          price: "Digital",          variant: "2024",          imageSrc: "http://img.b2bpic.net/free-vector/instagram-post-colorful-template-design_52683-147701.jpg"},
        {
          id: "5",          name: "Logo Redesign E",          price: "Branding",          variant: "2023",          imageSrc: "http://img.b2bpic.net/free-photo/digital-media-expert-working-photo-editing-with-professional-software_482257-125064.jpg"},
        {
          id: "6",          name: "Event Poster F",          price: "Print",          variant: "2024",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152143.jpg"},
      ]}
      title="Selected Works"
      description="A curated collection of my most impactful design projects."
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="About Me"
      metrics={[
        {
          icon: PenTool,
          label: "Photoshop",          value: "Expert"},
        {
          icon: Palette,
          label: "Illustrator",          value: "Master"},
        {
          icon: Layers,
          label: "Figma",          value: "Fluent"},
        {
          icon: BookOpen,
          label: "InDesign",          value: "Fluent"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          handle: "@client",          testimonial: "Jovan's work exceeded all our expectations.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/international-womens-day-beautiful-young-woman-with-tulip-her-hand_169016-67269.jpg"},
        {
          id: "2",          name: "Mark D.",          handle: "@tech",          testimonial: "Exceptional eye for design and branding.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg"},
        {
          id: "3",          name: "Emma R.",          handle: "@marketing",          testimonial: "One of the best freelancers we have collaborated with.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg"},
        {
          id: "4",          name: "Leon K.",          handle: "@music",          testimonial: "Fast, creative, and professional.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg"},
        {
          id: "5",          name: "Alice T.",          handle: "@studio",          testimonial: "His work defined our brand identity perfectly.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-with-camera-looking-away_23-2148503575.jpg"},
      ]}
      showRating={true}
      title="Client Feedback"
      description="Hear what my partners say about working with me."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "How do you start a project?",          content: "I usually start with a discovery phase followed by mood boards."},
        {
          id: "2",          title: "Do you work with international clients?",          content: "Yes, I collaborate with agencies and brands globally."},
        {
          id: "3",          title: "What is your typical turnaround time?",          content: "It depends on project complexity, usually 1-2 weeks."},
      ]}
      sideTitle="Common Questions"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Let's Connect"
      description="Ready to bring your vision to life? Get in touch."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Email",          required: true,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Describe your project...",        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/image-bearded-man-stretching-lips-happy-smile-faking-happiness-standing-light-blue-backgr_1258-155337.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Portfolio",              href: "#portfolio"},
            {
              label: "About",              href: "#about"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoText="Jovan."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
