"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Brain, HelpCircle, MessageCircle, Target, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="medium"
      background="fluid"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Smart Elevator AI"
          navItems={[
            { name: "Simulator", id: "simulator" },
            { name: "Algorithm", id: "algorithm" },
            { name: "Metrics", id: "metrics" },
            { name: "Learn", id: "learn" }
          ]}
          button={{ text: "Start Simulation", href: "#simulator" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Smart Elevator AI Agent Simulator"
          description="Experience intelligent elevator scheduling in real-time. Watch AI algorithms (A* and Greedy) make optimal decisions, visualize search trees step-by-step, and see performance metrics updated live as the simulation runs."
          tag="AI Algorithm Visualization"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          rating={5}
          ratingText="Real-time Interactive Educational Platform"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-futuristic-3d-isometric-view-of-a-mode-1773943289474-c924bbd4.png",              imageAlt: "3D Building Visualization"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-detailed-a-algorithm-search-tree-visua-1773943290156-226a311e.png",              imageAlt: "A* Algorithm Visualization"
            }
          ]}
          mediaAnimation="blur-reveal"
          buttons={[
            { text: "Launch Simulator", href: "#simulator" },
            { text: "View Demo", href: "#simulation-flow" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Intelligent Elevator Systems Matter"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          metrics={[
            { icon: TrendingUp, label: "Wait Time Reduction", value: "40%" },
            { icon: Zap, label: "Energy Efficiency", value: "35%" },
            { icon: Users, label: "Passenger Satisfaction", value: "92%" },
            { icon: Target, label: "Optimal Path Finding", value: "99.8%" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="Interactive Simulation Features"
          description="Explore every aspect of intelligent elevator scheduling with our comprehensive visual interface designed for learning and experimentation."
          tag="Full-Featured Platform"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "3D VISUALIZATION",              title: "Building & Elevator Dynamics",              subtitle: "Real-Time 3D Rendering",              description: "Watch a fully interactive 3D building with multiple floors and intelligent elevators moving smoothly based on algorithm decisions. See real-time floor highlighting and request indicators.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-futuristic-3d-isometric-view-of-a-mode-1773943289474-c924bbd4.png",              imageAlt: "3D Building Visualization"
            },
            {
              id: 2,
              tag: "CONTROL PANEL",              title: "Interactive Request Management",              subtitle: "User Input System",              description: "Add elevator requests with intuitive floor selection buttons. Choose between Greedy and A* algorithms. Control simulation speed and reset the system instantly for new experiments.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-sleek-dark-ui-panel-showing-a-queue-of-1773943290409-1a443cfe.png",              imageAlt: "Elevator Queue Interface"
            },
            {
              id: 3,
              tag: "AI VISUALIZATION",              title: "Decision-Making Transparency",              subtitle: "Algorithm Analysis",              description: "See exactly why each elevator was selected. View distance calculations, cost metrics, and real-time decision updates as the system processes requests intelligently.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-hierarchical-decision-tree-showing-ele-1773943289962-8d42f912.png",              imageAlt: "Decision Tree Visualization"
            },
            {
              id: 4,
              tag: "SEARCH VISUALIZATION",              title: "Algorithm Search Tree",              subtitle: "Node Expansion Animation",              description: "Visualize A* and Greedy algorithms step-by-step. Watch nodes expand, see g(n), h(n), and f(n) calculations. Understand heuristic-based pathfinding in action with animated transitions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-detailed-a-algorithm-search-tree-visua-1773943290156-226a311e.png",              imageAlt: "A* Algorithm Tree"
            },
            {
              id: 5,
              tag: "METRICS",              title: "Real-Time Performance Stats",              subtitle: "Live Dashboard",              description: "Track total distance traveled, average waiting times, and efficiency scores. Watch metrics update in real-time as elevators complete requests. Compare algorithm performance instantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/an-animated-performance-metrics-dashboar-1773943290554-a14b1a4c.png",              imageAlt: "Performance Metrics Dashboard"
            },
            {
              id: 6,
              tag: "EDUCATION",              title: "Learning Resources",              subtitle: "Integrated Explanations",              description: "Comprehensive educational panel explains intelligent agents, A* algorithm fundamentals, and how search works in this elevator scheduling system. Perfect for students and professionals alike.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/an-infographic-explaining-intelligent-el-1773943291518-e4df465e.png",              imageAlt: "Intelligent Agent System"
            }
          ]}
          buttons={[
            { text: "Explore All Features", href: "#features" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardThree
          title="Algorithm Modes"
          description="Choose between two distinct scheduling strategies and see how they impact elevator efficiency and passenger wait times in real-time."
          tag="Algorithm Selection"
          tagIcon={Brain}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          products={[
            {
              id: "greedy",              name: "Greedy Algorithm",              price: "Fast & Simple",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-side-by-side-comparison-diagram-showin-1773943290037-d8a7cf57.png",              imageAlt: "Greedy Algorithm"
            },
            {
              id: "astar",              name: "A* Algorithm",              price: "Optimal & Smart",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-detailed-a-algorithm-search-tree-visua-1773943290156-226a311e.png",              imageAlt: "A* Algorithm"
            },
            {
              id: "comparison",              name: "Compare Algorithms",              price: "Side-by-Side Analysis",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-side-by-side-comparison-diagram-showin-1773943290037-d8a7cf57.png",              imageAlt: "Algorithm Comparison"
            },
            {
              id: "realtime",              name: "Real-Time Metrics",              price: "Live Performance Data",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/an-animated-performance-metrics-dashboar-1773943290554-a14b1a4c.png",              imageAlt: "Performance Metrics"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="System Performance Impact"
          description="Measurable improvements when using intelligent AI scheduling versus traditional fixed-route systems."
          tag="Real Results"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="scale-rotate"
          metrics={[
            {
              id: "1",              value: "40%",              title: "Faster Responses",              description: "Reduced average wait times with intelligent request routing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/an-animated-performance-metrics-dashboar-1773943290554-a14b1a4c.png",              imageAlt: "Response Time Improvement"
            },
            {
              id: "2",              value: "35%",              title: "Less Energy",              description: "Optimized movement patterns reduce power consumption significantly",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-sleek-dark-ui-panel-showing-a-queue-of-1773943290409-1a443cfe.png",              imageAlt: "Energy Efficiency"
            },
            {
              id: "3",              value: "99.8%",              title: "Optimal Routing",              description: "A* algorithm finds near-perfect paths for elevator scheduling",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-hierarchical-decision-tree-showing-ele-1773943289962-8d42f912.png",              imageAlt: "Optimal Path Finding"
            },
            {
              id: "4",              value: "15ms",              title: "Decision Speed",              description: "Real-time algorithm execution under 15 milliseconds per request",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAsRV22cqZBUWFAaSXsf5nFKbu/a-detailed-a-algorithm-search-tree-visua-1773943290156-226a311e.png",              imageAlt: "Algorithm Speed"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="User Experiences"
          description="Hear from students, educators, and professionals who've used our intelligent elevator simulator to understand AI algorithms better."
          tag="User Feedback"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Dr. Sarah Chen",              role: "Computer Science Professor",              testimonial: "Excellent tool for teaching A* algorithms and intelligent agents. Students can now visualize abstract concepts in real-time. The interactive 3D simulation makes complex concepts instantly understandable."
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "AI/ML Engineer",              testimonial: "Finally, a platform that shows algorithm decision-making step-by-step. I use it to onboard new team members and verify our own scheduling logic. The comparison mode is brilliant."
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Student",              testimonial: "This simulator helped me ace my algorithms course. Seeing the search tree expand in real-time makes understanding heuristic functions so much easier. Highly recommend for anyone learning AI."
            },
            {
              id: "4",              name: "James Liu",              role: "Building Management Systems",              testimonial: "We're implementing this AI approach in our next-gen building systems. The simulator validated our algorithm choices before deployment. Saved us significant development time and costs."
            }
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about intelligent elevator scheduling, algorithms, and how to use the simulator."
          tag="Quick Answers"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What is the A* algorithm?",              content: "A* is an intelligent pathfinding algorithm that combines actual distance traveled (g) with estimated remaining distance (h) to find optimal paths efficiently. It's used widely in robotics, game AI, and now elevator scheduling. Our simulator shows exactly how A* explores nodes and calculates costs in real-time."
            },
            {
              id: "2",              title: "How does Greedy algorithm work here?",              content: "The Greedy algorithm selects the elevator closest to a new request immediately. It's fast but may not be optimal long-term. By comparing Greedy vs A*, you'll see how local optimization differs from global optimization in the same scenario."
            },
            {
              id: "3",              title: "Can I run multiple simulations?",              content: "Yes! You can reset the system anytime and run new simulations. Try different algorithms with identical requests to compare their performance metrics side-by-side. This is perfect for understanding when each algorithm excels."
            },
            {
              id: "4",              title: "What do g(n), h(n), and f(n) mean?",              content: "In A* algorithm: g(n) is the cost from start to node n, h(n) is the estimated cost from n to goal, and f(n) = g(n) + h(n) is the total estimated cost. The algorithm always explores the node with lowest f(n) first. Our visualization shows these calculations updating live."
            },
            {
              id: "5",              title: "How real-time is the simulation?",              content: "The simulator runs decisions in real-time, though you can control simulation speed via the speed slider. Algorithm computations happen in milliseconds, so you can watch 8-10 floors with 3 elevators respond to requests almost instantly."
            },
            {
              id: "6",              title: "Is this suitable for education?",              content: "Absolutely! We designed this specifically for students and educators. The integrated explanations panel covers intelligent agents, algorithm fundamentals, and scheduling concepts. Perfect for computer science, AI, or operations research courses."
            },
            {
              id: "7",              title: "Can I export simulation data?",              content: "Currently, metrics are displayed live on the dashboard. You can screenshot performance charts or take notes during simulations. We're planning CSV export functionality for detailed analysis in future updates."
            },
            {
              id: "8",              title: "What about mobile compatibility?",              content: "The simulator works on mobile and tablet browsers, though desktop is recommended for the best 3D visualization and interaction experience. The responsive design adapts controls and panel layouts for smaller screens."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Start Your Simulation"
          ctaDescription="Jump into the interactive 3D simulator and watch AI algorithms make intelligent decisions in real-time. Perfect for learning and experimentation."
          ctaButton={{ text: "Launch Full Simulator", href: "#simulator" }}
          ctaIcon={Zap}
          useInvertedBackground={false}
          animationType="blur-reveal"
          faqs={[
            {
              id: "1",              title: "How do I add elevator requests?",              content: "Use the Control Panel on the right side of the screen. Select your starting floor, then select your destination floor. The request will be added to the queue and the system will assign an elevator based on the selected algorithm."
            },
            {
              id: "2",              title: "What happens when I change algorithms?",              content: "The system will apply the newly selected algorithm to future requests. You can compare how Greedy vs A* handles the same scenario by running side-by-side simulations. Performance metrics will update to reflect the algorithm change."
            },
            {
              id: "3",              title: "Can I pause and resume simulations?",              content: "Yes! Use the Speed Control slider to adjust simulation speed from 0.5x to 2x. You can effectively pause by setting speed to minimum, allowing time to observe specific moments in detail."
            },
            {
              id: "4",              title: "Where do I see the algorithm explanation?",              content: "The Educational Panel is located below the simulation area. It contains detailed explanations of intelligent agents, algorithm fundamentals, and how the search process works in elevator scheduling."
            },
            {
              id: "5",              title: "How accurate are the metrics?",              content: "All metrics are calculated in real-time as elevators move and complete requests. Total distance uses actual 3D positions, wait times start from request submission, and efficiency is calculated by comparing actual vs optimal scenarios."
            },
            {
              id: "6",              title: "Can multiple users run simulations?",              content: "Each user gets their own isolated simulation instance. Multiple users can run different algorithms simultaneously without affecting each other's simulations or metrics."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Simulator", href: "#simulator" },
                { label: "Algorithms", href: "#algorithms" },
                { label: "Metrics Dashboard", href: "#metrics" },
                { label: "3D Visualization", href: "#visualization" }
              ]
            },
            {
              title: "Learn",              items: [
                { label: "About AI Agents", href: "#learn" },
                { label: "A* Algorithm", href: "#learn" },
                { label: "Pathfinding Basics", href: "#learn" },
                { label: "Educational Resources", href: "#learn" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "GitHub Repository", href: "https://github.com" },
                { label: "Discussion Forum", href: "#" },
                { label: "Contribute Ideas", href: "#" },
                { label: "Report Issues", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Documentation", href: "#" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Smart Elevator AI Simulator. All rights reserved."
          bottomRightText="Built with React, Three.js, and Framer Motion"
        />
      </div>
    </ThemeProvider>
  );
}
