"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Clock, LineChart, Radio, Shield, Star, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Mission",          id: "/#about"},
        {
          name: "Solutions",          id: "/#features"},
        {
          name: "Blog",           id: "/blog"},
        {
          name: "Contact",          id: "/#contact"},
      ]}
      brandName="MontriWeb"
      button={{
        text: "Get Started",        href: "/#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars"}}
      title="Unlocking Scalable Growth for Small Businesses with AI"
      description="At MontriWeb, we revolutionize growth by delivering access to advanced, AI-driven digital tools that turn intelligent systems into your business's core engine."
      kpis={[
        {
          value: "100%",          label: "Growth Focused"},
        {
          value: "24/7",          label: "Automation"},
        {
          value: "Smart",          label: "Scaling"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Explore Services",          href: "/#features"},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E665B6wm8CMNvYChmBhM1LZz9e/uploaded-1779489433477-kxp7ryf9.jpg"
      imageAlt="AI Business Solutions"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/confident-handsome-man_1163-5476.jpg",          alt: "Confident handsome man"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202434.jpg",          alt: "Front view lawyer portrait"},
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",          alt: "Medium shot smiley woman at work"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-latin-businesswoman-standing-with-arms-crossed-against-isolated-background_662251-639.jpg",          alt: "Happy Latin businesswoman"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",          alt: "Closeup of young female professional"},
      ]}
      avatarText="Trusted by 500+ growth-focused founders"
      marqueeItems={[
        {
          type: "text-icon",          text: "Predictive Analytics",          icon: LineChart,
        },
        {
          type: "text-icon",          text: "AI Automation",          icon: Star,
        },
        {
          type: "text-icon",          text: "Workflow Optimization",          icon: Zap,
        },
        {
          type: "text-icon",          text: "Real-time Insights",          icon: Radio,
        },
        {
          type: "text-icon",          text: "Scalable Infrastructure",          icon: Shield,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Our mission is to revolutionize small business growth by delivering access to the most advanced, AI-driven digital tools—once reserved for large enterprises—now simplified and scaled for the everyday entrepreneur."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",          title: "AI-powered SaaS",          author: "MontriWeb",          description: "Automate marketing, sales, and interactions.",          tags: [
            "Growth",            "Efficiency"],
          imageSrc: "http://img.b2bpic.net/free-photo/call-center-worker-using-ai-tech-laptop-reply-customers-closeup_482257-125822.jpg"},
        {
          id: "f2",          title: "AI-enhanced PLR",          author: "MontriWeb",          description: "Tailor yourself to niche markets with speed.",          tags: [
            "PLR",            "Customization"],
          imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-virtual-reality-goggles-with-special-effects-around-him_23-2148815725.jpg"},
        {
          id: "f3",          title: "Predictive Tools",          author: "MontriWeb",          description: "Identify opportunities before competition hits.",          tags: [
            "Data",            "Strategy"],
          imageSrc: "http://img.b2bpic.net/free-photo/desk-from-top-view_23-2147626522.jpg"},
      ]}
      title="AI Solutions for Modern Founders"
      description="We specialize in transforming operations by offering intelligent systems powered by Artificial Intelligence."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "10x",          title: "Efficiency",          description: "Boosted productivity",          icon: Zap,
        },
        {
          id: "m2",          value: "24/7",          title: "Operations",          description: "Always online",          icon: Clock,
        },
        {
          id: "m3",          value: "100%",          title: "Scalability",          description: "Growth potential",          icon: TrendingUp,
        },
      ]}
      title="Why Choose MontriWeb?"
      description="We don't just build tools—we deliver AI that works as hard as you do."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          title: "Game Changer",          quote: "MontriWeb saved me hours every day.",          name: "Jane Doe",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-professional-standing-with-arms-crossed-while-making-eye-contact-against-isolated-background_662251-838.jpg"},
        {
          id: "2",          title: "Incredible Tech",          quote: "The PLR kits are simply outstanding.",          name: "John Smith",          role: "Owner",          imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg"},
        {
          id: "3",          title: "High ROI",          quote: "Best investment for my small startup.",          name: "Alex King",          role: "Founder",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-black-blazer-portrait_23-2152009548.jpg"},
        {
          id: "4",          title: "Efficiency Mastered",          quote: "My marketing is finally on autopilot.",          name: "Sam Lee",          role: "Marketing Dir",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-businessman-works-laptop_1163-5473.jpg"},
        {
          id: "5",          title: "Total Growth",          quote: "Scaling like a tech giant today.",          name: "Pat Ross",          role: "Founder",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg"},
      ]}
      title="Founder Stories"
      description="What our partners say about scaling with AI."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "How does MontriWeb ensure data security?",          content: "Security is our top priority. We implement enterprise-grade encryption and strict access controls, ensuring your business data remains private, compliant, and protected against unauthorized access at all times."},
        {
          id: "q2",          title: "Can I scale my services as my business grows?",          content: "Absolutely. Our infrastructure is specifically designed for scalability. Whether you are handling a hundred customers or a hundred thousand, our AI systems adapt seamlessly to support your growing workload without compromising performance."},
        {
          id: "q3",          title: "What kind of support is provided after setup?",          content: "We offer dedicated ongoing support and comprehensive documentation. Our team is committed to your success, providing regular updates, performance optimization insights, and direct troubleshooting assistance to ensure you get maximum value."},
      ]}
      sideTitle="Common Questions"
      sideDescription="We are here to answer your concerns and help you get started with confidence."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Get in touch"
      title="Ready to Scale Your Business?"
      description="Connect with MontriWeb to start your AI transformation journey."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Links",          items: [
            {
              label: "Home",              href: "/"},
            {
              label: "Services",              href: "/#features"},
            {
              label: "Blog",              href: "/blog"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy",              href: "/#"},
            {
              label: "Terms",              href: "/#"},
          ],
        },
      ]}
      bottomLeftText="© 2025 MontriWeb. All rights reserved."
      bottomRightText="AI Solutions for Founders."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}