"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Feather, Hash, Layers } 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">
      <HeroOverlay
      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",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=1"
    />
  </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",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=2",
          imageAlt: "neon portrait graphic designer",
        },
        {
          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",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148070299.jpg?_wi=3",
          imageAlt: "photoshop logo icon vector",
        },
        {
          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",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/back-school-label-collection_23-2148197638.jpg?_wi=3",
          imageAlt: "illustrator logo icon vector",
        },
      ]}
      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}
      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">
      <TextSplitAbout
      useInvertedBackground={false}
      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.",
        "With over 50 projects completed, I help brands stand out in competitive markets through thoughtful, results-oriented design.",
      ]}
    />
  </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",
          imageAlt: "canva logo icon design tool",
        },
        {
          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",
          imageAlt: "capcut logo icon video",
        },
        {
          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",
          imageAlt: "casino poster design gold black",
        },
        {
          id: "t4",
          name: "Sarah Miller",
          date: "July 2025",
          title: "Brand Lead",
          quote: "Incredible communication and beautiful results. Truly a talent in the design space.",
          tag: "Startup Hub",
          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businessman-close-up_23-2148746290.jpg",
          imageSrc: "http://img.b2bpic.net/free-vector/spring-sale-flyer-template_23-2148857394.jpg?_wi=2",
          imageAlt: "floral shop poster design",
        },
        {
          id: "t5",
          name: "David Chen",
          date: "June 2025",
          title: "Director",
          quote: "A true professional who brings unique artistic vision to every project.",
          tag: "Tech Solutions",
          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg",
          imageSrc: "http://img.b2bpic.net/free-vector/letterhead-template-design_1142-369.jpg?_wi=2",
          imageAlt: "corporate branding design tech company",
        },
      ]}
      title="What Clients Say"
      description="Trusted by brands to deliver high-quality, creative, and professional design work."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "canvas-reveal",
      }}
      text="Ready to bring your brand to life? Let's discuss your project today and create something extraordinary."
      buttons={[
        {
          text: "Contact Me",
          href: "mailto:thenijaranofficalinfo@gmail.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Links",
          items: [
            {
              label: "Home",
              href: "#home",
            },
            {
              label: "Portfolio",
              href: "#portfolio",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Branding",
              href: "#services",
            },
            {
              label: "UI/UX",
              href: "#services",
            },
            {
              label: "Video",
              href: "#services",
            },
          ],
        },
      ]}
      copyrightText="© 2026 Nijaran Designs. All Rights Reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}