"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Feather, Hash, Layers, MessageSquare } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumSizeLargeTitles"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "home" },
              { name: "Services", id: "services" },
              { name: "Portfolio", id: "portfolio" },
              { name: "About", id: "about" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="Nijaran."
          />
        </div>

        <div id="home" data-section="home">
          <HeroSplitKpi
            title="Crafting Visual Experiences That Drive Results"
            description="I’m Nijaran — a Graphic Designer specializing in branding, social media creatives, packaging design, and UI visuals."
            tag="Hello There!"
            buttons={[
              { text: "View Portfolio", href: "#portfolio" },
              { text: "Hire Me", href: "#contact" },
            ]}
            kpis={[
              { value: "50+", label: "Projects Completed" },
              { value: "100%", label: "Client Satisfaction" },
              { value: "4+", label: "Years Experience" }
            ]}
            enableKpiAnimation={true}
            imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=1"
            background={{ variant: "sparkles-gradient" }}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardTwentyFive
            animationType="depth-3d"
            textboxLayout="split"
            useInvertedBackground={false}
            features={[
              {
                title: "Logo & Branding",                description: "Brand identities that communicate your story and leave a lasting impression.",                icon: Feather,
                mediaItems: [
                  { imageSrc: "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148070299.jpg?_wi=1", imageAlt: "Logo Design" },
                  { imageSrc: "http://img.b2bpic.net/free-vector/back-school-label-collection_23-2148197638.jpg?_wi=1", imageAlt: "Branding" },
                ],
              },
              {
                title: "Social Media Design",                description: "High-impact designs tailored for engagement on Instagram, LinkedIn and more.",                icon: Hash,
                mediaItems: [
                  { imageSrc: "http://img.b2bpic.net/free-vector/information-technology-vectors_23-2147501064.jpg?_wi=1", imageAlt: "Social Media" },
                  { imageSrc: "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148070299.jpg?_wi=2", imageAlt: "Design" },
                ],
              },
              {
                title: "UI/UX Design",                description: "Modern, user-friendly interfaces for web and mobile applications.",                icon: Layers,
                mediaItems: [
                  { imageSrc: "http://img.b2bpic.net/free-vector/back-school-label-collection_23-2148197638.jpg?_wi=2", imageAlt: "UI" },
                  { imageSrc: "http://img.b2bpic.net/free-vector/information-technology-vectors_23-2147501064.jpg?_wi=2", imageAlt: "UX" },
                ],
              },
            ]}
            title="What I Create"
            description="I help brands stand out in competitive markets through clean, modern, and conversion-driven design solutions."
          />
        </div>

        <div id="portfolio" data-section="portfolio">
          <ProductCardFour
            textboxLayout="split"
            gridVariant="bento-grid"
            useInvertedBackground={true}
            animationType="blur-reveal"
            products={[
              { id: "p1", name: "NR Creations", price: "Print Design", variant: "Featured", imageSrc: "http://img.b2bpic.net/free-vector/realistic-new-year-2020-poster-template_52683-30518.jpg?_wi=1" },
              { id: "p2", name: "Flower Shop Poster", price: "Marketing", variant: "Featured", imageSrc: "http://img.b2bpic.net/free-vector/spring-sale-flyer-template_23-2148857394.jpg?_wi=1" },
              { id: "p3", name: "Tech Startup Kit", price: "Corporate", variant: "Featured", imageSrc: "http://img.b2bpic.net/free-vector/letterhead-template-design_1142-369.jpg?_wi=1" },
            ]}
            title="Featured Projects"
            description="A curated collection of my recent work across branding, print, and digital design."
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            tag="About Me"
            tagIcon={MessageSquare}
            title="The Story Behind Nijaran Designs"
            description="I’m a Sri Lanka–based graphic designer who blends creativity with strategy. My work focuses on clean visuals, modern aesthetics, and designs that convert."
            subdescription="With over 50 projects completed, I help brands stand out in competitive markets through thoughtful, results-oriented design."
            icon={MessageSquare}
            imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=2"
            useInvertedBackground={false}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            textboxLayout="split"
            useInvertedBackground={true}
            testimonials={[
              { id: "t1", name: "Mohamed Shan", date: "Oct 2025", title: "CEO", quote: "Nijaran delivered exceptional designs that boosted our customer engagement. Highly professional and creative!", tag: "Ayna Beauty", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg", imageSrc: "http://img.b2bpic.net/free-vector/information-technology-vectors_23-2147501064.jpg?_wi=3" },
              { id: "t2", name: "Nimesha", date: "Sept 2025", title: "Marketing Director", quote: "The branding package was exactly what we needed. Clean, modern, and delivered on time.", tag: "Marketing Co", avatarSrc: "http://img.b2bpic.net/free-photo/low-angle-smiley-lawyer-posing-outdoors_23-2148230752.jpg", imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-logo-flat-design_23-2148203432.jpg" },
              { id: "t3", name: "Vishnu", date: "Aug 2025", title: "Founder", quote: "Best poster designs we've ever had. Nijaran understands visual hierarchy perfectly.", tag: "Casino Royale", avatarSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", imageSrc: "http://img.b2bpic.net/free-vector/realistic-new-year-2020-poster-template_52683-30518.jpg?_wi=2" },
            ]}
            title="What Clients Say"
            description="Trusted by brands to deliver high-quality, creative, and professional design work."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Contact"
            title="Ready to get started?"
            description="Bring your brand to life today with professional, results-oriented design."
            buttons={[{ text: "Contact Me", href: "mailto:thenijaranofficalinfo@gmail.com" }]}
            background={{ variant: "sparkles-gradient" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="Nijaran Designs"
            columns={[
              { items: [{ label: "Home", href: "#home" }, { label: "Portfolio", href: "#portfolio" }, { label: "Contact", href: "#contact" }] },
              { items: [{ label: "Branding", href: "#services" }, { label: "UI/UX", href: "#services" }, { label: "Video", href: "#services" }] },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}