"use client";

import Link from 'next/link';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Shield, TrendingUp } from "lucide-react";

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <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="Decentralized Finance"
          bottomRightText="hello@cryptovault.io"
        />
      </div>

      <div id="features-detailed" data-section="features-detailed" className="pt-20">
        <FeatureCardThree
          features={[
            {
              id: "01",              title: "Military-Grade Security",              description: "Multi-signature wallets with cold storage and advanced encryption protocols that protect your assets with bank-level security standards",              imageSrc: "https://img.b2bpic.net/free-photo/padlock-computer-circuit-board_93675-129557.jpg",              imageAlt: "Security features"
            },
            {
              id: "02",              title: "Lightning Speed",              description: "Instant transactions with sub-second confirmation times across all networks, powered by our proprietary optimization engine",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-lock-keyboard_23-2148578048.jpg",              imageAlt: "Fast transaction processing"
            },
            {
              id: "03",              title: "Real-Time Analytics",              description: "Advanced charting tools and AI-powered market insights for smarter trading decisions with predictive algorithms",              imageSrc: "https://img.b2bpic.net/free-vector/wireframe-chain-with-digital-code-lock-blockchain-cyber-security-safe-privacy-concept_127544-953.jpg",              imageAlt: "Analytics dashboard"
            },
            {
              id: "04",              title: "API Integration",              description: "Connect seamlessly with other platforms and build custom trading strategies using our comprehensive REST and WebSocket APIs",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-security-background-with-circuits_23-2147633221.jpg",              imageAlt: "API integration"
            },
            {
              id: "05",              title: "Multi-Chain Support",              description: "Trade across 15+ blockchain networks including Bitcoin, Ethereum, Polygon, Solana, and emerging Layer 2 solutions",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Multi-chain support"
            },
            {
              id: "06",              title: "Advanced Order Types",              description: "Execute sophisticated trading strategies with stop-loss, take-profit, trailing stops, and algorithmic order execution",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Advanced order types"
            }
          ]}
          title="Complete Trading Arsenal"
          description="Discover the advanced features that make CryptoVault the preferred choice for serious traders and institutional investors"
          tag="Professional Tools"
          tagIcon={Shield}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="performance-metrics" data-section="performance-metrics">
        <MetricCardTwo
          metrics={[
            { id: "1", value: "99.9%", description: "Platform Uptime Guarantee" },
            { id: "2", value: "<50ms", description: "Average Order Execution" },
            { id: "3", value: "256-bit", description: "SSL Encryption Standard" },
            { id: "4", value: "24/7", description: "Security Monitoring" }
          ]}
          title="Performance & Security"
          description="Industry-leading reliability and security metrics you can trust"
          tag="Metrics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feature-testimonial" data-section="feature-testimonial">
        <TestimonialCardFifteen
          testimonial="The advanced analytics and real-time insights have completely changed my trading approach. I can now make data-driven decisions with confidence and execute trades faster than ever before."
          rating={5}
          author="Sarah Williams, Professional Trader"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", alt: "Professional trader" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Satisfied user" },
            { src: "https://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg", alt: "Happy trader" },
            { src: "https://img.b2bpic.net/free-photo/side-view-business-man-city_23-2148479568.jpg", alt: "Verified user" },
            { src: "https://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg", alt: "Success story" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Community member" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",            items: [
              { label: "Features", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "https://cryptovault.io/security" },
              { label: "API Docs", href: "https://docs.cryptovault.io" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.io" },
              { label: "Careers", href: "https://careers.cryptovault.io" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",            items: [
              { label: "Privacy Policy", href: "https://cryptovault.io/privacy" },
              { label: "Terms of Service", href: "https://cryptovault.io/terms" },
              { label: "Cookie Policy", href: "https://cryptovault.io/cookies" },
              { label: "Compliance", href: "https://cryptovault.io/compliance" }
            ]
          }
        ]}
        copyrightText="© 2025 CryptoVault. All rights reserved. Secure your future in crypto."
      />
    </ThemeProvider>
  );
}