modcomms/frontend/components/ChecksOverview.tsx

import React from 'react';
import { LegalIcon } from './icons/LegalIcon';
import { BrandIcon } from './icons/BrandIcon';
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, colour palette, and visual identity.'
    },
    {
        name: 'Channel Best Practices Agent',
        icon: <ChannelIcon />,
        role: 'Creative Strategy',
        description: 'Analyses content strategy, engagement, and platform optimisation.'
    },
    {
        name: 'Channel Tech Specs Agent',
        icon: <ChannelIcon />,
        role: 'Technical Specs',
        description: 'Checks proofs against platform-specific technical specifications.'
    }
];

export const ChecksOverview: React.FC = () => {
    return (
        <div className="relative bg-white py-12 sm:py-16 w-full">

            <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-lime text-primary-blue text-xs font-bold uppercase tracking-widest mb-4 shadow-sm">
                        <span className="w-2 h-2 rounded-full bg-success mr-2 animate-pulse"></span>
                        Intelligent Workflow
                    </div>
                    <h2 className="text-3xl md:text-4xl font-semibold text-primary-blue tracking-tight mb-4">
                        Orchestrated by AI
                    </h2>
                    <p className="text-lg text-black-title 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-primary-blue rounded-[20px] p-6 shadow-2xl shadow-primary-blue/20 border border-white/10 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-primary-blue/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-primary-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-cyan-brand font-bold text-xs uppercase tracking-widest mb-4">Orchestrator</p>
                                <p className="text-slate-300 text-sm leading-relaxed">
                                    Synthesises 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-primary-blue rounded-full border-4 border-lime/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-success rounded-full animate-pulse"></div>
                        </div>
                         {/* Connection Node (Mobile) */}
                        <div className="lg:hidden absolute -bottom-4 left-1/2 w-8 h-8 bg-primary-blue rounded-full border-4 border-lime/50 items-center justify-center z-30 -translate-x-1/2 shadow-sm">
                             <div className="w-2.5 h-2.5 bg-success 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="#C3FB5A" strokeWidth="2" strokeDasharray="6 6" />
                            <path d="M0,100 C50,100 50,170 100,170" fill="none" stroke="#C3FB5A" strokeWidth="2" strokeDasharray="6 6" />

                            {/* Animated pulses on paths */}
                            <circle r="3" fill="#09821F">
                                <animateMotion dur="2s" repeatCount="indefinite" path="M0,100 C50,100 50,30 100,30" />
                            </circle>
                            <circle r="3" fill="#09821F">
                                <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-lime 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-[10px] p-5 border border-grey-300 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-success/10 hover:-translate-y-2 hover:border-success overflow-hidden bg-white"
                            >
                                {/* Base Gradient */}
                                <div className="absolute inset-0 bg-gradient-to-br from-white via-white to-lime/10 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-success-light to-lime/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-success/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-lime/30 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-[10px] flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:shadow-md bg-success-light text-success group-hover:bg-success 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-black-title group-hover:text-primary-blue transition-colors duration-300 mb-0.5">
                                            {agent.name}
                                        </h4>
                                        <p className="text-[10px] font-extrabold text-grey-700 uppercase tracking-wider mb-1 group-hover:text-success transition-colors duration-300">
                                            {agent.role}
                                        </p>
                                        <p className="text-xs text-black-title leading-relaxed group-hover:text-black-title">
                                            {agent.description}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

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