
import React from 'react';
import { LegalIcon } from './icons/LegalIcon';
import { BrandIcon } from './icons/BrandIcon';
import { CopyIcon } from './icons/CopyIcon';
import { ChannelIcon } from './icons/ChannelIcon';
import { LeadAgentIcon } from './icons/LeadAgentIcon';

interface CheckDetail {
    name: string;
    icon: React.ReactNode;
    role: string;
    description: string;
}

const specialistAgents: CheckDetail[] = [
    {
        name: 'Legal Agent',
        icon: <LegalIcon />,
        role: 'Standards & Disclaimers',
        description: 'Ensures compliance with all regulatory requirements.'
    },
    {
        name: 'Brand Agent',
        icon: <BrandIcon />,
        role: 'Visual Identity',
        description: 'Verifies logo usage, color palette, and visual identity.'
    },
    {
        name: 'Tone Agent',
        icon: <CopyIcon />,
        role: 'Voice & Clarity',
        description: 'Analyzes copy for clarity, brand voice, and tone consistency.'
    },
    {
        name: 'Channel Agent',
        icon: <ChannelIcon />,
        role: 'Platform Specs',
        description: 'Checks assets against platform-specific technical specifications.'
    }
];

export const ChecksOverview: React.FC = () => {
    return (
        <div className="relative bg-gradient-to-br from-emerald-50 via-white to-emerald-50/30 py-12 sm:py-16 w-full">
            {/* Decorative Background */}
            <div className="absolute inset-0 pointer-events-none">
                 <div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-emerald-200/30 rounded-full blur-3xl -translate-y-1/2 mix-blend-multiply"></div>
                 <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-green-200/30 rounded-full blur-3xl translate-y-1/3 mix-blend-multiply"></div>
            </div>

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                {/* Header */}
                <div className="max-w-3xl mx-auto text-center mb-12">
                    <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-white border border-emerald-200 text-emerald-700 text-xs font-bold uppercase tracking-widest mb-4 shadow-sm">
                        <span className="w-2 h-2 rounded-full bg-emerald-500 mr-2 animate-pulse"></span>
                        Intelligent Workflow
                    </div>
                    <h2 className="text-3xl md:text-4xl font-extrabold text-brand-dark-blue tracking-tight mb-4">
                        Orchestrated by AI
                    </h2>
                    <p className="text-lg text-slate-600 leading-relaxed">
                        A central Lead Agent coordinates specialized experts to review every aspect of your content in parallel.
                    </p>
                </div>

                <div className="flex flex-col lg:flex-row items-center justify-center lg:items-stretch gap-0 lg:gap-0">
                    
                    {/* 1. LEAD AGENT CARD (Left) */}
                    <div className="w-full max-w-md lg:w-[380px] relative z-20 group/lead flex flex-col">
                        <div className="flex-1 relative bg-[#001f5a] rounded-3xl p-6 shadow-2xl shadow-blue-900/20 border border-white/10 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-blue-900/40 overflow-hidden flex flex-col items-center justify-center">
                            {/* Animated Gradient bg */}
                            <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-white/5 to-transparent rotate-45 transition-transform duration-[3s] group-hover/lead:translate-y-10"></div>
                            
                            <div className="relative z-10">
                                <div className="h-20 w-20 mx-auto rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md flex items-center justify-center mb-4 shadow-lg shadow-brand-dark-blue/30 group-hover/lead:scale-110 transition-all duration-500">
                                    <LeadAgentIcon className="h-10 w-10 text-white" />
                                </div>
                                
                                <h3 className="text-2xl font-bold text-white mb-2">Lead Agent</h3>
                                <p className="text-brand-light-blue font-bold text-xs uppercase tracking-widest mb-4">Orchestrator</p>
                                <p className="text-slate-300 text-sm leading-relaxed">
                                    Synthesizes feedback & coordinates analysis across all specialist agents.
                                </p>
                            </div>
                        </div>

                        {/* Connection Node (Desktop) */}
                         <div className="hidden lg:flex absolute top-1/2 -right-4 w-8 h-8 bg-[#001f5a] rounded-full border-4 border-emerald-50 items-center justify-center z-30 -translate-y-1/2 shadow-sm translate-x-1/2">
                             <div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
                        </div>
                         {/* Connection Node (Mobile) */}
                        <div className="lg:hidden absolute -bottom-4 left-1/2 w-8 h-8 bg-[#001f5a] rounded-full border-4 border-emerald-50 items-center justify-center z-30 -translate-x-1/2 shadow-sm">
                             <div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
                        </div>
                    </div>

                    {/* 2. CONNECTOR LINES (Desktop SVG) */}
                    <div className="hidden lg:block w-24 relative z-10 self-center h-48">
                         <svg className="absolute inset-0 w-full h-full overflow-visible" viewBox="0 0 100 200" preserveAspectRatio="none">
                            {/* Connecting paths */}
                            <path d="M0,100 C50,100 50,30 100,30" fill="none" stroke="#6ee7b7" strokeWidth="2" strokeDasharray="6 6" />
                            <path d="M0,100 C50,100 50,170 100,170" fill="none" stroke="#6ee7b7" strokeWidth="2" strokeDasharray="6 6" />
                            
                            {/* Animated pulses on paths */}
                            <circle r="3" fill="#10b981">
                                <animateMotion dur="2s" repeatCount="indefinite" path="M0,100 C50,100 50,30 100,30" />
                            </circle>
                            <circle r="3" fill="#10b981">
                                <animateMotion dur="2s" repeatCount="indefinite" begin="1s" path="M0,100 C50,100 50,170 100,170" />
                            </circle>
                        </svg>
                    </div>
                    
                    {/* Mobile Connector Spacer */}
                    <div className="lg:hidden h-8 w-0.5 bg-emerald-300 my-3"></div>

                    {/* 3. SPECIALIST AGENTS (Right) */}
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-4xl pl-0 lg:pl-4">
                        {specialistAgents.map((agent, index) => (
                            <div 
                                key={agent.name} 
                                className="group relative rounded-2xl p-5 border border-emerald-100 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-emerald-900/5 hover:-translate-y-2 hover:border-emerald-200 overflow-hidden bg-white"
                            >
                                {/* Base Gradient */}
                                <div className="absolute inset-0 bg-gradient-to-br from-white via-white to-emerald-50/30 opacity-100 transition-opacity duration-500 group-hover:opacity-0"></div>

                                {/* Hover Gradient - Interactive Green */}
                                <div className="absolute inset-0 bg-gradient-to-br from-white via-emerald-50 to-emerald-100/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                
                                {/* Animated Shine/Sweep Effect */}
                                <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-emerald-500/5 to-transparent rotate-45 translate-y-12 transition-transform duration-1000 group-hover:translate-y-[-10%] pointer-events-none"></div>

                                {/* Glassy Highlight */}
                                <div className="absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br from-emerald-400/10 to-transparent rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                                
                                <div className="relative z-10 flex items-start gap-4">
                                    <div className={`flex-shrink-0 w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:shadow-md bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white`}>
                                        {React.cloneElement(agent.icon as React.ReactElement, { className: "h-6 w-6 transition-colors duration-300" })}
                                    </div>
                                    
                                    <div className="flex-1">
                                        <h4 className="text-base font-bold text-slate-800 group-hover:text-emerald-900 transition-colors duration-300 mb-0.5">
                                            {agent.name}
                                        </h4>
                                        <p className="text-[10px] font-extrabold text-slate-400 uppercase tracking-wider mb-1 group-hover:text-emerald-600 transition-colors duration-300">
                                            {agent.role}
                                        </p>
                                        <p className="text-xs text-slate-600 leading-relaxed group-hover:text-slate-700">
                                            {agent.description}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                </div>
            </div>
        </div>
    );
};
