Feature Icon Tabs

import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

import {
  ArrowRight,
  BrainCircuit,
  Blocks,
  Fingerprint,
  MessageSquare,
  Merge,
  Server,
  Shield,
  ShieldCheck,
  Zap,
  Globe,
  CloudCog,
  Webhook,
  LineChart,
  Layers,
  Cpu,
  Users,
  Bot,
  Wand2,
  Code,
  Database,
  Settings,
  SlidersHorizontal,
  ChevronDown,
} from 'lucide-react';

interface FeatureIcon {
  id: string;
  icon: React.ReactNode;
  title: string;
  description: string;
  benefit: string;
  category: string;
}

export default function FeatureIconTabs() {
  const [activeTab, setActiveTab] = useState('all');
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const featureIcons: FeatureIcon[] = [
    {
      id: 'ai-powered',
      icon: <BrainCircuit className="text-primary h-10 w-10" />,
      title: 'AI-Powered Analysis',
      description:
        'Leverage machine learning to automatically analyze large datasets and identify patterns.',
      benefit: 'Save countless hours on manual data processing',
      category: 'intelligence',
    },
    {
      id: 'advanced-security',
      icon: <ShieldCheck className="h-10 w-10 text-red-500" />,
      title: 'Advanced Security',
      description:
        'Enterprise-grade security with role-based access control and encryption at rest.',
      benefit: 'Protect sensitive information with military-grade protocols',
      category: 'security',
    },
    {
      id: 'real-time-collab',
      icon: <Users className="h-10 w-10 text-blue-500" />,
      title: 'Real-time Collaboration',
      description:
        'Work together with your team simultaneously on shared projects with live updates.',
      benefit: 'Boost team productivity with seamless coordination',
      category: 'collaboration',
    },
    {
      id: 'instant-deploy',
      icon: <Zap className="h-10 w-10 text-yellow-500" />,
      title: 'Instant Deployment',
      description:
        'One-click deployment to any environment with automatic rollback capabilities.',
      benefit: 'Go from development to production in seconds',
      category: 'performance',
    },
    {
      id: 'custom-workflows',
      icon: <Webhook className="h-10 w-10 text-green-500" />,
      title: 'Custom Workflows',
      description:
        'Build automated workflows with our visual editor to streamline your processes.',
      benefit: 'Automate repetitive tasks without coding knowledge',
      category: 'customization',
    },
    {
      id: 'smart-integrations',
      icon: <Merge className="h-10 w-10 text-indigo-500" />,
      title: 'Smart Integrations',
      description:
        'Connect with 200+ apps and services through our intelligent API platform.',
      benefit: 'Create a unified ecosystem of all your business tools',
      category: 'integration',
    },
    {
      id: 'global-cdn',
      icon: <Globe className="h-10 w-10 text-cyan-500" />,
      title: 'Global CDN',
      description:
        'Deliver content with blazing speed through our global content delivery network.',
      benefit: 'Provide fast experiences to users worldwide',
      category: 'performance',
    },
    {
      id: 'cloud-processing',
      icon: <CloudCog className="h-10 w-10 text-sky-500" />,
      title: 'Cloud Processing',
      description:
        'Offload intensive computing tasks to our scalable cloud infrastructure.',
      benefit: 'Handle massive workloads without hardware limitations',
      category: 'performance',
    },
    {
      id: 'predictive-analytics',
      icon: <LineChart className="h-10 w-10 text-violet-500" />,
      title: 'Predictive Analytics',
      description:
        'Anticipate trends and behaviors with forward-looking analytical models.',
      benefit: 'Make data-driven decisions before issues arise',
      category: 'intelligence',
    },
    {
      id: 'multi-tenancy',
      icon: <Layers className="h-10 w-10 text-rose-500" />,
      title: 'Multi-tenancy',
      description:
        'Isolate customer data while maintaining a single application instance.',
      benefit: 'Scale your SaaS business with optimal resource usage',
      category: 'architecture',
    },
    {
      id: 'edge-computing',
      icon: <Cpu className="h-10 w-10 text-amber-500" />,
      title: 'Edge Computing',
      description:
        'Process data closer to the source for reduced latency and bandwidth usage.',
      benefit: 'Achieve near real-time processing for critical operations',
      category: 'performance',
    },
    {
      id: 'biometric-auth',
      icon: <Fingerprint className="h-10 w-10 text-emerald-500" />,
      title: 'Biometric Authentication',
      description:
        'Secure access using fingerprint, face recognition, and other biometric methods.',
      benefit: 'Balance security and convenience for your users',
      category: 'security',
    },
    {
      id: 'chatbots',
      icon: <Bot className="h-10 w-10 text-pink-500" />,
      title: 'Intelligent Chatbots',
      description:
        'Deploy conversational AI to handle customer inquiries and support requests.',
      benefit: 'Provide 24/7 support without expanding your team',
      category: 'intelligence',
    },
    {
      id: 'low-code',
      icon: <Wand2 className="h-10 w-10 text-orange-500" />,
      title: 'Low-Code Builder',
      description:
        'Create custom features and extensions with minimal coding required.',
      benefit: 'Empower non-technical teams to build solutions',
      category: 'customization',
    },
    {
      id: 'api-management',
      icon: <Code className="h-10 w-10 text-neutral-500" />,
      title: 'API Management',
      description:
        'Comprehensive tools to create, publish, maintain, and secure your APIs.',
      benefit: 'Control and monitor all your API endpoints from one place',
      category: 'integration',
    },
    {
      id: 'data-warehouse',
      icon: <Database className="h-10 w-10 text-purple-500" />,
      title: 'Data Warehouse',
      description:
        'Centralized repository optimized for analysis of data from disparate sources.',
      benefit: 'Transform raw data into actionable business intelligence',
      category: 'architecture',
    },
    {
      id: 'advanced-config',
      icon: <Settings className="h-10 w-10 text-slate-500" />,
      title: 'Advanced Configuration',
      description:
        'Granular controls for customizing every aspect of the platform to your needs.',
      benefit: 'Create a perfectly tailored solution for your business',
      category: 'customization',
    },
    {
      id: 'adaptive-ai',
      icon: <SlidersHorizontal className="h-10 w-10 text-teal-500" />,
      title: 'Adaptive AI',
      description:
        'Self-learning systems that adapt to your specific business patterns over time.',
      benefit: 'Get increasingly accurate insights as you use the platform',
      category: 'intelligence',
    },
  ];

  const categories = [
    {
      value: 'all',
      label: 'All Features',
      icon: <Blocks className="h-4 w-4" />,
    },
    {
      value: 'intelligence',
      label: 'Intelligence',
      icon: <BrainCircuit className="h-4 w-4" />,
    },
    {
      value: 'security',
      label: 'Security',
      icon: <Shield className="h-4 w-4" />,
    },
    {
      value: 'performance',
      label: 'Performance',
      icon: <Zap className="h-4 w-4" />,
    },
    {
      value: 'collaboration',
      label: 'Collaboration',
      icon: <Users className="h-4 w-4" />,
    },
    {
      value: 'customization',
      label: 'Customization',
      icon: <SlidersHorizontal className="h-4 w-4" />,
    },
    {
      value: 'integration',
      label: 'Integration',
      icon: <Webhook className="h-4 w-4" />,
    },
    {
      value: 'architecture',
      label: 'Architecture',
      icon: <Server className="h-4 w-4" />,
    },
  ];

  const filteredFeatures =
    activeTab === 'all'
      ? featureIcons
      : featureIcons.filter((feature) => feature.category === activeTab);

  const activeCategory = categories.find((cat) => cat.value === activeTab);

  return (
    <section className="bg-background w-full py-12 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        <div className="mb-8 flex flex-col items-center justify-center space-y-4 text-center">
          <Badge className="px-3.5 py-1.5">Features</Badge>
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
            Powerful Features for Modern Teams
          </h2>
          <p className="text-muted-foreground max-w-[700px] md:text-lg">
            Discover the tools and capabilities that make our platform the
            choice of leading organizations
          </p>
        </div>

        <Tabs
          defaultValue="all"
          value={activeTab}
          onValueChange={setActiveTab}
          className="w-full"
        >
          {/* Dropdown for small screens */}
          <div className="mb-8 flex justify-center lg:hidden">
            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="outline"
                  className="flex w-full max-w-[300px] items-center justify-between"
                >
                  <div className="flex items-center gap-2">
                    {activeCategory?.icon}
                    <span>{activeCategory?.label}</span>
                  </div>
                  <ChevronDown className="text-muted-foreground ml-2 h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-[300px]">
                {categories.map((category) => (
                  <DropdownMenuItem
                    key={category.value}
                    className="flex items-center gap-2"
                    onClick={() => {
                      setActiveTab(category.value);
                      setDropdownOpen(false);
                    }}
                  >
                    {category.icon}
                    <span>{category.label}</span>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          {/* Tabs for medium and larger screens */}
          <div className="mb-8 hidden justify-center lg:flex">
            <TabsList className="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-8">
              {categories.map((category) => (
                <TabsTrigger
                  key={category.value}
                  value={category.value}
                  className="flex items-center gap-2"
                >
                  {category.icon}
                  <span className="hidden md:inline">{category.label}</span>
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

          <TabsContent value={activeTab} className="space-y-4">
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
              {filteredFeatures.map((feature) => (
                <Card
                  key={feature.id}
                  className="group overflow-hidden p-0 transition-all hover:shadow-md"
                >
                  <CardContent className="p-6">
                    <div className="space-y-4">
                      <div className="bg-primary/5 flex h-16 w-16 items-center justify-center rounded-full">
                        {feature.icon}
                      </div>

                      <div>
                        <h3 className="text-xl font-semibold">
                          {feature.title}
                        </h3>
                        <p className="text-muted-foreground mt-2">
                          {feature.description}
                        </p>
                      </div>

                      <div className="border-border border-t pt-4">
                        <p className="text-primary text-sm font-medium">
                          <span className="font-bold">Key benefit:</span>{' '}
                          {feature.benefit}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            {filteredFeatures.length === 0 && (
              <div className="py-12 text-center">
                <p className="text-muted-foreground">
                  No features found in this category.
                </p>
              </div>
            )}
          </TabsContent>
        </Tabs>

        <div className="mt-12 flex flex-col justify-center gap-4 sm:flex-row">
          <Button size="lg" className="group" asChild>
            <a href="#">
              Get started with all features
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </a>
          </Button>
          <Button variant="outline" size="lg" asChild>
            <a href="#">
              Schedule a demo
              <MessageSquare className="ml-2 h-4 w-4" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
}