"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { CheckCircle, Globe, MessageCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="ChatMate AI"
      button={{
        text: "Start Chatting",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroOverlayTestimonial
      title="Your Intelligent Chat Companion"
      description="Engage in seamless conversations, get instant answers, and boost your productivity with our advanced AI chatbot. Always here, always learning."
      testimonials={[
        {
          name: "Alex P.",
          handle: "@alex_tech",
          testimonial: "ChatMate AI has revolutionized our customer support! Instant replies and highly accurate. A game-changer!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17885.jpg",
        },
        {
          name: "Dr. Sarah L.",
          handle: "@drsarahl",
          testimonial: "Incredibly intuitive and precise. It feels like talking to a human expert. Highly recommend for any professional.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-green-shirt-looking-camera-with-pensive-expression-thinking-holding-hand-his-chin-standing-brown-background_141793-133914.jpg",
        },
        {
          name: "Michael T.",
          handle: "@mike_dev",
          testimonial: "As a developer, I'm amazed by the seamless integration and robust capabilities. It's truly smart AI.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-looks-cheerful_114579-14179.jpg",
        },
        {
          name: "Emily C.",
          handle: "@emily.creative",
          testimonial: "From brainstorming ideas to quick fact-checks, ChatMate AI is my go-to. It saves me so much time!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-fashion-smiling-hipster-man-drinking-coffee-city-cafe-lunch-time-with-notebook-suit_158538-8009.jpg",
        },
        {
          name: "David W.",
          handle: "@david_biz",
          testimonial: "Our team's productivity has soared since implementing ChatMate AI. It's an essential tool for modern business.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
          alt: "User avatar 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-with-headphones_23-2149155172.jpg",
          alt: "User avatar 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/digital-art-portrait-person-listening-music-headphones_23-2151065052.jpg",
          alt: "User avatar 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-anime-character-with-stars_23-2151556343.jpg",
          alt: "User avatar 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-man-banner-concept-with-copy-space_23-2149601461.jpg",
          alt: "User avatar 5",
        },
      ]}
      avatarText="Join thousands of satisfied users!"
      imageSrc="http://img.b2bpic.net/free-vector/abstract-future-interface-banner-set_1284-34727.jpg"
      imageAlt="AI chatbot interface showing a conversation"
      showBlur={true}
      textPosition="bottom"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Meet ChatMate: Your AI Assistant"
      description="ChatMate is an intuitive AI platform designed to streamline communication and provide instant, accurate responses. From complex queries to daily tasks, our bot is here to assist you 24/7. Experience the future of intelligent interaction."
      imageSrc="http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system-using-voice-controlled-sma_482257-2844.jpg"
      imageAlt="User interacting with a chatbot on a laptop"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Instant Responses",
          description: "Get immediate and precise answers to your questions, accelerating your workflow and decision-making.",
          imageSrc: "http://img.b2bpic.net/free-photo/notification-bell-front-side-with-white-background_187299-39915.jpg",
          imageAlt: "Instant Responses icon",
        },
        {
          title: "Personalized Interactions",
          description: "ChatMate learns from your conversations, providing tailored advice and relevant information unique to your needs.",
          imageSrc: "http://img.b2bpic.net/free-photo/chat-messaging-speech-bubble-icon_53876-153332.jpg",
          imageAlt: "Personalized Interactions icon",
        },
        {
          title: "Multi-language Support",
          description: "Communicate effortlessly across linguistic barriers with our comprehensive multi-language capabilities.",
          imageSrc: "http://img.b2bpic.net/free-photo/molecules-connect-scientific-discovery-symbolizing-progress-generated-by-ai_188544-16444.jpg",
          imageAlt: "Multi-language Support icon",
        },
      ]}
      title="Key Features That Impress"
      description="Discover how ChatMate enhances your daily interactions and workflows with powerful AI capabilities designed for efficiency and engagement."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "99.9%",
          title: "Accuracy Rate",
          description: "Ensuring precise and reliable information every time.",
          icon: CheckCircle,
        },
        {
          id: "m2",
          value: "1M+",
          title: "Daily Conversations",
          description: "Trusted by millions for seamless and efficient communication.",
          icon: MessageCircle,
        },
        {
          id: "m3",
          value: "24/7",
          title: "Availability",
          description: "Always online, ready to assist you anytime, anywhere.",
          icon: Globe,
        },
      ]}
      title="Impactful Numbers"
      description="See the measurable difference ChatMate makes for users worldwide, reflecting our commitment to excellence and user satisfaction."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Johnson",
          role: "CEO, TechCorp",
          company: "TechCorp",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
          imageAlt: "Sarah Johnson",
        },
        {
          id: "t2",
          name: "Michael Chen",
          role: "CTO, InnovateLab",
          company: "InnovateLab",
          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 Chen",
        },
        {
          id: "t3",
          name: "Emily Rodriguez",
          role: "Marketing Director, GrowthCo",
          company: "GrowthCo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-handsome-caucasian-man-wearing-glasses-headphones-neck-standing-profile-view-touching-headphones-isolated-crimson-wall_141793-80164.jpg",
          imageAlt: "Emily Rodriguez",
        },
        {
          id: "t4",
          name: "David Kim",
          role: "Product Manager, StartupXYZ",
          company: "StartupXYZ",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-virtual-reality-goggles-his-head_23-2148815660.jpg",
          imageAlt: "David Kim",
        },
        {
          id: "t5",
          name: "Jessica Lee",
          role: "Founder, FutureForge",
          company: "FutureForge",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3569.jpg",
          imageAlt: "Jessica Lee",
        },
        {
          id: "t6",
          name: "Robert Green",
          role: "Data Scientist, AnalyGen",
          company: "AnalyGen",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-man-sitting-desk_23-2148349965.jpg",
          imageAlt: "Robert Green",
        },
      ]}
      kpiItems={[
        {
          value: "100%",
          label: "Satisfaction",
        },
        {
          value: "20K+",
          label: "Active Users",
        },
        {
          value: "50+",
          label: "Integrations",
        },
      ]}
      title="What Our Users Say"
      description="Hear from individuals and teams who have transformed their communication and productivity with ChatMate."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",
          title: "What is ChatMate AI?",
          content: "ChatMate AI is an advanced artificial intelligence chatbot designed to assist with various tasks, provide instant answers, and streamline communication for personal and professional use.",
        },
        {
          id: "faq2",
          title: "How does ChatMate AI learn and adapt?",
          content: "ChatMate AI uses state-of-the-art machine learning algorithms to analyze interactions and continuously improve its responses. The more you use it, the better it understands your preferences and needs.",
        },
        {
          id: "faq3",
          title: "Is my data secure with ChatMate AI?",
          content: "Yes, data security is our top priority. We employ robust encryption protocols and strict privacy policies to ensure all your conversations and data are protected and kept confidential.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Get quick answers to the most common questions about ChatMate, from functionality to pricing and support."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "animated-grid",
      }}
      tag="Start Your Conversation"
      title="Experience ChatMate Now"
      description="Enter your message below to begin interacting with our AI chatbot. We're ready to assist you instantly!"
      inputPlaceholder="Type your message here..."
      buttonText="Send Message"
      termsText="By sending a message, you agree to our Terms of Service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="ChatMate AI"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#",
            },
            {
              label: "Integrations",
              href: "#",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "Help Center",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 ChatMate AI. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
