import React from 'react';

// Khối chứa 2 cột: Active Projects Feed và Funding Calls
const ProjectsAndCenters = () => {
    return (
        <section id="projects-centers">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
                    
                    {/* --- CỘT TRÁI (7/12): ACTIVE PROJECTS LIST --- */}
                    <div className="lg:col-span-7">
                        <div className="flex items-center justify-between mb-8">
                            <h2 className="text-2xl font-bold text-ui-text">Active Projects Feed</h2>
                            <a href="#" className="text-sm font-medium text-brand-accent hover:text-brand-blue transition-colors">
                                View All Projects
                            </a>
                        </div>
                        
                        <div className="space-y-4">
                            
                            {/* Project Item 1 */}
                            <div className="project-card">
                                <div className="project-icon project-icon-blue">
                                    <i className="text-2xl text-brand-blue inline-flex">
                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path fill="currentColor" d="M160 32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32zM32 448H320c70.7 0 128-57.3 128-128s-57.3-128-128-128V128c106 0 192 86 192 192c0 49.2-18.5 94-48.9 128H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 32c-17.7 0-32-14.3-32-32s14.3-32 32-32zm80-64H304c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"></path>
                                        </svg>
                                    </i>
                                </div>
                                <div className="flex-grow">
                                    <div className="flex flex-wrap items-center gap-2 mb-2">
                                        <span className="badge badge-active">Active</span>
                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
                                            <i className="inline-flex">
                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
                                                </svg>
                                            </i> 
                                            Updated 2d ago
                                        </span>
                                    </div>
                                    <h4 className="text-lg font-bold text-ui-text mb-1">Urban Microclimate Modeling</h4>
                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
                                        Developing high-resolution predictive models for heat island effects in European metropolitan areas using machine learning.
                                    </p>
                                    
                                    <div className="flex items-center justify-between">
                                        <div className="flex -space-x-2">
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="Researcher" title="Dr. Alan Turing" />
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="Researcher" title="Dr. Marie Curie" />
                                            <div className="w-8 h-8 rounded-full border-2 border-white bg-ui-bg flex items-center justify-center text-[10px] font-bold text-ui-muted">+3</div>
                                        </div>
                                        <div className="w-32">
                                            <div className="flex justify-between text-xs mb-1">
                                                <span className="text-ui-muted">Progress</span>
                                                <span className="font-medium">65%</span>
                                            </div>
                                            <div className="progress-bar-track">
                                                <div className="progress-bar-fill progress-fill-blue" style={{ width: '65%' }}></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Project Item 2 */}
                            <div className="project-card">
                                <div className="project-icon project-icon-purple">
                                    <i className="text-2xl text-purple-600 inline-flex">
                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path fill="currentColor" d="M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5-12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z"></path>
                                        </svg>
                                    </i>
                                </div>
                                <div className="flex-grow">
                                    <div className="flex flex-wrap items-center gap-2 mb-2">
                                        <span className="badge badge-collection">Data Collection</span>
                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
                                            <i className="inline-flex">
                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
                                                </svg>
                                            </i> 
                                            Updated 1w ago
                                        </span>
                                    </div>
                                    <h4 className="text-lg font-bold text-ui-text mb-1">Digital Rights in the EU Framework</h4>
                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
                                        A comparative analysis of member state implementation of digital privacy directives and their impact on civil liberties.
                                    </p>
                                    
                                    <div className="flex items-center justify-between">
                                        <div className="flex -space-x-2">
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg" alt="Researcher" />
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-7.jpg" alt="Researcher" />
                                        </div>
                                        <div className="w-32">
                                            <div className="flex justify-between text-xs mb-1">
                                                <span className="text-ui-muted">Progress</span>
                                                <span className="font-medium">30%</span>
                                            </div>
                                            <div className="progress-bar-track">
                                                <div className="progress-bar-fill progress-fill-accent" style={{ width: '30%' }}></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {/* Project Item 3 */}
                            <div className="project-card">
                                <div className="project-icon project-icon-orange">
                                    <i className="text-2xl text-orange-600 inline-flex">
                                        <svg className="w-6 h-6" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path fill="currentColor" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z"></path>
                                        </svg>
                                    </i>
                                </div>
                                <div className="flex-grow">
                                    <div className="flex flex-wrap items-center gap-2 mb-2">
                                        <span className="badge badge-review">Review</span>
                                        <span className="text-xs text-ui-muted font-medium inline-flex items-center gap-1">
                                            <i className="inline-flex">
                                                <svg className="w-3 h-3" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                    <path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"></path>
                                                </svg>
                                            </i> 
                                            Updated 3w ago
                                        </span>
                                    </div>
                                    <h4 className="text-lg font-bold text-ui-text mb-1">Behavioral Impacts of Universal Basic Income</h4>
                                    <p className="text-sm text-ui-muted line-clamp-2 mb-3">
                                        Longitudinal study tracking spending habits and employment outcomes in selected pilot regions across France.
                                    </p>
                                    
                                    <div className="flex items-center justify-between">
                                        <div className="flex -space-x-2">
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-8.jpg" alt="Researcher" />
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-9.jpg" alt="Researcher" />
                                            <img className="w-8 h-8 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Researcher" />
                                        </div>
                                        <div className="w-32">
                                            <div className="flex justify-between text-xs mb-1">
                                                <span className="text-ui-muted">Progress</span>
                                                <span className="font-medium">90%</span>
                                            </div>
                                            <div className="progress-bar-track">
                                                <div className="progress-bar-fill progress-fill-blue" style={{ width: '90%' }}></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* --- CỘT PHẢI (5/12): FUNDING CALLS --- */}
                    <div className="lg:col-span-5">
                        <div className="flex items-center justify-between mb-8">
                            <h2 className="text-2xl font-bold text-ui-text">Funding Calls</h2>
                        </div>

                        <div className="funding-card">
                            <div className="space-y-4 flex-grow">

                                {/* Item 1 */}
                                <div className="funding-item">
                                    <span className="funding-label-urgent">Closing Soon</span>
                                    <h4>EU Horizon 2025: Sustainable Tech</h4>
                                    <div className="funding-meta">
                                        <span className="funding-due">
                                            <i className="fa-regular fa-calendar"></i> Due Nov 15
                                        </span>
                                        <a href="#" className="funding-link">
                                            Details <i className="fa-solid fa-arrow-right" style={{fontSize:'0.625rem'}}></i>
                                        </a>
                                    </div>
                                </div>

                                {/* Item 2 */}
                                <div className="funding-item">
                                    <span className="funding-label-internal">Internal Grant</span>
                                    <h4>Seed Funding for AI Ethics</h4>
                                    <div className="funding-meta">
                                        <span className="funding-due">
                                            <i className="fa-regular fa-calendar"></i> Due Dec 01
                                        </span>
                                        <a href="#" className="funding-link">
                                            Details <i className="fa-solid fa-arrow-right" style={{fontSize:'0.625rem'}}></i>
                                        </a>
                                    </div>
                                </div>

                            </div>

                            <button className="funding-view-all">
                                View All Opportunities
                            </button>
                        </div>
                    </div>

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

export default ProjectsAndCenters;