import React from 'react';

// Khối chứa danh sách các lĩnh vực nghiên cứu.
const ResearchDomains = () => {
    return (
        <section id="research-domains">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
                
                {/* Tiêu đề Section */}
                <div className="text-center mb-16">
                    <h2 className="text-3xl lg:text-4xl font-bold text-ui-text mb-4">Research Domains</h2>
                    <p className="text-ui-muted max-w-2xl mx-auto">
                        Discover our core areas of expertise, where interdisciplinary teams tackle complex global challenges.
                    </p>
                </div>
                
                {/* Grid chứa các thẻ (Cards) */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    {/* Domain Card 1 (Nổi bật - Màu xanh) */}
                    <div className="folder-tab folder-tab-blue group">
                        {/* Hiệu ứng Glow */}
                        <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
                        
                        <div className="domain-icon-blue">
                            <i className="text-2xl text-white 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 640 512">
                                    <path fill="currentColor" d="M384 32H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H398.4c-5.2 25.8-22.9 47.1-46.4 57.3V448H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 128c-17.7 0-32-14.3-32-32s14.3-32 32-32H288V153.3c-23.5-10.3-41.2-31.6-46.4-57.3H128c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c14.6-19.4 37.8-32 64-32s49.4 12.6 64 32zm55.6 288H584.4L512 195.8 439.6 320zM512 416c-62.9 0-115.2-34-126-78.9c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C627.2 382 574.9 416 512 416zM126.8 195.8L54.4 320H199.3L126.8 195.8zM.9 337.1c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C242 382 189.7 416 126.8 416S11.7 382 .9 337.1z"></path>
                                </svg>
                            </i>
                        </div>
                        
                        <h3 className="text-2xl font-bold mb-4">Law & Policy</h3>
                        <p className="text-white/80 text-sm leading-relaxed mb-8 flex-grow">
                            Investigating the evolution of international law, human rights, and public policy in a rapidly changing geopolitical landscape.
                        </p>
                        
                        <div className="domain-card-footer">
                            <span className="domain-badge-glass">42 Centers</span>
                            <i className="text-white/70 group-hover:text-white group-hover:translate-x-1 transition-all inline-flex">
                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                    
                    {/* Domain Card 2 */}
                    <div className="folder-tab folder-tab-light group">
                        <div className="domain-icon-light">
                            <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="M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z"></path>
                                </svg>
                            </i>
                        </div>
                        
                        <h3 className="text-2xl font-bold mb-4">Cognitive Science</h3>
                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
                            Bridging psychology, neuroscience, and artificial intelligence to understand human cognition and behavior.
                        </p>
                        
                        <div className="domain-card-footer">
                            <span className="domain-badge-white">28 Centers</span>
                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                    
                    {/* Domain Card 3 */}
                    <div className="folder-tab folder-tab-light group">
                        <div className="domain-icon-light">
                            <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="M266.3 48.3L232.5 73.6c-5.4 4-8.5 10.4-8.5 17.1v9.1c0 6.8 5.5 12.3 12.3 12.3c2.4 0 4.8-.7 6.8-2.1l41.8-27.9c2-1.3 4.4-2.1 6.8-2.1h1c6.2 0 11.3 5.1 11.3 11.3c0 3-1.2 5.9-3.3 8l-19.9 19.9c-5.8 5.8-12.9 10.2-20.7 12.8l-26.5 8.8c-5.8 1.9-9.6 7.3-9.6 13.4c0 3.7-1.5 7.3-4.1 10l-17.9 17.9c-6.4 6.4-9.9 15-9.9 24v4.3c0 16.4 13.6 29.7 29.9 29.7c11 0 21.2-6.2 26.1-16l4-8.1c2.4-4.8 7.4-7.9 12.8-7.9c4.5 0 8.7 2.1 11.4 5.7l16.3 21.7c2.1 2.9 5.5 4.5 9.1 4.5c8.4 0 13.9-8.9 10.1-16.4l-1.1-2.3c-3.5-7 0-15.5 7.5-18l21.2-7.1c7.6-2.5 12.7-9.6 12.7-17.6c0-10.3 8.3-18.6 18.6-18.6H400c8.8 0 16 7.2 16 16s-7.2 16-16 16H379.3c-7.2 0-14.2 2.9-19.3 8l-4.7 4.7c-2.1 2.1-3.3 5-3.3 8c0 6.2 5.1 11.3 11.3 11.3h11.3c6 0 11.8 2.4 16 6.6l6.5 6.5c1.8 1.8 2.8 4.3 2.8 6.8s-1 5-2.8 6.8l-7.5 7.5C386 262 384 266.9 384 272s2 10 5.7 13.7L408 304c10.2 10.2 24.1 16 38.6 16H454c6.5-20.2 10-41.7 10-64c0-111.4-87.6-202.4-197.7-207.7zm172 307.9c-3.7-2.6-8.2-4.1-13-4.1c-6 0-11.8-2.4-16-6.6L396 332c-7.7-7.7-18-12-28.9-12c-9.7 0-19.2-3.5-26.6-9.8L314 287.4c-11.6-9.9-26.4-15.4-41.7-15.4H251.4c-12.6 0-25 3.7-35.5 10.7L188.5 301c-17.8 11.9-28.5 31.9-28.5 53.3v3.2c0 17 6.7 33.3 18.7 45.3l16 16c8.5 8.5 20 13.3 32 13.3H248c13.3 0 24 10.7 24 24c0 2.5 .4 5 1.1 7.3c71.3-5.8 132.5-47.6 165.2-107.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM187.3 100.7c-6.2-6.2-16.4-6.2-22.6 0l-32 32c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l32-32c6.2-6.2 6.2-16.4 0-22.6z"></path>
                                </svg>
                            </i>
                        </div>
                        
                        <h3 className="text-2xl font-bold mb-4">Environmental Studies</h3>
                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
                            Developing sustainable solutions for climate change, resource management, and ecological preservation.
                        </p>
                        
                        <div className="domain-card-footer">
                            <span className="domain-badge-white">35 Centers</span>
                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                    
                    {/* Domain Card 4 */}
                    <div className="folder-tab folder-tab-light group">
                        <div className="domain-icon-light">
                            <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="M248 0h16c13.3 0 24 10.7 24 24V34.7C368.4 48.1 431.9 111.6 445.3 192H448c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h2.7C80.1 111.6 143.6 48.1 224 34.7V24c0-13.3 10.7-24 24-24zM64 288h64V416h40V288h64V416h48V288h64V416h40V288h64V420.3c.6 .3 1.2 .7 1.7 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512H32c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1V288z"></path>
                                </svg>
                            </i>
                        </div>
                        
                        <h3 className="text-2xl font-bold mb-4">History & Humanities</h3>
                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
                            Preserving cultural heritage and analyzing historical contexts to inform contemporary societal debates.
                        </p>
                        
                        <div className="domain-card-footer">
                            <span className="domain-badge-white">50 Centers</span>
                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                    
                    {/* Domain Card 5 */}
                    <div className="folder-tab folder-tab-light group">
                        <div className="domain-icon-light">
                            <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="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5-12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"></path>
                                </svg>
                            </i>
                        </div>
                        
                        <h3 className="text-2xl font-bold mb-4">Economics</h3>
                        <p className="text-ui-muted text-sm leading-relaxed mb-8 flex-grow">
                            Analyzing global markets, behavioral economics, and policy impacts on socioeconomic development.
                        </p>
                        
                        <div className="domain-card-footer">
                            <span className="domain-badge-white">19 Centers</span>
                            <i className="text-ui-muted group-hover:text-brand-blue group-hover:translate-x-1 transition-all inline-flex">
                                <svg className="w-4 h-4" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                                </svg>
                            </i>
                        </div>
                    </div>
                    
                    {/* Domain Card 6 - CTA */}
                    <div className="domain-card-cta group">
                        <div className="domain-icon-cta">
                            <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 448 512">
                                    <path fill="currentColor" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"></path>
                                </svg>
                            </i>
                        </div>
                        <h3 className="text-xl font-bold mb-2">View All Domains</h3>
                        <p className="text-ui-muted text-sm">Explore our complete directory of 15+ research areas.</p>
                    </div>
                    
                </div>
            </div>
        </section>
    );
};

export default ResearchDomains;