Feature Comparison Table

import { useState } from 'react';

import { ArrowRight, Check, HelpCircle, Info, X } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

export default function FeatureComparisonTable() {
  const [activeTier, setActiveTier] = useState<string>('premium');

  const tiers = [
    {
      id: 'basic',
      name: 'Basic',
      price: '$149',
      description: 'All the essentials for daily commuting',
      image:
        'https://images.unsplash.com/photo-1485965120184-e220f721d03e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      popular: false,
    },
    {
      id: 'premium',
      name: 'Premium',
      price: '$249',
      description: 'Advanced features for the cycling enthusiast',
      image:
        'https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?q=80&w=1976&auto=format&fit=crop',
      popular: true,
    },
    {
      id: 'elite',
      name: 'Elite Carbon',
      price: '$399',
      description: 'Professional grade components for serious riders',
      image:
        'https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?q=80&w=2070&auto=format&fit=crop',
      popular: false,
    },
  ];

  const featureCategories = [
    {
      name: 'Frame & Construction',
      features: [
        {
          name: 'Frame Material',
          values: {
            basic: 'Aluminum Alloy',
            premium: 'Hydroformed Aluminum',
            elite: 'Carbon Fiber Composite',
          },
          tooltip: 'The primary material used in the bike frame construction',
        },
        {
          name: 'Weight',
          values: {
            basic: '12.5 kg (27.5 lbs)',
            premium: '10.2 kg (22.5 lbs)',
            elite: '8.3 kg (18.3 lbs)',
          },
          tooltip: 'Total weight of the assembled bicycle',
        },
        {
          name: 'Internal Cable Routing',
          values: {
            basic: false,
            premium: true,
            elite: true,
          },
          tooltip:
            'Cables run inside the frame for a cleaner look and protection',
        },
      ],
    },
    {
      name: 'Components',
      features: [
        {
          name: 'Drivetrain',
          values: {
            basic: 'Shimano Altus (8-speed)',
            premium: 'Shimano Deore (10-speed)',
            elite: 'Shimano XT (12-speed)',
          },
          tooltip: 'The gear and shifting system',
        },
        {
          name: 'Brakes',
          values: {
            basic: 'Mechanical Disc',
            premium: 'Hydraulic Disc',
            elite: 'Shimano XT Hydraulic Disc',
          },
          tooltip: 'Brake system type and quality',
        },
        {
          name: 'Wheelset',
          values: {
            basic: 'Aluminum Double Wall',
            premium: 'Tubeless Ready Aluminum',
            elite: 'Carbon Fiber Tubeless Ready',
          },
          tooltip: 'Type and material of the wheels',
        },
      ],
    },
    {
      name: 'Comfort & Accessories',
      features: [
        {
          name: 'Suspension Fork',
          values: {
            basic: '100mm Travel',
            premium: '120mm Travel, Adjustable',
            elite: '120mm Travel, Fully Adjustable',
          },
          tooltip: 'Front suspension system for absorbing impacts',
        },
        {
          name: 'Dropper Seatpost',
          values: {
            basic: false,
            premium: true,
            elite: true,
          },
          tooltip:
            'Height-adjustable seatpost that can be controlled while riding',
        },
        {
          name: 'Tubeless Tires',
          values: {
            basic: false,
            premium: true,
            elite: true,
          },
          tooltip:
            "Tires that don't use inner tubes, providing better puncture resistance",
        },
      ],
    },
    {
      name: 'Support & Warranty',
      features: [
        {
          name: 'Frame Warranty',
          values: {
            basic: '5 Years',
            premium: 'Lifetime',
            elite: 'Lifetime',
          },
          tooltip: 'Length of manufacturer warranty on the frame',
        },
        {
          name: 'Components Warranty',
          values: {
            basic: '1 Year',
            premium: '2 Years',
            elite: '3 Years',
          },
          tooltip: 'Length of manufacturer warranty on components',
        },
        {
          name: 'Professional Bike Fitting',
          values: {
            basic: false,
            premium: true,
            elite: true,
          },
          tooltip: 'Expert service to adjust the bike to your body dimensions',
        },
      ],
    },
  ];

  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 md:mb-16">
          <Badge className="px-3.5 py-1.5">Compare Models</Badge>
          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
            Find your perfect ride
          </h2>
          <p className="text-muted-foreground max-w-[700px] md:text-xl/relaxed">
            Compare our mountain bike models to find the right balance of
            performance and value for your riding style.
          </p>
        </div>

        {/* Product tier selector for mobile */}
        <div className="mb-8 md:hidden">
          <select
            className="w-full rounded-md border p-2"
            value={activeTier}
            onChange={(e) => setActiveTier(e.target.value)}
          >
            {tiers.map((tier) => (
              <option key={tier.id} value={tier.id}>
                {tier.name} - {tier.price}
              </option>
            ))}
          </select>
        </div>

        {/* Product tier cards */}
        <div className="mb-8 hidden grid-cols-4 gap-4 md:grid">
          <div className="flex items-end p-6">
            <h3 className="text-xl font-semibold">Mountain Bike Models</h3>
          </div>
          {tiers.map((tier) => (
            <div
              key={tier.id}
              className={`relative flex h-full flex-col rounded-xl border p-6 transition-all ${
                tier.id === activeTier
                  ? 'ring-primary shadow-lg ring-2'
                  : 'hover:border-primary/50 cursor-pointer hover:shadow-md'
              }`}
              onClick={() => setActiveTier(tier.id)}
            >
              {tier.popular && (
                <Badge className="absolute top-0 right-0 translate-x-1/4 -translate-y-1/2 px-3 py-1">
                  Most Popular
                </Badge>
              )}
              <div className="relative mb-4 aspect-[4/3] w-full overflow-hidden rounded-lg">
                <img
                  src={tier.image}
                  alt={tier.name}
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 300px"
                />
              </div>
              <h3 className="text-lg font-semibold">{tier.name}</h3>
              <div className="mt-1 flex items-baseline gap-1">
                <span className="text-2xl font-bold">{tier.price}</span>
              </div>
              <p className="text-muted-foreground mt-2 flex-grow text-sm">
                {tier.description}
              </p>
              <Button
                variant={tier.id === activeTier ? 'default' : 'outline'}
                size="sm"
                className="mt-4"
                asChild
              >
                <a href="#">
                  View Details
                  <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>
          ))}
        </div>

        {/* Mobile comparison for selected tier */}
        <div className="space-y-8 md:hidden">
          {featureCategories.map((category) => (
            <div key={category.name} className="space-y-4">
              <h3 className="border-b pb-2 text-lg font-semibold">
                {category.name}
              </h3>
              <div className="space-y-4">
                {category.features.map((feature) => (
                  <div key={feature.name} className="grid grid-cols-2 gap-4">
                    <div className="flex items-center gap-2">
                      <span>{feature.name}</span>
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger>
                            <HelpCircle className="text-muted-foreground h-4 w-4" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <p className="max-w-xs text-sm">
                              {feature.tooltip}
                            </p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </div>
                    <div>
                      {typeof feature.values[
                        activeTier as keyof typeof feature.values
                      ] === 'boolean' ? (
                        feature.values[
                          activeTier as keyof typeof feature.values
                        ] ? (
                          <Check className="text-primary h-5 w-5" />
                        ) : (
                          <X className="text-muted-foreground h-5 w-5" />
                        )
                      ) : (
                        <span>
                          {
                            feature.values[
                              activeTier as keyof typeof feature.values
                            ]
                          }
                        </span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Desktop comparison table */}
        <div className="hidden overflow-x-auto md:block">
          <TooltipProvider>
            <Table className="border-collapse">
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="w-1/4">Feature Categories</TableHead>
                  {tiers.map((tier) => (
                    <TableHead
                      key={tier.id}
                      className={`text-center ${
                        tier.id === activeTier ? 'bg-primary/5' : ''
                      }`}
                    >
                      {tier.name}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {featureCategories.map((category, categoryIndex) => (
                  <>
                    <TableRow className="bg-muted/20">
                      <TableCell colSpan={4} className="text-base font-medium">
                        {category.name}
                      </TableCell>
                    </TableRow>
                    {category.features.map((feature, featureIndex) => (
                      <TableRow
                        key={`${categoryIndex}-${featureIndex}`}
                        className={`${
                          featureIndex === category.features.length - 1 &&
                          categoryIndex !== featureCategories.length - 1
                            ? 'border-border border-b-2'
                            : ''
                        }`}
                      >
                        <TableCell className="flex items-center gap-2 font-medium">
                          {feature.name}
                          <Tooltip>
                            <TooltipTrigger>
                              <Info className="text-muted-foreground h-4 w-4" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p className="max-w-xs text-sm">
                                {feature.tooltip}
                              </p>
                            </TooltipContent>
                          </Tooltip>
                        </TableCell>
                        {tiers.map((tier) => (
                          <TableCell
                            key={`${feature.name}-${tier.id}`}
                            className={`text-center ${
                              tier.id === activeTier ? 'bg-primary/5' : ''
                            }`}
                          >
                            {typeof feature.values[
                              tier.id as keyof typeof feature.values
                            ] === 'boolean' ? (
                              feature.values[
                                tier.id as keyof typeof feature.values
                              ] ? (
                                <div className="flex justify-center">
                                  <Check className="text-primary h-5 w-5" />
                                </div>
                              ) : (
                                <div className="flex justify-center">
                                  <X className="text-muted-foreground h-5 w-5" />
                                </div>
                              )
                            ) : (
                              <span>
                                {
                                  feature.values[
                                    tier.id as keyof typeof feature.values
                                  ]
                                }
                              </span>
                            )}
                          </TableCell>
                        ))}
                      </TableRow>
                    ))}
                  </>
                ))}
              </TableBody>
            </Table>
          </TooltipProvider>
        </div>

        {/* CTA section */}
        <div className="mt-16 flex flex-col items-center justify-center space-y-4 text-center">
          <h3 className="text-xl font-semibold">Ready to hit the trails?</h3>
          <p className="text-muted-foreground max-w-[600px]">
            All bikes come with free shipping, professional assembly, and a
            30-day test ride guarantee.
          </p>
          <div className="mt-6 flex flex-col gap-4 sm:flex-row">
            <Button size="lg" asChild>
              <a href="#">
                Shop {tiers.find((t) => t.id === activeTier)?.name || 'Premium'}{' '}
                Model
                <ArrowRight className="ml-2 h-4 w-4" />
              </a>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <a href="#">Schedule Test Ride</a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}