AI Feature Showcase

"use client";
 
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Sparkles, Wand2, CheckCircle2, RefreshCw, Zap } from "lucide-react";
import { cn } from "@/lib/utils";
 
interface AIFeatureShowcaseProps {
  headline?: string;
  description?: string;
  features?: {
    title: string;
    description: string;
    icon: React.ElementType;
  }[];
  demoInput?: string;
  demoOutput?: string;
  className?: string;
}
 
export function AIFeatureShowcase({
  headline = "Experience the magic of AI",
  description = "Transform your workflow with intelligent automation that feels like magic.",
  features = [
    {
      title: "Smart Rewrite",
      description: "Instantly improve clarity and tone.",
      icon: Wand2,
    },
    {
      title: "Auto-Correction",
      description: "Fix grammar and style errors on the fly.",
      icon: CheckCircle2,
    },
    {
      title: "Instant Summary",
      description: "Condense long texts into key points.",
      icon: Zap,
    },
  ],
  demoInput = "This product is good. It helps me do work faster and better.",
  demoOutput = "This solution dramatically enhances productivity, streamlining workflows to deliver superior results with greater efficiency.",
  className,
}: AIFeatureShowcaseProps) {
  const [isGenerating, setIsGenerating] = React.useState(false);
  const [showResult, setShowResult] = React.useState(false);
  const [inputValue, setInputValue] = React.useState(demoInput);
 
  const handleGenerate = () => {
    if (isGenerating) return;
    setIsGenerating(true);
    setShowResult(false);
 
    // Simulate AI processing
    setTimeout(() => {
      setIsGenerating(false);
      setShowResult(true);
    }, 1500);
  };
 
  const handleReset = () => {
    setShowResult(false);
    setInputValue(demoInput);
  };
 
  return (
    <section className={cn("w-full py-12 sm:py-16 lg:py-20", className)}>
      <div className="container px-4 md:px-6">
        <div className="flex flex-col gap-12 lg:grid lg:grid-cols-2 lg:gap-20 lg:items-center">
          {/* Left Column: Content */}
          <div className="space-y-8">
            <div className="space-y-4">
              <div className="inline-flex items-center rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-sm font-medium text-primary">
                <Sparkles className="mr-2 h-3.5 w-3.5 fill-primary" />
                Powered by Advanced AI
              </div>
              <h2 className="text-3xl font-bold tracking-tighter text-foreground sm:text-4xl md:text-5xl">
                {headline}
              </h2>
              <p className="text-lg text-muted-foreground md:text-xl">
                {description}
              </p>
            </div>
 
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-1">
              {features.map((feature, idx) => {
                const Icon = feature.icon;
                return (
                  <div key={idx} className="flex gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                      <Icon className="h-5 w-5" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-foreground">
                        {feature.title}
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        {feature.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
 
          {/* Right Column: Interactive Demo */}
          <div className="relative mx-auto w-full max-w-md lg:max-w-none">
            {/* Background Glow Effects */}
            <div className="absolute -right-10 -top-10 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
            <div className="absolute -bottom-10 -left-10 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl" />
 
            <div className="relative overflow-hidden rounded-2xl border border-border bg-card shadow-2xl">
              {/* Window Header */}
              <div className="flex items-center border-b border-border bg-muted/30 px-4 py-3">
                <div className="flex space-x-2">
                  <div className="h-3 w-3 rounded-full bg-red-500/20" />
                  <div className="h-3 w-3 rounded-full bg-yellow-500/20" />
                  <div className="h-3 w-3 rounded-full bg-green-500/20" />
                </div>
                <div className="ml-4 text-xs font-medium text-muted-foreground">
                  AI Assistant
                </div>
              </div>
 
              {/* Content Area */}
              <div className="p-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                      Input
                    </label>
                    <div className="relative">
                      <textarea
                        value={inputValue}
                        onChange={(e) => setInputValue(e.target.value)}
                        className="min-h-[100px] w-full resize-none rounded-lg border border-border bg-background p-3 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                        disabled={isGenerating || showResult}
                      />
                      {isGenerating && (
                        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/50 backdrop-blur-[1px]">
                          <div className="flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
                            <RefreshCw className="h-4 w-4 animate-spin" />
                            Processing...
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
 
                  <div className="flex justify-center">
                    <button
                      onClick={showResult ? handleReset : handleGenerate}
                      disabled={isGenerating}
                      className={cn(
                        "group relative inline-flex items-center gap-2 rounded-full px-6 py-2 text-sm font-semibold transition-all",
                        showResult
                          ? "bg-muted text-foreground hover:bg-muted/80"
                          : "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-105",
                      )}
                    >
                      {showResult ? (
                        <>
                          <RefreshCw className="h-4 w-4" />
                          Reset
                        </>
                      ) : (
                        <>
                          <Sparkles className="h-4 w-4" />
                          Enhance with AI
                        </>
                      )}
                    </button>
                  </div>
 
                  <AnimatePresence mode="wait">
                    {showResult && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        className="overflow-hidden"
                      >
                        <div className="space-y-2 pt-2">
                          <label className="flex items-center gap-2 text-xs font-medium text-primary uppercase tracking-wider">
                            <Sparkles className="h-3 w-3" />
                            AI Output
                          </label>
                          <div className="relative rounded-lg border border-primary/20 bg-primary/5 p-4">
                            <p className="text-sm text-foreground leading-relaxed">
                              {demoOutput}
                            </p>
                            <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-primary shadow-[0_0_10px_2px_rgba(var(--primary),0.5)]" />
                          </div>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}