"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { BarChart2, DollarSign, Lightbulb, MessageSquare, Rocket } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Features",
          id: "/features",
        },
        {
          name: "Pricing",
          id: "/pricing",
        },
        {
          name: "Contact",
          id: "/#contact",
        },
      ]}
      brandName="Skill2Income"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      title="Turn Your Skills Into Income"
      description="Discover the best service business you can start today. AI-powered ideas, pricing, and outreach at your fingertips."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@sarah_designs",
          testimonial: "Skill2Income helped me transform my Canva skills into a thriving design business. The ideas were spot on!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg",
          imageAlt: "Sarah J. testimonial avatar",
        },
        {
          name: "Michael L.",
          handle: "@mike_writer",
          testimonial: "As a freelance writer, I struggled to find profitable niches. Skill2Income gave me a clear path and fantastic outreach messages.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smart-pensive-redhead-hipster-with-full-beard-glasses-dressed-casual-clothes-poses-with-hand-chin-studio-isolated-dark-background_613910-20091.jpg",
          imageAlt: "Michael L. testimonial avatar",
        },
        {
          name: "Emily R.",
          handle: "@emily_social",
          testimonial: "The AI-generated service offers are incredible! I launched my social media management service in days.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",
          imageAlt: "Emily R. testimonial avatar",
        },
        {
          name: "David K.",
          handle: "@david_photo",
          testimonial: "Finally, a platform that understands my photography skills and shows me how to monetize them locally. Highly recommend!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/headshot-fashionable-young-man-with-laptop-computer-using-high-speed-internet-connection-lunch-cozy-cafe-interior_273609-1945.jpg",
          imageAlt: "David K. testimonial avatar",
        },
        {
          name: "Chloe B.",
          handle: "@chloe_editor",
          testimonial: "From video editing to a full-fledged TikTok agency idea, Skill2Income provided everything I needed to get started.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg",
          imageAlt: "Chloe B. testimonial avatar",
        },
      ]}
      buttons={[
        {
          text: "Start Free",
          href: "/#contact",
        },
      ]}
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c79dwq",
          alt: "Avatar 1",
        },
        {
          src: "http://img.b2bpic.net/free-vector/woman-wearing-eyeglasses-profile_24908-82735.jpg",
          alt: "Avatar 2",
        },
        {
          src: "http://img.b2bpic.net/free-vector/illustrated-teenagers_23-2147532901.jpg",
          alt: "Avatar 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman-girl-model-with-nude-makeup-glasses-summer-hipster-clothes-posing-near-wall_158538-8993.jpg",
          alt: "Avatar 4",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wzh3vi",
          alt: "minimalist avatar icon beard short dark hair",
        },
      ]}
      avatarText="Join 10,000+ ambitious creators"
      imageSrc="http://img.b2bpic.net/free-photo/african-american-entrepreneur-pitching-new-project-idea-stakeholders_482257-118564.jpg"
      imageAlt="Skill2Income AI dashboard demonstrating income and market analysis"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Discover New Niches",
          icon: Lightbulb,
        },
        {
          type: "text-icon",
          text: "Analyze Market Demand",
          icon: BarChart2,
        },
        {
          type: "text-icon",
          text: "Launch Your Service Faster",
          icon: Rocket,
        },
        {
          type: "text-icon",
          text: "Automate Client Outreach",
          icon: MessageSquare,
        },
        {
          type: "text-icon",
          text: "Maximize Your Earnings",
          icon: DollarSign,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      title="How Skill2Income Works"
      description="Our platform guides you from raw skill to a thriving service business. Enter your skills, get AI-powered insights, and launch your offer with confidence. We simplify the entire process."
      bulletPoints={[
        {
          title: "Input Your Skills",
          description: "Tell our AI about your talents, hobbies, and professional experience. From video editing to sales, every skill counts.",
        },
        {
          title: "AI Opportunity Analysis",
          description: "Our advanced AI analyzes your skills against local and online market demand to identify the most lucrative service business ideas.",
        },
        {
          title: "Generate Your Business Assets",
          description: "Receive a complete package: a sellable service offer, tiered pricing, compelling landing page copy, and personalized outreach messages.",
        },
        {
          title: "Launch & Grow",
          description: "With all your assets ready, confidently launch your new service business and start monetizing your expertise.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/business-woman-hand-with-financial-charts-mobile-phone-laptop-table_1232-4898.jpg"
      imageAlt="User interacting with Skill2Income platform on a laptop"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features-home" data-section="features-home">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "skill-input",
          title: "Intelligent Skill Input",
          author: "Core Feature",
          description: "Easily list all your talents and let our AI discover hidden monetization potential.",
          tags: [
            "AI Powered",
            "Easy to Use",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/web-button-collection-gradient-style_23-2147931984.jpg",
          imageAlt: "Illustration of a user typing skills into a text box",
        },
        {
          id: "opportunity-generator",
          title: "Market Opportunity Generator",
          author: "Core Feature",
          description: "Receive highly-demanded service business ideas tailored to your skills and market trends.",
          tags: [
            "Data Driven",
            "Personalized",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/professional-forecast-affiliates-group-work-monitoring-room_482257-91193.jpg",
          imageAlt: "Illustration of AI brain generating business opportunities",
        },
        {
          id: "offer-creation",
          title: "Instant Service Offer Creator",
          author: "Core Feature",
          description: "Generate a clear, compelling service offer with detailed packages and benefits, ready to sell.",
          tags: [
            "Ready to Use",
            "Professional",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/innovation-ideas-imagine-processing-system-concept_53876-132192.jpg",
          imageAlt: "Illustration of a service offer document being generated",
        },
      ]}
      title="Unlock Your Earning Potential"
      description="Skill2Income provides all the tools you need to transform your expertise into a profitable service business, from initial idea to first client."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "demand-score",
          value: "92/100",
          title: "High Demand Score",
          description: "Identify services with strong market appetite.",
          imageSrc: "http://img.b2bpic.net/free-photo/business-people-showing-charts-statistics_23-2148194707.jpg",
          imageAlt: "Demand Score gauge showing 92/100",
        },
        {
          id: "competition-level",
          value: "Medium",
          title: "Competition Level",
          description: "Understand your market landscape and positioning.",
          imageSrc: "http://img.b2bpic.net/free-photo/pie-chart-diagram-graphic-icon-finance-concept_53876-122983.jpg",
          imageAlt: "Competition Level indicator showing medium",
        },
        {
          id: "estimated-income",
          value: "€500-€2500",
          title: "Estimated Monthly Income",
          description: "Forecast potential earnings for your new business idea.",
          imageSrc: "http://img.b2bpic.net/free-photo/big-screen-financial-department-office-shows-stock-exchange-indices_482257-91771.jpg",
          imageAlt: "Financial graph showing estimated monthly income range",
        },
      ]}
      title="See Your Future Success"
      description="Leverage data-driven insights to find high-demand opportunities and forecast your earnings potential with precision."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "testimonial-6",
          name: "Alex P.",
          handle: "@alex_consults",
          testimonial: "Skill2Income transformed my understanding of what I could achieve. The platform is intuitive and incredibly powerful.",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-female-with-glad-expression-outdoor-terrace-cafe_273609-2822.jpg",
          imageAlt: "Alex P. avatar",
        },
        {
          id: "testimonial-7",
          name: "Jessica M.",
          handle: "@jess_creates",
          testimonial: "I was overwhelmed with options, but Skill2Income helped me narrow down my skills into a perfect service niche. Game-changer!",
          imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-business-man-playing-digital-notebook-with-smiling-confident-face-white-backgroundcopy-space_1258-103939.jpg",
          imageAlt: "Jessica M. avatar",
        },
        {
          id: "testimonial-8",
          name: "Ben T.",
          handle: "@ben_dev",
          testimonial: "The pricing and landing page copy generators saved me weeks of work. Truly an MVP for anyone starting out.",
          imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-hero-happy-expression_1194-4011.jpg",
          imageAlt: "Ben T. avatar",
        },
        {
          id: "testimonial-9",
          name: "Mia S.",
          handle: "@mia_strategy",
          testimonial: "From idea validation to actual client outreach, Skill2Income delivers. My side hustle is now a real business!",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg",
          imageAlt: "Mia S. avatar",
        },
        {
          id: "testimonial-10",
          name: "Chris F.",
          handle: "@chris_marketing",
          testimonial: "I've never seen such accurate demand analysis. It empowered me to launch a highly successful marketing service.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-lady-academic-dress-showing-praying-gesture-looking-hopeful_176474-82344.jpg",
          imageAlt: "Chris F. avatar",
        },
      ]}
      title="What Our Users Are Saying"
      description="Hear from students, freelancers, and side hustlers who transformed their skills into thriving businesses with Skill2Income."
      speed={40}
      topMarqueeDirection="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Get Started"
      title="Ready to Monetize Your Skills?"
      description="Join Skill2Income today and start discovering your next big opportunity. Sign up for free and unlock your potential!"
      inputPlaceholder="Enter your email"
      buttonText="Sign Up"
      termsText="By clicking Sign Up you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Features",
              href: "/features",
            },
            {
              label: "Pricing",
              href: "/pricing",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/#about",
            },
            {
              label: "Contact",
              href: "/#contact",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Skill2Income"
      copyrightText="© 2024 Skill2Income. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
