"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import {
  Zap,
  MessageSquareText,
  User,
  MessageSquare,
  BarChart3,
  Users,
  Briefcase,
  Shield,
  Brain,
  TrendingUp,
  Globe,
  Rocket,
  MessageSquareTextIcon as MessageSquareTextIconAlias,
  Home,
  Settings,
} from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "Features", id: "/features" },
  { name: "Pricing", id: "/pricing" },
  { name: "Contact", id: "/contact" },
  { name: "Docs", id: "https://docs.example.com" },
];

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="AIAssist"
          bottomLeftText="Advanced AI Technology"
          bottomRightText="hello@aiassist.io"
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Comprehensive AI Agent Features"
          description="Discover the advanced capabilities that make AIAssist the leading platform for intelligent agent deployment"
          tag="Advanced Capabilities"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[{ text: "Start Free Trial", href: "https://app.example.com/trial" }]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Real-Time Communication",
              description:
                "Instant, contextual conversations with clients and team members powered by advanced NLP",
              bentoComponent: "chat",
              aiIcon: MessageSquareText,
              userIcon: User,
              exchanges: [
                {
                  userMessage: "What are my account details?",
                  aiResponse:
                    "Your account shows 12 active projects with a total investment of $125,000. Would you like more details on any specific project?",
                },
                {
                  userMessage: "Can you help with billing?",
                  aiResponse:
                    "Absolutely! I can help you review your billing history, update payment methods, or generate invoices. What would you like to do?",
                },
              ],
              placeholder: "Ask me anything...",
            },
            {
              title: "Multi-Agent Orchestration",
              description:
                "Coordinate multiple specialized agents working in parallel with intelligent task distribution",
              bentoComponent: "orbiting-icons",
              centerIcon: Zap,
              items: [
                { icon: MessageSquare, ring: 1 },
                { icon: BarChart3, ring: 1 },
                { icon: Users, ring: 2 },
                { icon: Briefcase, ring: 2 },
                { icon: Shield, ring: 3 },
              ],
            },
            {
              title: "Performance Analytics",
              description:
                "Comprehensive insights into agent behavior, response quality, and client satisfaction metrics",
              bentoComponent: "line-chart",
            },
            {
              title: "Enterprise Integration",
              description:
                "Seamless connection with CRM, helpdesk, and business systems through 50+ pre-built integrations",
              bentoComponent: "icon-info-cards",
              items: [
                { icon: Zap, label: "API Connectors", value: "50+" },
                {
                  icon: Shield,
                  label: "Security Standard",
                  value: "SOC 2 Type II",
                },
                { icon: Globe, label: "Data Centers", value: "6 Regions" },
              ],
            },
            {
              title: "Contextual Learning",
              description:
                "Agents that continuously adapt and improve their responses with every single interaction",
              bentoComponent: "animated-bar-chart",
            },
            {
              title: "Global Deployment",
              description:
                "Serve clients worldwide with intelligent multi-language support and localized responses",
              bentoComponent: "map",
            },
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="capabilities" data-section="capabilities">
        <FeatureHoverPattern
          title="Agent Capabilities That Drive Results"
          description="Explore the technical capabilities that make AIAssist agents production-ready and enterprise-grade"
          tag="Agent Superpowers"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          features={[
            {
              icon: MessageSquareTextIconAlias,
              title: "24/7 Client Support",
              description:
                "Always-on assistance that never needs sleep, handling inquiries across time zones with consistent quality",
            },
            {
              icon: Brain,
              title: "Intelligent Learning",
              description:
                "Continuously improves responses and decision-making based on historical interactions and feedback",
            },
            {
              icon: Zap,
              title: "Lightning Fast",
              description:
                "Sub-second response times ensure smooth, natural conversations that feel human-like",
            },
            {
              icon: Shield,
              title: "Enterprise Security",
              description:
                "Bank-grade encryption and compliance with GDPR, HIPAA, and SOC 2 Type II standards",
            },
            {
              icon: TrendingUp,
              title: "Conversion Optimization",
              description:
                "Intelligent agents guide prospects through sales funnels with personalized assistance and timing",
            },
            {
              icon: Globe,
              title: "Multi-Language Support",
              description:
                "Serve global audiences with natural communication in 100+ languages with cultural awareness",
            },
          ]}
        />
      </div>

      <div id="contact-features" data-section="contact-features">
        <ContactCTA
          tag="Ready to Explore"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Get Started with Advanced Features"
          description="Experience the full power of AIAssist's intelligent agent platform. Schedule a personalized demo with our team."
          buttons={[
            { text: "Schedule Demo", href: "/contact" },
            { text: "View Docs", href: "https://docs.example.com" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="AIAssist"
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "/features" },
                { label: "Pricing", href: "/pricing" },
                { label: "Security", href: "/security" },
                { label: "API Docs", href: "https://docs.aiassist.io" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "/" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              title: "Resources",
              items: [
                {
                  label: "Documentation",
                  href: "https://docs.aiassist.io",
                },
                { label: "Integrations", href: "/integrations" },
                { label: "Templates", href: "/templates" },
                { label: "Support", href: "/support" },
              ],
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" },
                { label: "Compliance", href: "/compliance" },
              ],
            },
          ]}
          copyrightText="© 2025 AIAssist. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}