"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Marvixa"
          navItems={[
            { name: "Features", id: "#features" },
            { name: "Solutions", id: "#solutions" },
            { name: "Pricing", id: "#pricing" },
            { name: "Documentation", id: "#documentation" }
          ]}
          topBarButton={{ text: "Log In", href: "#" }}
          button={{ text: "Start Free", href: "#start-free" }}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Unleash Project Velocity. Eliminate Delays. Predict Success."
          description="Marvixa is the AI-powered platform that automates complex workflow scheduling, intelligently predicts bottleneck risks, and empowers your team to deliver on time, every time."
          buttons={[
            { text: "Get Started for Free", href: "#start-free" },
            { text: "Book a 1-on-1 Demo", href: "#book-demo" }
          ]}
          buttonAnimation="blur-reveal"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg", alt: "Student at home taking notes while watching presentation closeup" },
            { src: "http://img.b2bpic.net/free-photo/diverse-people-using-their-phones_53876-95104.jpg", alt: "Diverse people using their phones" },
            { src: "http://img.b2bpic.net/free-photo/hand-drawn-figures-connected-through-blank-white-cellphone-chalkboard_23-2147841250.jpg", alt: "Hand drawn figures connected through blank white cellphone on chalkboard" },
            { src: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14785.jpg", alt: "Businesswoman using tablet" }
          ]}
          avatarText="Trusted by 10,000+ leading teams."
          imageSrc="http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg"
          imageAlt="Marvixa AI Project Management Dashboard"
          showDimOverlay={true}
          showBlur={true}
          textPosition="bottom"
        />
      </div>
      <div id="social-proof" data-section="social-proof" className="grayscale opacity-50 hover:opacity-100 transition-opacity duration-300">
        <SocialProofOne
          title="Trusted by visionaries shaping tomorrow."
          description="Companies of all sizes leverage Marvixa to boost efficiency and deliver projects on time."
          names={[
            "Acme Corp",            "Orbit Solutions",            "Initech Innovations",            "Stellar Systems",            "Quantum Labs",            "InnovateCo",            "FutureForge"
          ]}
          useInvertedBackground={true}
          textboxLayout="default"
          showCard={false}
        />
      </div>
      <div id="features" data-section="features">
        <ProductCardTwo
          title="Intelligent Automation at Your Fingertips."
          description="Marvixa's core features are engineered to streamline your operations and give you an unfair advantage in project delivery."
          products={[
            { id: "1", brand: "Marvixa Core", name: "AI-Powered Workflow Automation", price: "N/A", rating: 5, reviewCount: "Automates 80% tasks", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139260.jpg", imageAlt: "AI Workflow Automation Interface" },
            { id: "2", brand: "Marvixa Core", name: "Predictive Bottleneck Analytics", price: "N/A", rating: 5, reviewCount: "Prevents 90% delays", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "Predictive Analytics Dashboard" },
            { id: "3", brand: "Marvixa Core", name: "Real-time Collaborative Canvas", price: "N/A", rating: 5, reviewCount: "Boosts team synergy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tablet-with-blue-icons_1134-57.jpg", imageAlt: "Real-time Collaboration Interface" },
            { id: "4", brand: "Marvixa Core", name: "Dynamic Resource Optimization", price: "N/A", rating: 5, reviewCount: "Maximizes efficiency", imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-cube-shapes-sculpture_23-2150979669.jpg", imageAlt: "Resource Optimization Visual" },
            { id: "5", brand: "Marvixa Core", name: "Integrated Ecosystem & APIs", price: "N/A", rating: 5, reviewCount: "Connects all tools", imageSrc: "http://img.b2bpic.net/free-photo/cool-background-blank-wallpaper-place-your-concept_1194-641481.jpg", imageAlt: "Software Integration Diagram" },
            { id: "6", brand: "Marvixa Core", name: "Granular Access & Permissions", price: "N/A", rating: 5, reviewCount: "Ensures data security", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-biometric-authentication_23-2151997038.jpg", imageAlt: "Granular Permissions Settings" }
          ]}
          gridVariant="bento-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="how-it-works" data-section="how-it-works" className="border border-primary-cta hover:border-accent transition-colors duration-300">
        <MetricCardEleven
          title="From Setup to Scale: Your Path to Project Mastery."
          description="Experience Marvixa's seamless integration and watch your productivity metrics soar in just three intuitive steps."
          metrics={[
            { id: "step1", value: "Step 1", title: "Connect Your Stack", description: "Seamlessly integrate Marvixa with your existing tools in minutes. Our intelligent connectors do the heavy lifting, ensuring your data flows effortlessly.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139308.jpg", imageAlt: "Connecting various software applications" },
            { id: "step2", value: "Step 2", title: "Configure AI Automation", description: "Tailor Marvixa's powerful AI engine to your unique project rules. Define custom workflows, set triggers, and let AI handle repetitive tasks, freeing your team for innovation.", imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg", imageAlt: "Configuring AI rules in a holographic interface" },
            { id: "step3", value: "Step 3", title: "Scale Operations Effortlessly", description: "Watch your productivity skyrocket. Marvixa proactively identifies bottlenecks, optimizes resource allocation, and provides predictive insights, enabling consistent, on-time delivery at any scale.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996795.jpg", imageAlt: "Illustrating exponential growth and scalability" }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="pricing" data-section="pricing" className="border border-card data-[id='pro']:border-primary-cta data-[id='pro']:shadow-lg data-[id='pro']:shadow-primary-cta/20 transition-all duration-300">
        <PricingCardNine
          title="Simple Pricing, Powerful Results."
          description="Choose the Marvixa plan that scales with your ambition, from individual breakthroughs to enterprise-wide transformation. Save 20% by opting for annual billing."
          plans={[
            { id: "starter", title: "Starter", price: "$0", period: "/month", features: ["1 Project Board", "Basic Workflow Automation", "Community Support", "Up to 5 Users"], button: { text: "Start for Free", href: "#" } },
            { id: "pro", title: "Pro (Popular)", price: "$29", period: "/month", features: ["Unlimited Project Boards", "Advanced AI Automation", "Predictive Analytics", "Priority Email Support", "Up to 25 Users", "Real-time Collaboration"], button: { text: "Get Pro", href: "#" } },
            { id: "enterprise", title: "Enterprise", price: "Custom", period: "/month", features: ["Everything in Pro", "Dedicated Account Manager", "Custom SLAs", "On-premise Deployment Options", "Unlimited Users", "Advanced Security & Compliance"], button: { text: "Contact Sales", href: "#" } }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Questions? We've Got Answers."
          description="Explore the most common inquiries about Marvixa's security, integration, and scalability, designed to instill confidence in your decision."
          faqs={[
            { id: "faq-1", title: "How secure is Marvixa with my project data?", content: "Marvixa employs enterprise-grade security protocols, including end-to-end encryption, regular security audits, and compliance with industry standards like SOC 2 Type II and GDPR. Your data's integrity and confidentiality are our highest priority, backed by robust access controls and incident response systems." },
            { id: "faq-2", title: "Can Marvixa integrate with my existing tech stack?", content: "Absolutely. Marvixa offers extensive integration capabilities with popular tools such as Jira, Slack, GitHub, Asana, and Trello, along with a powerful API for custom connections. Our goal is to augment your existing ecosystem, not replace it, ensuring a smooth transition and enhanced workflow." },
            { id: "faq-3", title: "What are the scaling costs as my team grows?", content: "Marvixa's pricing structure is designed to scale with your team's needs. Our transparent tier system ensures predictable costs as you expand. The Enterprise plan offers custom solutions and dedicated support to optimize value for large organizations, ensuring you only pay for what you need." },
            { id: "faq-4", title: "Is Marvixa easy to set up and use for non-technical teams?", content: "Yes, Marvixa is built with user-centric design at its core. Our intuitive interface and guided onboarding ensure even non-technical teams can get started quickly. Comprehensive documentation, video tutorials, and dedicated support are available to assist you every step of the way, making advanced AI accessible to all." }
          ]}
          imageSrc="http://img.b2bpic.net/free-vector/security-privacy-protection-idea-software-access-data-abstract-cyber-data-security-online-global-data-security-personal-data-security-internet-flat-illustration-isolated_1150-39295.jpg"
          imageAlt="Digital security and data encryption graphic"
          mediaAnimation="blur-reveal"
          mediaPosition="left"
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="final-cta" data-section="final-cta">
        <ContactSplit
          tag="Ready to Transform?"
          title="Experience the Future of Project Management."
          description="Join thousands of visionary teams who are accelerating their projects and redefining productivity with Marvixa's intelligent automation."
          background={{"variant":"animated-grid"}}
          useInvertedBackground={false}
          inputPlaceholder="Enter your work email"
          buttonText="Join the Future"
          termsText="By joining, you agree to our Terms of Service and Privacy Policy."
          tagAnimation="blur-reveal"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }, { label: "Testimonials", href: "#" }] },
            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
            { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Support", href: "#" }, { label: "API Reference", href: "#" }, { label: "Security", href: "#" }, { label: "Changelog", href: "#" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Disclaimer", href: "#" }] }
          ]}
          bottomLeftText="© 2024 Marvixa. All rights reserved."
          bottomRightText="Built with Intelligence and Precision."
        />
      </div>
    </ThemeProvider>
  );
}