"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, Sparkles, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="layered-gradient"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      button={{
        text: "Hire Me",        href: "#contact"}}
      brandName="My Creative Hub"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogoBillboard
      background={{
        variant: "downward-rays-animated-grid"}}
      logoText="My Creative Hub"
      description="Where ideas take flight and creativity knows no bounds. Discover a world of unique designs, captivating visuals, and innovative solutions crafted with passion."
      buttons={[
        {
          text: "Explore Work",          href: "#projects"},
        {
          text: "Get in Touch",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/high-end-home-office-trendy-loft-apartment-with-empty-desk_482257-122616.jpg"
      imageAlt="Creative workspace with digital art tools"
      mediaAnimation="slide-up"
      frameStyle="browser"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="About Me & My Passion"
      description="Hello! I'm a passionate creative professional dedicated to bringing unique visions to life. With a keen eye for detail and a love for innovation, I specialize in crafting engaging digital experiences and compelling visual stories. My journey is fueled by a desire to create impactful work that resonates with audiences and pushes creative boundaries."
      bulletPoints={[
        {
          title: "Innovative Design",          description: "Always exploring new techniques and tools to deliver cutting-edge designs."},
        {
          title: "Client-Centric Approach",          description: "Collaborating closely with clients to ensure their vision is perfectly realized."},
        {
          title: "Smooth Experiences",          description: "Focused on creating seamless and intuitive user interfaces for optimal engagement."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/skilled-experienced-male-engineer-creating-designs-making-drawings_273609-14147.jpg"
      imageAlt="Creative person smiling"
      mediaAnimation="opacity"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Graphic Design",          description: "Crafting stunning visual identities, logos, and marketing materials that capture attention.",          imageSrc: "http://img.b2bpic.net/free-photo/photo-editing-software-use_23-2152014663.jpg",          imageAlt: "Graphic design software interface"},
        {
          title: "Motion Graphics",          description: "Bringing stories to life with dynamic animations and engaging video content.",          imageSrc: "http://img.b2bpic.net/free-photo/empty-online-radio-studio-broadcasting-room-with-professional-microphone-video-light-used-podcast-transmission-video-podcasting-setup-with-digital-mixer-console-laptop-computer_482257-33423.jpg",          imageAlt: "Motion graphics animation software"},
        {
          title: "Brand Strategy",          description: "Developing cohesive brand strategies that communicate your unique value and vision.",          imageSrc: "http://img.b2bpic.net/free-photo/data-analytics-tablet_23-2151957101.jpg",          imageAlt: "Branding identity elements"},
      ]}
      title="My Expertise & Services"
      description="I offer a comprehensive range of creative services tailored to your needs. From initial concept to final execution, I ensure every project is handled with precision and artistic flair."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Abstract Digital Artwork",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-photo/textured-paint-background-wallpaper-abstract-art-with-mixed-colors_53876-176791.jpg",          imageAlt: "Abstract digital art"},
        {
          id: "2",          name: "Responsive Portfolio Website",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg",          imageAlt: "Responsive website design"},
        {
          id: "3",          name: "Brand Identity Design",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-vector/abstract-classic-blue-business-card-template_52683-32298.jpg",          imageAlt: "Brand logo identity mock-up"},
        {
          id: "4",          name: "Short Film Title Sequence",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139239.jpg",          imageAlt: "Short film title sequence"},
        {
          id: "5",          name: "Architectural Photography Series",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-camera-nature_23-2148192735.jpg",          imageAlt: "Architectural photography"},
        {
          id: "6",          name: "Interactive UI Concept",          price: "N/A",          imageSrc: "http://img.b2bpic.net/free-photo/person-suffering-from-technology-addiction-cybersickness_23-2151552593.jpg",          imageAlt: "Interactive UI concept"},
      ]}
      title="Featured Creative Projects"
      description="Explore a selection of my latest and most impactful creative works. Each project showcases a blend of artistic vision and technical execution."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",          icon: Sparkles,
          title: "Years of Experience",          value: "7+"},
        {
          id: "2",          icon: Users,
          title: "Happy Clients",          value: "50+"},
        {
          id: "3",          icon: Award,
          title: "Projects Completed",          value: "100+"},
      ]}
      title="My Achievements & Impact"
      description="A look at the numbers that reflect my dedication and the positive impact of my creative work."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      members={[
        {
          id: "1",          name: "Your Bestfriend",          role: "Creative Director & Designer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businessman-close-up_23-2148746290.jpg",          imageAlt: "Portrait of the creative director"},
      ]}
      title="Meet the Creator"
      description="It's just me! I'm dedicated to delivering exceptional creative solutions with a personal touch."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          role: "Marketing Manager",          company: "Growth Innovators",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg",          imageAlt: "Portrait of Sarah J."},
        {
          id: "2",          name: "Michael C.",          role: "Startup Founder",          company: "Tech Ventures",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-3628.jpg",          imageAlt: "Portrait of Michael C."},
        {
          id: "3",          name: "Emily R.",          role: "Creative Director",          company: "Artistic Studios",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-designer-with-musical-earphones-standing-office-holding-folder_1303-32105.jpg",          imageAlt: "Portrait of Emily R."},
        {
          id: "4",          name: "David K.",          role: "Project Lead",          company: "Digital Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-laptop_329181-14592.jpg",          imageAlt: "Portrait of David K."},
        {
          id: "5",          name: "Jessica L.",          role: "Brand Strategist",          company: "Visionary Brands",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-with-dark-curly-hair-sitting-table-with-laptop-dreamily-looking-camera-while-spending-time-modern-cozy-workshop-with-big-windows_574295-504.jpg",          imageAlt: "Portrait of Jessica L."},
      ]}
      title="What Clients Say About My Work"
      description="Hear directly from those who have experienced the creative difference. Their words reflect the quality and dedication I bring to every project."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "What is your typical design process?",          content: "My process usually involves initial consultation, concept development, design iteration, client feedback, and final delivery. I ensure transparency and collaboration every step of the way."},
        {
          id: "2",          title: "How long does a project usually take?",          content: "Project timelines vary depending on complexity and scope. A detailed timeline will be provided after our initial consultation and project brief."},
        {
          id: "3",          title: "What tools and software do you use?",          content: "I'm proficient in industry-standard tools like Adobe Creative Suite (Photoshop, Illustrator, After Effects), Figma, Blender, and various coding environments for web projects."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to the most common questions about my creative process, services, and how we can work together."
      faqsAnimation="slide-up"
      mediaPosition="right"
      imageSrc="http://img.b2bpic.net/free-photo/diverse-group-employees-sitting-office-discussing_1303-24757.jpg"
      imageAlt="People discussing and collaborating"
      mediaAnimation="slide-up"
      animationType="smooth"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-animated"}}
      tag="Let's Connect"
      title="Bring Your Vision to Life"
      description="Ready to start a new creative project or simply want to say hello? I'd love to hear from you! Reach out and let's discuss how we can create something amazing together."
      buttons={[
        {
          text: "Contact Me",          href: "#contact"
        }
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      columns={[
        {
          title: "My Hub",          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Projects",              href: "#projects"},
            {
              label: "Services",              href: "#features"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Contact Me",              href: "#contact"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 My Creative Hub. All rights reserved."
      imageSrc="http://img.b2bpic.net/free-photo/web-design-creative-team-concept_1421-1250.jpg"
      imageAlt="Creative web design workspace"
      logoText="My Creative Hub"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
