"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Lightbulb, TrendingUp } from "lucide-react";

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="AIFlow"
          button={{
            text: "Get Started",
            href: "https://app.aiflow.io/signup"
          }}
        />
      </div>

      <div id="features-deep" data-section="features-deep">
        <FeatureCardSix
          title="Complete Feature Breakdown"
          description="Discover every capability that makes AIFlow the most comprehensive AI automation platform for modern businesses."
          tag="Full Features"
          tagIcon={Lightbulb}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Advanced AI Configuration",
              description: "Build sophisticated AI workflows with our drag-and-drop builder. Configure machine learning models, set confidence thresholds, and define complex decision trees without writing code.",
              imageSrc: "https://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg",
              imageAlt: "Advanced AI configuration interface"
            },
            {
              id: 2,
              title: "Real-Time Analytics Dashboard",
              description: "Monitor performance with comprehensive dashboards. Track success rates, processing times, error patterns, and ROI metrics in real-time with customizable reporting.",
              imageSrc: "https://img.b2bpic.net/free-photo/standard-quality-control-collage-concept_23-2149595844.jpg",
              imageAlt: "Real-time analytics dashboard"
            },
            {
              id: 3,
              title: "Universal Integration Hub",
              description: "Connect seamlessly with 500+ applications including Salesforce, HubSpot, Slack, and more. Custom API endpoints and webhooks enable unlimited integration possibilities.",
              imageSrc: "https://img.b2bpic.net/free-photo/automation-production-system-operation-precess-concept_53876-138637.jpg",
              imageAlt: "Universal integration capabilities"
            }
          ]}
        />
      </div>

      <div id="feature-metrics" data-section="feature-metrics">
        <MetricCardTwo
          title="Feature Performance Metrics"
          description="See how our advanced features deliver measurable results for businesses worldwide"
          tag="Performance"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",
              value: "99.9%",
              description: "Workflow uptime guarantee"
            },
            {
              id: "2",
              value: "500+",
              description: "Supported integrations"
            },
            {
              id: "3",
              value: "85%",
              description: "Average efficiency improvement"
            },
            {
              id: "4",
              value: "<15min",
              description: "Average setup time"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AIFlow"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Pricing", href: "/pricing" },
                { label: "Features", href: "/features" },
                { label: "Blog", href: "https://aiflow.io/blog" }
              ]
            },
            {
              items: [
                { label: "Documentation", href: "https://docs.aiflow.io" },
                { label: "API Reference", href: "https://api.aiflow.io/docs" },
                { label: "Support", href: "/support" },
                { label: "Community", href: "https://community.aiflow.io" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Careers", href: "https://aiflow.io/careers" },
                { label: "Contact", href: "/contact" },
                { label: "Privacy Policy", href: "https://aiflow.io/privacy" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}