'use client';

import React from 'react';
import { useRouter } from 'next/navigation';

const ResearchHero = () => {
    const router = useRouter();
    return (
        <section id="research-hero">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
                <div className="flex flex-col lg:flex-row gap-12 items-center">

                    {/* --- CỘT TRÁI --- */}
                    <div className="w-full lg:w-1/2 hero-left">

                        {/* Label: gạch ngang + "Research Hub" */}
                        <div className="hero-label">
                            <span className="hero-label-line"></span>
                            <span className="hero-label-text">Research Hub</span>
                        </div>

                        {/* Heading */}
                        <h1>
                            Pioneering <br />
                            <span>Discovery</span>
                        </h1>

                        {/* Description */}
                        <p className="hero-desc">
                            Explore our cutting-edge research domains, active projects, and interdisciplinary centers driving innovation in liberal arts and sciences.
                        </p>

                        {/* Buttons */}
                        <div className="hero-buttons">
                            <button className="r-btn-primary" onClick={() => router.push('/research/search')}>
                                Browse Projects <i className="fa-solid fa-arrow-right text-sm"></i>
                            </button>
                            <button className="r-btn-outline">
                                View Publications
                            </button>
                        </div>
                    </div>

                    {/* --- CỘT PHẢI: Visual composition --- */}
                    <div className="w-full lg:w-1/2 relative">
                        <div className="relative w-full aspect-square max-w-[600px] mx-auto">

                            {/* Glow nền */}
                            <div className="absolute inset-0 bg-brand-light rounded-full blur-3xl opacity-50"></div>

                            {/* Main image card */}
                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-white rounded-[32px] border border-ui-border shadow-2xl overflow-hidden z-10">
                                <img
                                    className="w-full h-full object-cover"
                                    src="https://storage.googleapis.com/uxpilot-auth.appspot.com/11d578de27-837b09c2ea77020bcb48.png"
                                    alt="Research laboratory"
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                                <div className="absolute bottom-0 left-0 p-6 w-full text-white">
                                    <div className="flex items-center gap-2 mb-2">
                                        <span className="px-3 py-1 text-white text-xs font-bold rounded-full" style={{ backgroundColor: 'var(--r-accent)' }}>
                                            Featured
                                        </span>
                                    </div>
                                    <h3 className="text-xl font-bold mb-1" style={{ fontFamily: 'Inter, sans-serif' }}>Cognitive Sciences Lab</h3>
                                    <p className="text-sm opacity-90" style={{ fontFamily: 'Inter, sans-serif' }}>Exploring the intersection of AI and human psychology.</p>
                                </div>
                            </div>

                            {/* Floating stat card 1 — Publications */}
                            <div className="r-stat-card" style={{ top: '10%', right: '5%' }}>
                                <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--r-blue-light)', color: 'var(--r-blue)' }}>
                                    <i className="fa-solid fa-book-open text-xl"></i>
                                </div>
                                <div>
                                    <p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>12k+</p>
                                    <p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Publications</p>
                                </div>
                            </div>

                            {/* Floating stat card 2 — Active Projects */}
                            <div className="r-stat-card" style={{ bottom: '15%', left: '0%' }}>
                                <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#f0fdf4', color: '#16a34a' }}>
                                    <i className="fa-solid fa-flask text-xl"></i>
                                </div>
                                <div>
                                    <p className="text-2xl font-bold" style={{ color: 'var(--r-text)', fontFamily: 'Inter, sans-serif' }}>340</p>
                                    <p className="text-xs font-medium" style={{ color: 'var(--r-muted)', fontFamily: 'Inter, sans-serif' }}>Active Projects</p>
                                </div>
                            </div>

                        </div>
                    </div>

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

export default ResearchHero;