"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { CheckCircle, Sparkles, Star, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Clients",          id: "#clients"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      button={{
        text: "Get a Quote",        href: "#contact"}}
      brandName="MeiT.es"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogoBillboard
      background={{
        variant: "downward-rays-animated-grid"}}
      logoText="MeiT.es"
      description="Empowering your business with cutting-edge IT solutions and strategic consulting. We transform challenges into opportunities for growth and innovation."
      buttons={[
        {
          text: "Explore Our Solutions",          href: "#services"},
        {
          text: "Get in Touch",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/business-person-futuristic-business-environment_23-2150970221.jpg"
      imageAlt="Team collaborating on IT solutions"
      mediaAnimation="opacity"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="About MeiT.es: Your Partner in Digital Transformation"
      metrics={[
        {
          icon: CheckCircle,
          label: "Successful Projects",          value: "500+"},
        {
          icon: Star,
          label: "Client Satisfaction",          value: "98%"},
        {
          icon: Users,
          label: "Expert Team",          value: "50+"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "cloud",          label: "Cloud Transformation",          title: "Seamless Cloud Integration",          items: [
            "Migration to leading cloud platforms",            "Optimized cloud infrastructure management",            "Scalable and secure cloud solutions"],
        },
        {
          id: "cybersecurity",          label: "Cybersecurity",          title: "Robust Security Measures",          items: [
            "Proactive threat detection & prevention",            "Data encryption & privacy compliance",            "Incident response & recovery planning"],
        },
        {
          id: "dataanalytics",          label: "Data & AI",          title: "Intelligent Data Analytics",          items: [
            "Actionable insights from complex data",            "Predictive modeling & AI implementation",            "Custom dashboard & reporting solutions"],
        },
        {
          id: "devops",          label: "DevOps Consulting",          title: "Accelerated Software Delivery",          items: [
            "CI/CD pipeline implementation",            "Automated testing & deployment",            "Enhanced collaboration & efficiency"],
        },
        {
          id: "support",          label: "Managed IT Services",          title: "Reliable 24/7 Support",          items: [
            "Proactive monitoring & maintenance",            "Help desk & on-site assistance",            "IT infrastructure optimization"],
        },
        {
          id: "modernization",          label: "Application Modernization",          title: "Future-Proof Your Applications",          items: [
            "Legacy system upgrades",            "Microservices architecture adoption",            "Performance & scalability enhancements"],
        },
      ]}
      title="Our Core IT Solutions & Expertise"
      description="We offer a comprehensive suite of IT services designed to streamline your operations, enhance security, and drive innovation."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Our Impact: Driving Measurable Results for Clients"
      tag="Performance"
      metrics={[
        {
          id: "increase-efficiency",          value: "30%",          description: "Average increase in operational efficiency"},
        {
          id: "cost-reduction",          value: "20%",          description: "Average IT cost reduction for our clients"},
        {
          id: "roi-projects",          value: "95%",          description: "Projects delivered with positive ROI"},
        {
          id: "uptime",          value: "99.9%",          description: "Average system uptime maintained by our services"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="clients" data-section="clients">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "GlobalTech Solutions",        "InnovateCorp",        "FutureSystems Inc.",        "Summit Holdings",        "Catalyst Ventures",        "Apex Innovations",        "Quantum Labs",        "Horizon Dynamics",        "Synapse Corp",        "Vanguard Technologies"]}
      title="Trusted by Leading Enterprises"
      description="We partner with innovative companies across diverse industries to deliver exceptional IT solutions and strategic growth."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          handle: "@sarah_tech",          testimonial: "MeiT.es completely transformed our cloud infrastructure. Their expertise and support were invaluable, leading to significant cost savings and improved performance.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg",          imageAlt: "Sarah Johnson, CEO of TechCorp"},
        {
          id: "2",          name: "Michael Chen",          handle: "@michael_innovate",          testimonial: "The cybersecurity solutions provided by MeiT.es are top-notch. We feel much more secure and confident in our digital operations. Highly recommend their services!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/pensive-businessman-dressed-elegant-suit-looking-away-correct-his-glasses-while-standing-outdoors-against-skyscraper-background_613910-20061.jpg",          imageAlt: "Michael Chen, CTO of InnovateLab"},
        {
          id: "3",          name: "Emily Rodriguez",          handle: "@emily_growth",          testimonial: "MeiT.es helped us unlock the true potential of our data. The insights gained from their analytics services have been a game-changer for our marketing strategies.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1477.jpg",          imageAlt: "Emily Rodriguez, Marketing Director at GrowthCo"},
        {
          id: "4",          name: "David Kim",          handle: "@david_startup",          testimonial: "Their team integrated seamlessly with ours for our DevOps initiatives. We achieved faster deployment cycles and a more stable development environment.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-checks-ai-dashboard-using-laptop-systems-review_482257-130117.jpg",          imageAlt: "David Kim, Product Manager at StartupXYZ"},
        {
          id: "5",          name: "Jessica Lee",          handle: "@jessica_founder",          testimonial: "As a startup, having reliable managed IT services is crucial. MeiT.es provides exceptional support, allowing us to focus on our core business without IT worries.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg",          imageAlt: "Jessica Lee, Founder of Quantum Leap"},
        {
          id: "6",          name: "Robert Green",          handle: "@robert_ops",          testimonial: "The application modernization project with MeiT.es was a huge success. Our legacy systems are now robust and scalable, perfectly aligning with our future growth.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-20123.jpg",          imageAlt: "Robert Green, Operations Lead at Horizon Tech"},
      ]}
      showRating={true}
      title="What Our Clients Say About MeiT.es"
      description="Hear directly from the businesses we've helped achieve their IT and digital transformation goals."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      uniformGridCustomHeightClasses="min-h-95"
      plans={[
        {
          id: "basic-support",          badge: "Essential",          price: "$500/month",          subtitle: "Foundational IT Support",          buttons: [
            {
              text: "Start Basic",              href: "#contact"},
          ],
          features: [
            "24/7 Monitoring",            "Help Desk Support",            "Basic Security Patching",            "System Health Checks"],
        },
        {
          id: "pro-managed",          badge: "Recommended",          badgeIcon: Sparkles,
          price: "$1200/month",          subtitle: "Proactive Managed Services",          buttons: [
            {
              text: "Go Pro",              href: "#contact"},
          ],
          features: [
            "All Basic Features",            "Advanced Threat Protection",            "Cloud Cost Optimization",            "Regular Performance Reviews",            "Dedicated Account Manager"],
        },
        {
          id: "enterprise-transform",          badge: "Premium",          price: "Custom Quote",          subtitle: "Full Digital Transformation Partner",          buttons: [
            {
              text: "Contact for Enterprise",              href: "#contact"},
          ],
          features: [
            "All Pro Features",            "Custom Software Development",            "AI & Data Strategy Consulting",            "Enterprise Architecture Design",            "Priority Support & On-Site Assistance"],
        },
      ]}
      title="Flexible IT Service Plans for Every Business"
      description="Choose the right plan to match your needs, from foundational support to comprehensive digital transformation partnerships."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "What types of businesses do you work with?",          content: "MeiT.es partners with businesses of all sizes, from growing startups to large enterprises, across various industries including technology, finance, healthcare, and retail."},
        {
          id: "2",          title: "How do you ensure data security and privacy?",          content: "We implement industry-leading cybersecurity protocols, including advanced encryption, multi-factor authentication, regular security audits, and compliance with global data privacy regulations (e.g., GDPR, CCPA)."},
        {
          id: "3",          title: "Can you integrate with our existing IT infrastructure?",          content: "Yes, our solutions are designed for seamless integration with your current systems. Our experts ensure minimal disruption during implementation and transition."},
        {
          id: "4",          title: "What is your approach to project management?",          content: "We utilize agile methodologies for flexible and transparent project management, ensuring regular communication, iterative development, and timely delivery of milestones."},
        {
          id: "5",          title: "Do you offer ongoing support after project completion?",          content: "Absolutely. We provide comprehensive post-implementation support, including maintenance, monitoring, and dedicated help desk services, tailored to your chosen service plan."},
        {
          id: "6",          title: "How quickly can you onboard a new client?",          content: "Onboarding time varies depending on the scope of services. However, our streamlined process is designed for efficiency, with most clients fully onboarded within 2-4 weeks for standard engagements."},
      ]}
      title="Frequently Asked Questions"
      description="Find answers to the most common questions about our IT services and consulting approach."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "downward-rays-animated"}}
      tag="Connect With Us"
      title="Ready to Transform Your Business?"
      description="Let MeiT.es be your trusted partner in achieving your IT goals. Reach out today for a consultation."
      tagAnimation="slide-up"
      inputPlaceholder="Enter your email address"
      buttonText="Get Started Now"
      termsText="By submitting, you agree to our Privacy Policy and Terms of Service."
      imageSrc="http://img.b2bpic.net/free-photo/business-woman-using-digital-tablet-virtual-screen_53876-136125.jpg"
      imageAlt="Professional working on a tablet, engaging with digital content"
      mediaPosition="right"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoText="MeiT.es"
      columns={[
        {
          items: [
            {
              label: "Cloud Transformation",              href: "#services"},
            {
              label: "Cybersecurity",              href: "#services"},
            {
              label: "Data & AI",              href: "#services"},
            {
              label: "DevOps Consulting",              href: "#services"},
            {
              label: "Managed IT Services",              href: "#services"},
            {
              label: "Application Modernization",              href: "#services"},
          ],
        },
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Clients",              href: "#clients"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "Pricing Plans",              href: "#pricing"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          items: [
            {
              label: "Contact Sales",              href: "#contact"},
            {
              label: "Support Center",              href: "#contact"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Cookie Policy",              href: "#"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
