import React, { useState } from 'react';
import { motion } from 'framer-motion';
const CMMCControlsAnimated = () => {
const [hoveredDomain, setHoveredDomain] = useState(null);
const domains = [
{ id: 'AC', name: 'Access Control', total: 54, fastTrack: 32, shared: 14, customer: 8 },
{ id: 'AT', name: 'Awareness & Training', total: 11, fastTrack: 7, shared: 3, customer: 1 },
{ id: 'AU', name: 'Audit & Accountability', total: 19, fastTrack: 11, shared: 6, customer: 2 },
{ id: 'CM', name: 'Configuration Management', total: 33, fastTrack: 20, shared: 10, customer: 3 },
{ id: 'IA', name: 'Identification & Authentication', total: 27, fastTrack: 16, shared: 8, customer: 3 },
{ id: 'IR', name: 'Incident Response', total: 11, fastTrack: 7, shared: 3, customer: 1 },
{ id: 'MA', name: 'Maintenance', total: 18, fastTrack: 11, shared: 5, customer: 2 },
{ id: 'MP', name: 'Media Protection', total: 23, fastTrack: 14, shared: 7, customer: 2 },
{ id: 'PS', name: 'Personnel Security', total: 8, fastTrack: 5, shared: 2, customer: 1 },
{ id: 'PP', name: 'Physical Protection', total: 14, fastTrack: 8, shared: 4, customer: 2 },
{ id: 'RA', name: 'Risk Assessment', total: 9, fastTrack: 5, shared: 3, customer: 1 },
{ id: 'SA', name: 'Security Assessment', total: 13, fastTrack: 8, shared: 4, customer: 1 },
{ id: 'SC', name: 'Systems & Communications', total: 42, fastTrack: 25, shared: 12, customer: 5 },
{ id: 'SI', name: 'Systems & Information', total: 31, fastTrack: 19, shared: 9, customer: 3 }
];
return (
{/* Summary Section - Horizontal Layout */}
65
FastTrack Managed
59.1% of controls
35
Shared
31.8% of controls
10
Customer Managed
9.1% of controls
{/* Domains Grid */}
{domains.map((domain, index) => (
setHoveredDomain(domain.id)}
onMouseLeave={() => setHoveredDomain(null)}
>
{domain.id}
({domain.total})
{domain.name}
{/* Progress bars */}
{/* Hover details */}
{hoveredDomain === domain.id && (
FastTrack Managed: {domain.fastTrack}
Shared: {domain.shared}
Customer Managed: {domain.customer}
)}
))}
);
};
export default CMMCControlsAnimated;