import { useState } from 'react';

import {
  ArrowRight,
  Sparkles,
  Code2,
  Zap,
  Shield,
  LineChart,
  PanelTop,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

export default function FeatureTabsNavigation() {
  const [activeTab, setActiveTab] = useState('design');

  const featureCategories = [
    {
      id: 'design',
      label: 'Design',
      icon: <Sparkles className="mr-2 h-4 w-4" />,
      title: 'Sleek Modern Design',
      description:
        "Our flagship laptop combines premium materials with thoughtful engineering, resulting in a device that's both beautiful and functional.",
      image:
        'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?q=80&w=2070&auto=format&fit=crop',
      features: [
        {
          title: 'Premium Aluminum Chassis',
          description:
            'Precision CNC-machined from a single block of aerospace-grade aluminum for exceptional durability and thermal efficiency.',
          icon: <PanelTop className="h-5 w-5" />,
        },
        {
          title: 'Edge-to-Edge Display',
          description:
            'Immersive 16-inch OLED display with 4K resolution, 100% DCI-P3 color gamut, and ultra-thin bezels for maximum viewing area.',
          icon: <Sparkles className="h-5 w-5" />,
        },
        {
          title: 'Backlit Keyboard',
          description:
            'Full-sized backlit keyboard with 1.5mm key travel, ambient light sensor, and spill-resistant design for comfortable typing in any environment.',
          icon: <Sparkles className="h-5 w-5" />,
        },
      ],
    },
    {
      id: 'performance',
      label: 'Performance',
      icon: <Zap className="mr-2 h-4 w-4" />,
      title: 'Exceptional Performance',
      description:
        'State-of-the-art components and advanced thermal architecture deliver outstanding performance for demanding creative and professional workflows.',
      image:
        'https://images.unsplash.com/photo-1610465299996-30f240ac2b1c?q=80&w=2070&auto=format&fit=crop',
      features: [
        {
          title: 'Next-Gen Processor',
          description:
            'Latest generation 5nm processor with up to 16 cores and advanced AI acceleration for blazing-fast performance with exceptional power efficiency.',
          icon: <Zap className="h-5 w-5" />,
        },
        {
          title: 'Professional Graphics',
          description:
            'Discrete GPU with 16GB dedicated memory, ray-tracing cores, and AI-assisted rendering for exceptional creative performance.',
          icon: <LineChart className="h-5 w-5" />,
        },
        {
          title: 'Advanced Cooling',
          description:
            'Innovative vapor chamber cooling system with dual fans and liquid metal thermal interface for sustained peak performance under heavy loads.',
          icon: <Zap className="h-5 w-5" />,
        },
      ],
    },
    {
      id: 'security',
      label: 'Security',
      icon: <Shield className="mr-2 h-4 w-4" />,
      title: 'Enterprise-Grade Security',
      description:
        'Comprehensive security features protect your data and privacy with multiple layers of hardware and software protection.',
      image:
        'https://images.unsplash.com/photo-1563387852576-964bc31b73af?q=80&w=2070&auto=format&fit=crop',
      features: [
        {
          title: 'Secure Boot',
          description:
            'Hardware-based secure boot process with dedicated security chip ensures only trusted software runs at startup.',
          icon: <Shield className="h-5 w-5" />,
        },
        {
          title: 'Biometric Authentication',
          description:
            'Precision fingerprint sensor and infrared camera system for fast, secure multi-factor authentication.',
          icon: <Shield className="h-5 w-5" />,
        },
        {
          title: 'Data Encryption',
          description:
            'Full-disk encryption with hardware acceleration for zero-impact security, plus encrypted secure enclave for sensitive credentials.',
          icon: <Shield className="h-5 w-5" />,
        },
      ],
    },
    {
      id: 'connectivity',
      label: 'Connectivity',
      icon: <Code2 className="mr-2 h-4 w-4" />,
      title: 'Next-Gen Connectivity',
      description:
        'Stay connected with the latest wireless standards and versatile port selection for seamless integration with all your devices and accessories.',
      image:
        'https://images.unsplash.com/photo-1625480860249-be231806e6ed?q=80&w=2070&auto=format&fit=crop',
      features: [
        {
          title: 'Versatile I/O Ports',
          description:
            'Three Thunderbolt 4 ports, HDMI 2.1, USB-A, SD card reader, and 3.5mm audio jack for universal compatibility.',
          icon: <Code2 className="h-5 w-5" />,
        },
        {
          title: 'Next-Gen Wi-Fi',
          description:
            'Wi-Fi 6E provides faster speeds, greater capacity, and lower latency when connected to compatible networks.',
          icon: <Code2 className="h-5 w-5" />,
        },
        {
          title: 'Bluetooth 5.3',
          description:
            'Latest Bluetooth standard for reliable wireless connectivity with headphones, speakers, and accessories with improved range and audio quality.',
          icon: <Code2 className="h-5 w-5" />,
        },
      ],
    },
  ];

  // Find the active category
  const activeCategory =
    featureCategories.find((cat) => cat.id === activeTab) ||
    featureCategories[0]!;

  return (
    <section className="bg-background w-full py-12 md:py-24 lg:py-32">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        <div className="mb-8 flex flex-col items-center space-y-4 text-center">
          <Badge variant="outline" className="px-3.5 py-1.5">
            Ultimate Productivity
          </Badge>
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
            Designed for professionals
          </h2>
          <p className="text-muted-foreground max-w-[800px] md:text-xl/relaxed lg:text-center">
            Our flagship laptop delivers exceptional performance, stunning
            design, and advanced features for creatives and professionals.
          </p>
        </div>

        <Tabs
          defaultValue="design"
          value={activeTab}
          onValueChange={setActiveTab}
          className="mb-8 w-full"
        >
          <div className="mb-8 flex justify-center">
            <TabsList className="grid h-auto w-full max-w-3xl p-1 sm:grid-cols-2 md:grid-cols-4">
              {featureCategories.map((category) => (
                <TabsTrigger
                  key={category.id}
                  value={category.id}
                  className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground flex items-center justify-center py-3"
                >
                  {category.icon}
                  {category.label}
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

          {/* Main product image */}
          <div className="mb-12 overflow-hidden rounded-xl border">
            <img
              src={activeCategory.image}
              alt={`${activeCategory.label} feature showcase`}
              width={1200}
              height={600}
              className="h-[300px] w-full object-cover transition-all duration-500 md:h-[500px]"
            />
          </div>

          {featureCategories.map((category) => (
            <TabsContent
              key={category.id}
              value={category.id}
              className="data-[state=active]:animate-in data-[state=active]:fade-in-50 mt-0"
            >
              <div className="mb-12 grid items-center gap-12 md:grid-cols-2">
                <div className="space-y-4">
                  <h3 className="text-2xl font-bold">{category.title}</h3>
                  <p className="text-muted-foreground">
                    {category.description}
                  </p>
                  <Button asChild>
                    <a href="#">
                      Learn more about {category.label.toLowerCase()} features
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </a>
                  </Button>
                </div>

                <div className="space-y-6">
                  {category.features.map((feature, idx) => (
                    <div
                      key={idx}
                      className="bg-muted/40 flex items-start gap-4 rounded-lg border p-4"
                    >
                      <div className="bg-primary/10 text-primary mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                        {feature.icon}
                      </div>
                      <div>
                        <h4 className="text-base font-medium">
                          {feature.title}
                        </h4>
                        <p className="text-muted-foreground mt-1 text-sm">
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>
          ))}
        </Tabs>

        {/* Specs section */}
        <div className="mt-12 border-t pt-12">
          <h3 className="mb-8 text-center text-xl font-semibold">
            Technical Specifications
          </h3>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
            <div className="space-y-2 rounded-lg border p-4 text-center">
              <h4 className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
                Processor
              </h4>
              <p className="font-medium">16-core CPU</p>
              <p className="text-muted-foreground text-sm">5nm architecture</p>
            </div>

            <div className="space-y-2 rounded-lg border p-4 text-center">
              <h4 className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
                Memory
              </h4>
              <p className="font-medium">Up to 64GB</p>
              <p className="text-muted-foreground text-sm">LPDDR5X</p>
            </div>

            <div className="space-y-2 rounded-lg border p-4 text-center">
              <h4 className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
                Storage
              </h4>
              <p className="font-medium">Up to 8TB</p>
              <p className="text-muted-foreground text-sm">PCIe Gen 4 SSD</p>
            </div>

            <div className="space-y-2 rounded-lg border p-4 text-center">
              <h4 className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
                Battery Life
              </h4>
              <p className="font-medium">Up to 22 hours</p>
              <p className="text-muted-foreground text-sm">Fast charging</p>
            </div>
          </div>
        </div>

        {/* CTA section */}
        <div className="mt-12 flex flex-col items-center justify-center space-y-4 text-center">
          <div className="flex flex-col gap-4 sm:flex-row">
            <Button size="lg" asChild>
              <a href="#">
                Configure yours
                <ArrowRight className="ml-2 h-4 w-4" />
              </a>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <a href="#">View all specs</a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}