import React from 'react';

// Khối chứa 2 banner: Research Guidance và Publication Repository
const ResearchResources = () => {
    return (
        <section id="research-quick-links">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    {/* --- Banner 1: Guidance Link --- */}
                    <a href="#" className="resource-card group">
                        <div className="resource-card-glow"></div>
                        <div className="relative z-10 flex items-start gap-6">
                            <div className="resource-icon">
                                <i className="text-3xl text-brand-blue inline-flex">
                                    <svg className="w-8 h-8" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
                                    </svg>
                                </i>
                            </div>
                            <div>
                                <h3 className="text-2xl font-bold text-ui-text mb-2 group-hover:text-brand-blue transition-colors">
                                    Research Guidance
                                </h3>
                                <p className="text-ui-muted leading-relaxed mb-4">
                                    Access comprehensive resources, ethical guidelines, grant application support, and methodological frameworks for your research journey.
                                </p>
                                <span className="resource-link">
                                    Access Portal 
                                    <i className="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                                </span>
                            </div>
                        </div>
                    </a>

                    {/* --- Banner 2: Repository Link --- */}
                    <a href="#" className="resource-card group">
                        <div className="resource-card-glow"></div>
                        <div className="relative z-10 flex items-start gap-6">
                            <div className="resource-icon">
                                <i className="text-3xl text-brand-blue inline-flex">
                                    <svg className="w-8 h-8" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                        <path fill="currentColor" d="M0 96C0 43 43 0 96 0h96V190.7c0 13.4 15.5 20.9 26 12.5L272 160l54 43.2c10.5 8.4 26 .9 26-12.5V0h32 32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32z"></path>
                                    </svg>
                                </i>
                            </div>
                            <div>
                                <h3 className="text-2xl font-bold text-ui-text mb-2 group-hover:text-brand-blue transition-colors">
                                    Publication Repository
                                </h3>
                                <p className="text-ui-muted leading-relaxed mb-4">
                                    Browse, search, and request access to thousands of peer-reviewed papers, dissertations, and datasets produced by ULP scholars.
                                </p>
                                <span className="resource-link">
                                    Search Repository 
                                    <i className="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                                </span>
                            </div>
                        </div>
                    </a>

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

export default ResearchResources;