Feature Wizard

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { ChevronLeft, ChevronRight, CheckCircle2, Star, MousePointerClick, BarChart4, Lightbulb, RotateCcw, ArrowRight, Database } from 'lucide-react';

import { cn } from '@/lib/utils';

import type { ComponentType, SVGProps } from 'react';

type LucideIcon = ComponentType<SVGProps<SVGSVGElement> & { size?: number | string }>;
interface Feature {
  id: string;
  title: string;
  shortDescription: string;
  fullDescription: string;
  icon: LucideIcon;
  benefits: string[];
  image: string;
  cta: {
    text: string;
    href: string;
  };
  color: string;
}

const features: Feature[] = [
  {
    id: 'analytics',
    title: 'Advanced Analytics',
    shortDescription: 'Powerful data insights',
    fullDescription:
      'Our advanced analytics platform provides real-time insights into your business performance, enabling data-driven decisions with custom dashboards, alerts, and reports.',
    icon: BarChart4,
    benefits: [
      'Real-time performance dashboards',
      'Custom reporting tools',
      'Predictive analytics',
      'Data visualization',
    ],
    image:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1000&auto=format&fit=crop',
    cta: {
      text: 'See analytics in action',
      href: '#',
    },
    color: 'bg-blue-500/10 text-blue-600',
  },
  {
    id: 'automation',
    title: 'Workflow Automation',
    shortDescription: 'Automate repetitive tasks',
    fullDescription:
      'Build powerful automation workflows that save time and reduce errors. Connect your tools and processes with our visual automation builder.',
    icon: RotateCcw,
    benefits: [
      'Visual workflow builder',
      'Trigger-based automations',
      'Cross-platform integration',
      'Error handling and recovery',
    ],
    image:
      'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=1000&auto=format&fit=crop',
    cta: {
      text: 'Start automating',
      href: '#',
    },
    color: 'bg-amber-500/10 text-amber-600',
  },
  {
    id: 'ai',
    title: 'AI Recommendations',
    shortDescription: 'Smart suggestions',
    fullDescription:
      'Leverage the power of artificial intelligence to receive personalized recommendations, predict outcomes, and optimize your business operations.',
    icon: Lightbulb,
    benefits: [
      'Personalized insights',
      'Predictive recommendations',
      'Anomaly detection',
      'Decision support',
    ],
    image:
      'https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1000&auto=format&fit=crop',
    cta: {
      text: 'Explore AI features',
      href: '#',
    },
    color: 'bg-purple-500/10 text-purple-600',
  },
  {
    id: 'ux',
    title: 'User Experience',
    shortDescription: 'Intuitive interfaces',
    fullDescription:
      'Create delightful user experiences with our design tools and components. Build interfaces that users love with minimal effort.',
    icon: MousePointerClick,
    benefits: [
      'Drag-and-drop UI builder',
      'Responsive design templates',
      'User behavior analytics',
      'A/B testing capabilities',
    ],
    image:
      'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1000&auto=format&fit=crop',
    cta: {
      text: 'Design better UX',
      href: '#',
    },
    color: 'bg-green-500/10 text-green-600',
  },
  {
    id: 'data',
    title: 'Data Management',
    shortDescription: 'Organize your information',
    fullDescription:
      'Centralize and manage all your data with powerful organization tools, versioning, and secure sharing capabilities.',
    icon: Database,
    benefits: [
      'Unified data storage',
      'Automated backups',
      'Version control',
      'Robust search capabilities',
    ],
    image:
      'https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=1000&auto=format&fit=crop',
    cta: {
      text: 'Organize your data',
      href: '#',
    },
    color: 'bg-indigo-500/10 text-indigo-600',
  },
];

export default function FeatureWizard() {
  const [currentStep, setCurrentStep] = useState(0);
  const [completed, setCompleted] = useState<string[]>(['analytics']);
  const totalSteps = features.length;
  const progress = (currentStep / (totalSteps - 1)) * 100;

  const currentFeature = features[currentStep]!;

  const handleNext = () => {
    if (!completed.includes(currentFeature.id)) {
      setCompleted([...completed, currentFeature.id]);
    }

    if (currentStep < totalSteps - 1) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleStepClick = (index: number) => {
    if (!completed.includes(features[index]!.id)) {
      setCompleted([...completed, features[index]!.id]);
    }

    setCurrentStep(index);
  };

  const isFeatureCompleted = (id: string) => {
    return completed.includes(id);
  };

  return (
    <section className="container mx-auto space-y-12 px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="space-y-4 text-center">
        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
          Explore our platform features
        </h2>
        <p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
          Take a guided tour through our key features and see how they can help
          your business
        </p>
      </div>

      {/* Wizard progress */}
      <div className="mx-auto w-full space-y-4 lg:max-w-3xl">
        <div className="flex items-center justify-between">
          <p className="text-sm font-medium">
            Step {currentStep + 1} of {totalSteps}
          </p>
          <Badge variant="outline">
            {completed.length} of {totalSteps} features explored
          </Badge>
        </div>

        <Progress value={progress} className="h-2" />

        <div className="flex flex-wrap justify-center gap-2">
          {features.map((feature, index) => (
            <Button
              key={feature.id}
              variant={index === currentStep ? 'default' : 'outline'}
              size="sm"
              className={cn(
                'gap-1 transition-all',
                isFeatureCompleted(feature.id) &&
                  index !== currentStep &&
                  'bg-primary/10'
              )}
              onClick={() => handleStepClick(index)}
            >
              {isFeatureCompleted(feature.id) && (
                <CheckCircle2 className="h-4 w-4 text-green-500" />
              )}
              <span>{feature.shortDescription}</span>
            </Button>
          ))}
        </div>
      </div>

      {/* Current feature */}
      <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
        <div className="order-2 lg:order-1">
          <Card>
            <CardHeader className="space-y-1">
              <div className="flex items-start justify-between">
                <div className={cn('rounded-md p-2', currentFeature.color)}>
                  <currentFeature.icon className="h-6 w-6" />
                </div>
                {isFeatureCompleted(currentFeature.id) && (
                  <Badge
                    variant="outline"
                    className="flex items-center gap-1 text-green-600"
                  >
                    <CheckCircle2 className="h-3.5 w-3.5" />
                    Explored
                  </Badge>
                )}
              </div>
              <CardTitle className="text-2xl">{currentFeature.title}</CardTitle>
              <CardDescription className="text-base">
                {currentFeature.fullDescription}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <h4 className="flex items-center gap-2 font-medium">
                <Star className="h-4 w-4 text-amber-500" />
                Key Benefits
              </h4>
              <ul className="space-y-2">
                {currentFeature.benefits.map((benefit, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
            <CardFooter className="justify-between">
              <Button asChild variant="outline">
                <a href={currentFeature.cta.href}>{currentFeature.cta.text}</a>
              </Button>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="icon"
                  onClick={handlePrevious}
                  disabled={currentStep === 0}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={handleNext}
                  disabled={currentStep === totalSteps - 1}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </CardFooter>
          </Card>
        </div>

        <div className="relative order-1 min-h-[300px] overflow-hidden rounded-xl lg:order-2">
          <img
            src={currentFeature.image}
            alt={currentFeature.title}
            className="object-cover"
          />
          <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 to-transparent">
            <div className="p-6 text-white">
              <h3 className="text-xl font-bold">{currentFeature.title}</h3>
              <p className="text-white/80">{currentFeature.shortDescription}</p>
            </div>
          </div>
        </div>
      </div>

      {/* CTA section */}
      <div className="mt-16 flex flex-col items-center justify-between gap-8 rounded-xl border p-8 lg:flex-row">
        <div>
          <h3 className="text-xl font-bold">
            Ready to explore all our features?
          </h3>
          <p className="text-muted-foreground max-w-[600px]">
            See how our complete platform can transform your business with a
            personalized demo.
          </p>
        </div>
        <Button asChild size="lg">
          <a href="#">
            Schedule a demo <ArrowRight className="ml-2 h-4 w-4" />
          </a>
        </Button>
      </div>
    </section>
  );
}