"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, CheckCircle, TrendingUp, Brain, Clock, Target, HelpCircle } from "lucide-react";

export default function NeuroLinkPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="NeuroLink"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Research", id: "metrics" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Explore", href: "features" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Bridging Mind and Machine"
          description="Explore the revolutionary science behind NeuroLink, where cutting-edge neurotechnology meets innovation. Discover how we're advancing brain-computer interfaces for a connected future."
          tag="Science Innovation"
          tagIcon={Zap}
          kpis={[
            { value: "99.7%", label: "Signal Accuracy" },
            { value: "50ms", label: "Response Time" },
            { value: "24+", label: "Data Channels" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-vector/low-poly-brain-design-with-connecting-dots_1048-6319.jpg"
          imageAlt="Brain neural visualization"
          imagePosition="right"
          buttons={[
            { text: "Learn More", href: "about" },
            { text: "View Research", href: "features" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Understanding NeuroLink"
          description="Comprehensive insights into our breakthrough neurotechnology platform"
          tabs={[
            {
              id: "technology",              label: "Technology",              description: "NeuroLink uses advanced non-invasive electrode arrays combined with machine learning algorithms to decode neural signals with unprecedented accuracy. Our proprietary signal processing pipeline handles noise reduction and real-time data stream processing, enabling seamless communication between biological and digital systems."
            },
            {
              id: "mission",              label: "Our Mission",              description: "We're dedicated to accelerating neurotechnology research and development. Our mission is to create tools that help scientists understand the brain better, improve lives through neural interfaces, and unlock new possibilities in human-computer interaction."
            },
            {
              id: "innovation",              label: "Innovation",              description: "Through collaborative research partnerships and continuous innovation, we're pushing the boundaries of what's possible in neuroscience. Our team combines expertise in neurobiology, electrical engineering, and machine learning to create solutions that were previously thought impossible."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/gradient-brain-background_52683-118566.jpg"
          imageAlt="Research laboratory setup"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Key Features"
          description="Advanced capabilities powering breakthrough neurotechnology research"
          tag="Capabilities"
          tagIcon={CheckCircle}
          features={[
            {
              title: "Real-Time Signal Processing",              description: "Process neural signals with millisecond latency, enabling responsive brain-computer interfaces for interactive applications and research.",              imageSrc: "https://img.b2bpic.net/free-photo/patient-who-is-brain-scanned-his-activity-is-seen-big-screen-neurology-headset_482257-31639.jpg",              imageAlt: "Real-time neural signal processing"
            },
            {
              title: "Multi-Channel Recording",              description: "Simultaneously capture data from 24+ electrode channels with high fidelity, providing comprehensive neural activity mapping across brain regions.",              imageSrc: "https://img.b2bpic.net/free-photo/patient-woman-with-head-scanning-device-brain-activity-is-seen-screen-neurology-diagnosis-equipment_482257-31642.jpg",              imageAlt: "Multi-channel neural recording interface"
            },
            {
              title: "Machine Learning Integration",              description: "Advanced ML models decode neural patterns with 99.7% accuracy, identifying intentions and enabling precise brain-computer communication.",              imageSrc: "https://img.b2bpic.net/free-vector/low-poly-brain-design-with-connecting-dots_1048-6319.jpg",              imageAlt: "Machine learning neural decoding"
            },
            {
              title: "Non-Invasive Technology",              description: "Safe, comfortable electrode arrays that require no surgical implants, making neurotechnology accessible for diverse research and clinical applications.",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-brain-background_52683-118566.jpg",              imageAlt: "Non-invasive electrode array technology"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Research Impact"
          description="Measurable achievements advancing neurotechnology"
          tag="Statistics"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", icon: Brain, title: "Neural Channels", value: "24+" },
            { id: "2", icon: Zap, title: "Signal Accuracy", value: "99.7%" },
            { id: "3", icon: Clock, title: "Response Time", value: "50ms" },
            { id: "4", icon: Target, title: "Success Rate", value: "98.5%" }
          ]}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about NeuroLink neurotechnology"
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-vector/abstract-artificial-intelligence-background_23-2147738874.jpg"
          imageAlt="Brain imaging and neurotechnology"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does NeuroLink technology work?",              content: "NeuroLink uses non-invasive electrode arrays to detect electrical signals produced by neurons. These signals are processed in real-time using machine learning algorithms that decode neural patterns and translate them into actionable data or commands."
            },
            {
              id: "2",              title: "Is NeuroLink safe to use?",              content: "Yes, NeuroLink employs entirely non-invasive technology. The electrode arrays are comfortable and require no surgical procedures, making it safe for research participants and clinical applications. Extensive safety testing ensures compliance with medical standards."
            },
            {
              id: "3",              title: "What are the applications of NeuroLink?",              content: "NeuroLink applications span neuroscience research, brain-computer interfaces, cognitive monitoring, medical diagnostics, and assistive technologies for individuals with neurological conditions. The versatility of the platform enables diverse research and clinical use cases."
            },
            {
              id: "4",              title: "How accurate is the neural signal decoding?",              content: "Our machine learning models achieve 99.7% accuracy in signal classification and pattern recognition. This high accuracy is maintained across different users and conditions, thanks to our advanced preprocessing and adaptive algorithms."
            },
            {
              id: "5",              title: "Can NeuroLink be used for real-time applications?",              content: "Absolutely. With 50ms response time and continuous real-time signal processing, NeuroLink is designed for interactive applications including brain-computer interfaces, neurofeedback systems, and live research experiments."
            },
            {
              id: "6",              title: "How do I get started with NeuroLink?",              content: "Contact our research team to discuss your project requirements. We provide comprehensive documentation, training, and technical support to ensure successful implementation and integration of NeuroLink into your research workflow."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to explore the future of neurotechnology? Connect with our research team to discuss how NeuroLink can advance your projects and unlock new scientific discoveries."
          animationType="entrance-slide"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Get in Touch", href: "contact" },
            { text: "View Documentation", href: "features" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Technology", href: "about" },
                { label: "Research", href: "metrics" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Support", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
                { label: "Ethics", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 NeuroLink. All rights reserved."
          bottomRightText="Advancing Neurotechnology Science"
        />
      </div>
    </ThemeProvider>
  );
}