"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Zap, Layers, Brain, Target, Package } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="grid"
      cardStyle="glass-depth"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Platform", id: "features" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Use Cases", id: "use-cases" },
            { name: "Insights", id: "intelligence" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Nexus"
          bottomLeftText="Enterprise. Intelligent. Precise."
          bottomRightText="hello@nexus.ai"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Where Infrastructure Transcends Into Art"
          description="Enterprise-grade systems that handle complexity with precision. Automate the entire stack. Move faster. Scale without friction."
          tag="Enterprise Platform"
          tagIcon={Zap}
          buttons={[
            { text: "Book a Demo", href: "contact" },
            { text: "Learn How It Works", href: "how-it-works" }
          ]}
          imageSrc="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&h=600&fit=crop"
          imageAlt="system architecture infrastructure diagram technology flow data pipeline network diagram"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>

      <div id="system-architecture" data-section="system-architecture">
        <TagAbout
          tag="How It Works"
          description="Our platform bridges software, infrastructure, and intelligent automation into a unified system. Each layer solves specific problems and amplifies the next. No fragmentation. No manual bridges. Pure orchestration."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThirteen
          title="The Four Pillars"
          description="A complete system for enterprise teams who refuse to compromise."
          tag="Architecture"
          tagIcon={Layers}
          features={[
            {
              id: "01",
              title: "Intelligent Automation",
              description: "AI-driven workflows that learn your patterns and adapt in real-time. Reduce manual work by up to 80%. Handle edge cases automatically. No rule-based brittle systems."
            },
            {
              id: "02",
              title: "Infrastructure as Code",
              description: "Your entire infrastructure lives in version control. Deploy, rollback, and manage across environments with confidence. Compliance built in. Zero surprises."
            },
            {
              id: "03",
              title: "Real-Time Observability",
              description: "See what's happening across your entire stack. Not dashboards. Intelligence. Predictive alerts before problems occur. Root cause analysis in seconds."
            },
            {
              id: "04",
              title: "Unified Control Plane",
              description: "One API. One mental model. Connect software, infrastructure, and intelligent systems without translation layers. Complete orchestration. Radical simplicity."
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFive
          title="Browse Our Product Offerings"
          description="Explore our comprehensive suite of enterprise solutions designed to accelerate your digital transformation."
          tag="Products"
          tagIcon={Package}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",
              button: { text: "Explore", href: "#product-1" },
              imageSrc: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop",
              imageAlt: "cloud infrastructure server architecture distributed systems",
              isFavorited: false
            },
            {
              id: "2",
              button: { text: "Learn More", href: "#product-2" },
              imageSrc: "https://images.unsplash.com/photo-1555949519-2cdbaa6fb0c5?w=600&h=400&fit=crop",
              imageAlt: "machine learning architecture neural network visualization AI",
              isFavorited: false
            },
            {
              id: "3",
              button: { text: "Get Started", href: "#product-3" },
              imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=400&fit=crop",
              imageAlt: "artificial intelligence technology smart systems automation",
              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="intelligence" data-section="intelligence">
        <ProductCardFour
          title="Intelligent Systems at Scale"
          description="No magic. No buzzwords. Just proven optimization."
          tag="Technology"
          tagIcon={Brain}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",
              name: "Predictive Resource Allocation",
              price: "40% reduction",
              variant: "In infrastructure costs",
              imageSrc: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop",
              imageAlt: "cloud infrastructure server architecture distributed systems cloud computing infrastructure"
            },
            {
              id: "2",
              name: "Anomaly Detection Engine",
              price: "99.97%",
              variant: "Uptime guarantee with predictive alerts",
              imageSrc: "https://images.unsplash.com/photo-1555949519-2cdbaa6fb0c5?w=600&h=400&fit=crop",
              imageAlt: "machine learning architecture neural network visualization AI algorithm data science intelligent automation"
            },
            {
              id: "3",
              name: "Automated Incident Response",
              price: "87%",
              variant: "Faster MTTR. Self-healing systems.",
              imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=400&fit=crop",
              imageAlt: "artificial intelligence machine learning neural network AI technology smart systems"
            }
          ]}
        />
      </div>

      <div id="use-cases" data-section="use-cases">
        <FeatureCardThirteen
          title="Built for Your Problems"
          description="Real outcomes. Real companies. Real results."
          tag="Use Cases"
          tagIcon={Target}
          features={[
            {
              id: "01",
              title: "Platform Engineering Teams",
              description: "Problem: Managing 50+ microservices across environments is a nightmare. Solution: Unified control plane with intelligent service mesh. Outcome: 60% less ops overhead, developers ship 3x faster."
            },
            {
              id: "02",
              title: "High-Growth SaaS Companies",
              description: "Problem: Scaling database, caching, and queue infrastructure manually doesn't work. Solution: Auto-scaling policies driven by predictive analytics. Outcome: 45% cost savings, zero outages during growth spikes."
            },
            {
              id: "03",
              title: "Enterprise Operations Centers",
              description: "Problem: Monitoring hundreds of systems across hybrid infrastructure is a monitoring nightmare. Solution: Unified observability with AI-driven root cause analysis. Outcome: 75% reduction in MTTR, full compliance audit trail."
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <MetricCardFourteen
          title="Trusted by companies that move fast and demand precision."
          tag="Scale & Trust"
          metrics={[
            {
              id: "1",
              value: "500M+",
              description: "API requests processed daily. Zero downtime. Predictive scaling."
            },
            {
              id: "2",
              value: "98%",
              description: "Customer satisfaction score across enterprise deployments."
            },
            {
              id: "3",
              value: "30%",
              description: "Average reduction in total cost of ownership within first year."
            },
            {
              id: "4",
              value: "3hrs",
              description: "Average time to full production deployment from dev."
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardThirteen
          title="From Zero to Production in Four Steps"
          description="Frictionless onboarding. Real value in days, not months."
          tag="Getting Started"
          tagIcon={Zap}
          features={[
            {
              id: "01",
              title: "Infrastructure Assessment",
              description: "We map your current stack in hours. No manual spreadsheets. AI analysis identifies optimization opportunities immediately."
            },
            {
              id: "02",
              title: "Unified Integration",
              description: "Connect your infrastructure, software, and intelligence layer. Our API handles all complexity. Single SDK. Standard interfaces."
            },
            {
              id: "03",
              title: "Intelligent Automation Deploy",
              description: "Launch AI-driven automation policies. Start small, expand fast. Every policy learns from your actual patterns."
            },
            {
              id: "04",
              title: "Continuous Optimization",
              description: "Real-time observability shows where you're winning. Our system continuously finds new improvements. You focus on building."
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Stop managing complexity. Start orchestrating systems. Book a demo and see how enterprise teams are shipping faster."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Demo", href: "https://calendly.com/nexus-demo" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",
              items: [
                { label: "Platform", href: "features" },
                { label: "How It Works", href: "how-it-works" },
                { label: "Use Cases", href: "use-cases" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Documentation", href: "https://docs.nexus.ai" },
                { label: "API Reference", href: "https://api.nexus.ai" },
                { label: "Status", href: "https://status.nexus.ai" },
                { label: "Security", href: "#security" }
              ]
            }
          ]}
          copyrightText="© 2025 Nexus. Enterprise. Intelligent. Precise."
        />
      </div>
    </ThemeProvider>
  );
}