components/slides/ToolSlide.tsx

import React from 'react';
import { Slide } from '../../types';
import { motion } from 'framer-motion';
import { Cpu, Zap, Search, ExternalLink } from 'lucide-react';
import GlowCard from '../ui/GlowCard';

export const ToolSlide: React.FC<{ slide: Slide }> = ({ slide }) => {
  const isMetrics = !!slide.content.metrics;
  const isCategories = !!slide.content.categories;

  return (
    <div className="flex flex-col h-full justify-center px-6 max-w-6xl mx-auto">
      <div className="flex items-center justify-between mb-12">
        <motion.h2 
            className="text-5xl font-bold text-slate-900"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
        >
            {slide.title}
        </motion.h2>
        
        {slide.images && slide.images.length > 0 && (
             <motion.img 
                src={slide.images[0].src} 
                alt="Logo" 
                className="w-20 h-20 rounded-2xl shadow-lg"
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.2 }}
             />
        )}
      </div>

      <div className="grid md:grid-cols-12 gap-12">
        <div className="md:col-span-7 flex flex-col justify-center">
            {slide.content.tagline && (
                <p className="text-primary font-bold tracking-widest uppercase text-sm mb-6">{slide.content.tagline}</p>
            )}
            
            {slide.content.intro && (
                <p className="text-2xl text-slate-600 mb-10 font-light leading-snug">{slide.content.intro}</p>
            )}

            <div className="space-y-6 mb-10">
                {slide.content.bullets?.map((bullet, idx) => (
                    <motion.div 
                        key={idx}
                        className="flex items-start gap-4"
                        initial={{ opacity: 0, x: 20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.3 + (idx * 0.1) }}
                    >
                        <span className="w-2 h-2 rounded-full bg-primary mt-2.5 flex-shrink-0" />
                        <span className="text-xl text-slate-700">{bullet}</span>
                    </motion.div>
                ))}
            </div>

            {slide.content.callToAction && (
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.6 }}
                >
                    <a 
                        href={slide.content.callToAction.url} 
                        target="_blank" 
                        rel="noreferrer"
                        className="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 hover:bg-slate-800"
                    >
                        {slide.content.callToAction.icon && <span className="text-xl">{slide.content.callToAction.icon}</span>}
                        {slide.content.callToAction.text}
                        <ExternalLink size={18} className="text-slate-400" />
                    </a>
                </motion.div>
            )}
        </div>

        <div className="md:col-span-5 flex flex-col gap-6 justify-center">
            {/* Metric Cards for Groq Slide */}
            {isMetrics && slide.content.metrics?.map((metric, idx) => (
                <GlowCard key={idx} delay={0.5 + (idx * 0.1)} intensity="low" className="flex items-center justify-between py-6">
                    <div className="flex items-center gap-4">
                        <span className="text-3xl">{metric.emoji}</span>
                        <span className="text-sm text-slate-500 font-bold uppercase tracking-wider">{metric.label}</span>
                    </div>
                    <span className="text-3xl font-black text-slate-900">{metric.value}</span>
                </GlowCard>
            ))}

            {/* Category Cards for Image Gen Slide */}
            {isCategories && slide.content.categories?.map((cat, idx) => (
                <motion.div 
                    key={idx}
                    className="bg-white p-6 rounded-xl border-l-4 border-primary shadow-sm"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 + (idx * 0.1) }}
                >
                    <h4 className="font-bold text-slate-900 text-lg mb-1">{cat.name}</h4>
                    <p className="text-slate-500">{cat.description}</p>
                </motion.div>
            ))}

             {/* Generic abstract visual if no specific side content */}
             {!isMetrics && !isCategories && (
                 <div className="h-full min-h-[300px] flex items-center justify-center relative">
                     <motion.div 
                        className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-secondary/20 blur-[60px] rounded-full" 
                        animate={{ scale: [1, 1.1, 1], opacity: [0.5, 0.7, 0.5] }}
                        transition={{ duration: 6, repeat: Infinity }}
                     />
                     <div className="z-10 text-primary drop-shadow-sm">
                        {slide.title.includes('Perplexity') && <Search size={100} strokeWidth={1.5} />}
                        {slide.title.includes('Groq') && <Zap size={100} strokeWidth={1.5} />}
                        {slide.title.includes('Arena') && <Cpu size={100} strokeWidth={1.5} />}
                        {slide.title.includes('MCP') && <Search size={100} strokeWidth={1.5} />}
                     </div>
                 </div>
             )}
        </div>
      </div>
    </div>
  );
};