"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Headphones, Lightbulb, Link, Rocket, ShieldCheck, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "FAQs",
          id: "#faqs",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="ChatFlow AI"
      button={{
        text: "Get Started",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "plain",
      }}
      imagePosition="right"
      title="Instant answers, always on"
      description="Our AI chat agent learns your needs and responds instantly, day or night. Get support faster, scale smarter."
      tag="AI-Powered"
      buttons={[
        {
          text: "Start Chatting Now",
          href: "#contact",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          alt: "John Doe",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-hard-work_181624-33428.jpg",
          alt: "Jane Smith",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-attractive-afroamerican-man_23-2148508906.jpg",
          alt: "Robert Brown",
        },
        {
          src: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
          alt: "Jessica White",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",
          alt: "Portrait of outdoor businessman",
        },
      ]}
      avatarText="Trusted by over 10,000 users"
      imageSrc="http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038403.jpg"
      imageAlt="AI chat agent interface showing instant responses"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      marqueeItems={[
        {
          type: "text-icon",
          text: "24/7 Support",
          icon: Headphones,
        },
        {
          type: "text-icon",
          text: "Intelligent Automation",
          icon: Lightbulb,
        },
        {
          type: "text-icon",
          text: "Seamless Integration",
          icon: Link,
        },
        {
          type: "text-icon",
          text: "Data Security",
          icon: ShieldCheck,
        },
        {
          type: "text-icon",
          text: "Scalable Solutions",
          icon: Rocket,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="Revolutionize Customer Interaction"
      description={[
        "In today's fast-paced business environment, instant communication is key. Our AI chat agent platform is engineered to deliver unparalleled speed and accuracy, transforming how you engage with your customers and support your team. Automate routine inquiries, provide 24/7 assistance, and empower your users with immediate access to information.",
        "Designed for busy professionals and growing businesses, our intelligent agent integrates seamlessly into your existing workflows. It continuously learns from interactions, ensuring responses are not just fast, but highly relevant and personalized. Reduce operational costs, enhance customer satisfaction, and free up human agents to focus on complex tasks.",
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Instant Response Times",
          description: "Deliver immediate answers to user queries, significantly reducing wait times and improving customer satisfaction.",
          imageSrc: "http://img.b2bpic.net/free-photo/heart-bubble-speech-icon-grey-table_23-2148023851.jpg",
          imageAlt: "Instant response icon",
        },
        {
          title: "24/7 Availability",
          description: "Provide uninterrupted support and information, ensuring your users can get help anytime, day or night.",
          imageSrc: "http://img.b2bpic.net/free-vector/ai-chip-brain-lineal-flat_78370-9690.jpg",
          imageAlt: "24/7 availability icon",
        },
        {
          title: "Continuous Learning",
          description: "Our AI agent evolves with every interaction, continuously refining its knowledge base and improving response accuracy.",
          imageSrc: "http://img.b2bpic.net/free-photo/it-expert-data-center-holding-tablet-replacing-storage-mainframes-components_482257-115420.jpg",
          imageAlt: "AI learning icon",
        },
        {
          title: "Seamless Integration",
          description: "Easily integrate with your existing CRM, knowledge bases, and other business tools for a unified experience.",
          imageSrc: "http://img.b2bpic.net/free-vector/illustration-web-design-template_53876-26983.jpg",
          imageAlt: "Seamless integration icon",
        },
      ]}
      title="Intelligent Features for Modern Businesses"
      description="Discover how our AI chat agent provides immediate value, streamlining operations and enhancing user experience."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "response-time",
          value: "90%",
          description: "Reduction in average response time",
        },
        {
          id: "resolution-rate",
          value: "75%",
          description: "Increase in first-contact resolution",
        },
        {
          id: "satisfaction",
          value: "4.8/5",
          description: "Average customer satisfaction rating",
        },
        {
          id: "operational-cost",
          value: "30%",
          description: "Decrease in operational support costs",
        },
      ]}
      title="Tangible Results You Can Trust"
      description="See the impact our AI chat agent can have on your business performance and customer engagement."
    />
  </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 Johnson",
          role: "CEO",
          company: "TechCorp",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "CTO",
          company: "InnovateLab",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/video-editor-worker-standing-front-camera-smiling-working-creative-agency-office-holding-la_482257-3426.jpg",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Marketing Director",
          company: "GrowthCo",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-saleswoman-working-office-sitting-business-room-reading-writing-down_1258-193622.jpg",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Product Manager",
          company: "StartupXYZ",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",
        },
        {
          id: "5",
          name: "Alice Williams",
          role: "Operations Lead",
          company: "Nexus Solutions",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804575.jpg",
        },
      ]}
      title="What Our Clients Say"
      description="Hear directly from businesses and professionals who have transformed their support and engagement with our AI chat agent."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "How easy is it to integrate the AI chat agent?",
          content: "Our AI chat agent is designed for seamless integration. We provide comprehensive documentation and support to help you connect it with your existing website, CRM, and communication platforms typically within minutes to hours, not days.",
        },
        {
          id: "2",
          title: "Can the AI agent handle complex customer queries?",
          content: "While ideal for automating routine inquiries, our AI agent can be configured to escalate complex issues to human support. It provides agents with context from the conversation, ensuring a smooth handover and faster resolution for complex problems.",
        },
        {
          id: "3",
          title: "Is my company's data secure with your platform?",
          content: "Data security is our top priority. We employ industry-leading encryption protocols and comply with global data protection regulations (like GDPR and CCPA) to ensure your data and your customers' information is always safe and private.",
        },
        {
          id: "4",
          title: "Can I customize the AI agent's responses and personality?",
          content: "Absolutely! Our platform offers extensive customization options. You can train the AI with your specific knowledge base, brand voice, and even tailor its personality to align perfectly with your company's image and customer interaction guidelines.",
        },
        {
          id: "5",
          title: "What kind of analytics and reporting does it provide?",
          content: "Our platform provides detailed analytics on chat volume, resolution rates, customer satisfaction scores, agent performance, and popular queries. This data helps you identify trends, optimize your support, and make informed business decisions.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/logo-telephone-vector-illustration_53876-71430.jpg"
      imageAlt="Person asking a question to an AI chatbot illustration"
      mediaAnimation="slide-up"
      mediaPosition="left"
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our AI chat agent, setup, and capabilities."
      faqsAnimation="opacity"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "starter",
          badge: "Trial",
          badgeIcon: Sparkles,
          price: "$49/month",
          subtitle: "Ideal for small businesses",
          buttons: [
            {
              text: "Get Started",
              href: "#contact",
            },
          ],
          features: [
            "Up to 500 AI conversations/month",
            "Basic integrations",
            "Standard support",
            "Customizable responses",
          ],
        },
        {
          id: "pro",
          badge: "Most Popular",
          badgeIcon: Sparkles,
          price: "$149/month",
          subtitle: "Perfect for growing teams",
          buttons: [
            {
              text: "Choose Pro",
              href: "#contact",
            },
          ],
          features: [
            "Up to 5,000 AI conversations/month",
            "Advanced integrations",
            "Priority support",
            "Customizable AI personality",
            "Detailed analytics dashboard",
          ],
        },
        {
          id: "enterprise",
          badge: "Custom",
          badgeIcon: Sparkles,
          price: "Contact Us",
          subtitle: "For large-scale operations",
          buttons: [
            {
              text: "Contact Sales",
              href: "#contact",
            },
          ],
          features: [
            "Unlimited AI conversations",
            "Enterprise-grade integrations",
            "Dedicated account manager",
            "Custom AI model training",
            "SLA & compliance support",
          ],
        },
      ]}
      title="Flexible Plans for Every Business"
      description="Choose the perfect plan that scales with your needs, from startups to large enterprises."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Ready to Transform Your Support?"
      description="Get in touch with our team to learn more about how ChatFlow AI can empower your business."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your Message",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-vector/flat-elements-e-commerce_1212-3.jpg"
      imageAlt="Illustration of person contacting support"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="ChatFlow AI"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
            {
              label: "Demo",
              href: "#hero",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Blog",
              href: "#",
            },
            {
              label: "FAQs",
              href: "#faqs",
            },
            {
              label: "Support",
              href: "#contact",
            },
          ],
        },
      ]}
      copyrightText="© 2024 ChatFlow AI. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
