"use client";
import Link from "next/link";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CheckCircle, TrendingUp } from "lucide-react";

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="CryptoVault"
          bottomLeftText="Global Crypto Community"
          bottomRightText="hello@cryptovault.com"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFour
          title="Advanced Trading Features That Set Us Apart"
          description="Discover the comprehensive suite of tools and capabilities that make CryptoVault the preferred platform for serious cryptocurrency traders"
          tag="Features"
          tagIcon={CheckCircle}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",
              title: "Real-Time Market Intelligence",
              author: "Data Analytics Team",
              description: "Access comprehensive market data, trend analysis, and predictive insights powered by AI. Monitor thousands of trading pairs with advanced filtering and alert systems.",
              tags: ["Analytics", "AI-Powered"],
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-closeup-circuit-board-finance-concept_169016-61404.jpg",
              imageAlt: "Real-time trading analytics"
            },
            {
              id: "2",
              title: "Multi-Layer Security Architecture",
              author: "Security Engineering Team",
              description: "Enterprise-grade security with biometric authentication, hardware security modules, and distributed cold storage. Your assets are protected by the same technology used by major banks.",
              tags: ["Security", "Enterprise"],
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250221.jpg",
              imageAlt: "Security architecture"
            },
            {
              id: "3",
              title: "Algorithmic Trading Engine",
              author: "Quantitative Development Team",
              description: "Deploy sophisticated trading algorithms with our low-latency execution engine. Create custom strategies or use pre-built templates for automated portfolio management.",
              tags: ["Automation", "Quantitative"],
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-62791.jpg",
              imageAlt: "Algorithmic trading engine"
            },
            {
              id: "4",
              title: "DeFi Integration Hub",
              author: "Blockchain Innovation Team",
              description: "Seamlessly interact with decentralized finance protocols. Stake, lend, and earn yield on your crypto assets while maintaining full custody through our secure interface.",
              tags: ["DeFi", "Yield"],
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250224.jpg",
              imageAlt: "DeFi integration platform"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Platform Performance Metrics"
          description="Our commitment to excellence is reflected in these key performance indicators that matter most to traders"
          tag="Performance"
          tagIcon={TrendingUp}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",
              value: "99.99%",
              title: "System Uptime & Reliability",
              items: [
                "24/7 monitoring systems",
                "Redundant infrastructure",
                "Zero planned downtime"
              ]
            },
            {
              id: "2",
              value: "<10ms",
              title: "Average Order Execution Time",
              items: [
                "Ultra-low latency matching",
                "Global server network",
                "Optimized trading engine"
              ]
            },
            {
              id: "3",
              value: "250+",
              title: "Supported Trading Pairs",
              items: [
                "Major cryptocurrencies",
                "Emerging altcoins",
                "Stablecoin pairs"
              ]
            }
          ]}
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Trading", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "/about" },
              { label: "API Docs", href: "https://docs.cryptovault.com" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.com" },
              { label: "Careers", href: "https://careers.cryptovault.com" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy", href: "#privacy" },
              { label: "Terms", href: "#terms" },
              { label: "Compliance", href: "#compliance" },
              { label: "Cookie Policy", href: "#cookies" }
            ]
          }
        ]}
        copyrightText="© 2024 CryptoVault. All rights reserved."
      />
    </ThemeProvider>
  );
}