import React, { useState } from 'react';
import bannerBg from '../../img/homepageactuality.png';

const CATEGORIES = ['Tout', 'Actualités', 'Publications', 'Évènements', 'Projets'];

const NEWS_ITEMS = [
    { id: 1, tag: 'En ce moment' },
    { id: 2, tag: 'En ce moment' },
    { id: 3, tag: 'En ce moment' },
    { id: 4, tag: 'En ce moment' },
];

export default function ActualitySection() {
    const [activeCategory, setActiveCategory] = useState('Tout');
    const [email, setEmail] = useState('');

    const handleSubmitNewsletter = (e) => {
        e.preventDefault();
        if (email) {
            alert(`Inscription enregistrée pour : ${email}`);
            setEmail('');
        }
    };

    return (
        <section className="w-full bg-white">
            {/* 1. BANNIÈRE SUPÉRIEURE PLEINE LARGEUR */}
            <div
                className="relative w-full min-h-[460px] lg:min-h-[500px] bg-cover bg-right bg-no-repeat flex items-center overflow-hidden"
                style={{ backgroundImage: `url("${bannerBg}")` }}
            >
                {/* Dégradé Figma : Blanc pur à gauche avec transition douce vers le paysage */}
                <div
                    className="absolute inset-0 pointer-events-none"
                    style={{
                        background:
                            'linear-gradient(90deg, #ffffff 0%, #ffffff 38%, rgba(255,255,255,0.85) 48%, rgba(255,255,255,0) 68%)',
                    }}
                />

                <div className="relative z-10 max-w-[1440px] w-full mx-auto px-6 sm:px-12 lg:px-16 py-12 flex flex-col lg:flex-row lg:items-center justify-between gap-10">
                    {/* Bloc Texte & CTA Gauche */}
                    <div className="max-w-md lg:max-w-lg shrink-0">
                        <span className="text-[0.72rem] font-bold tracking-[0.2em] text-[#8c8f3e] uppercase block mb-3">
                            ACTUALITÉ
                        </span>
                        <h2 className="text-3xl sm:text-4xl lg:text-[2.65rem] font-extrabold text-[#0b1320] leading-[1.18] tracking-tight mb-4">
                            Restez informé, <br />
                            Inspirer le changement
                        </h2>
                        <p className="text-xs sm:text-sm text-slate-500 mb-6 max-w-sm leading-relaxed">
                            Découvrez nos dernières actualités, publications, événements et initiatives sur le terrain
                        </p>
                        <a
                            href="#actualites"
                            className="inline-block bg-[#798334] hover:bg-[#656d2b] text-white text-xs sm:text-sm font-semibold px-6 py-2.5 rounded-full transition-colors shadow-sm"
                        >
                            Voir toute les actualité
                        </a>
                    </div>

                    {/* Carte Blanche Flottante "En ce moment" */}
                    <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-[0_12px_36px_rgba(0,0,0,0.1)] border border-slate-100/60 w-full lg:max-w-[460px] h-[210px] sm:h-[230px] flex flex-col justify-between shrink-0">
                        <span className="text-xs font-semibold text-[#8c8f3e]">
                            En ce moment
                        </span>
                        <div className="text-slate-300 text-xs italic">
                            {/* Espace prévu pour le résumé de l'article à la une */}
                        </div>
                        <div className="h-2 w-14 bg-[#edf0db] rounded-full"></div>
                    </div>
                </div>
            </div>

            {/* 2. ONGLETS DE FILTRES + GRILLE D'ACTUALITÉS */}
            <div className="max-w-[1440px] mx-auto px-6 sm:px-12 lg:px-16 pt-10 pb-16">
                {/* Menu épuré avec soulignement */}
                <nav className="flex items-center gap-8 sm:gap-12 mb-10 overflow-x-auto no-scrollbar">
                    {CATEGORIES.map((cat) => {
                        const isActive = activeCategory === cat;
                        return (
                            <button
                                key={cat}
                                type="button"
                                onClick={() => setActiveCategory(cat)}
                                className={`text-sm tracking-tight transition-colors pb-1.5 relative whitespace-nowrap bg-transparent border-none cursor-pointer p-0 ${isActive
                                        ? 'text-slate-900 font-bold'
                                        : 'text-slate-600 hover:text-slate-900 font-medium'
                                    }`}
                            >
                                {cat}
                                {isActive && (
                                    <span className="absolute bottom-0 left-0 w-full h-[2px] bg-slate-900 rounded-full" />
                                )}
                            </button>
                        );
                    })}
                </nav>

                {/* Grille des 4 cartes d'articles */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
                    {NEWS_ITEMS.map((item) => (
                        <div
                            key={item.id}
                            className="bg-[#edf0db] rounded-2xl h-[300px] p-6 flex flex-col justify-between border border-[#e2e6cb] hover:shadow-md transition-shadow cursor-pointer"
                        >
                            <span className="text-xs font-semibold text-[#798334]">
                                {item.tag}
                            </span>
                            <div className="space-y-2.5">
                                <div className="h-3 w-4/5 bg-white/80 rounded-full"></div>
                                <div className="h-3 w-3/5 bg-white/80 rounded-full"></div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* 3. BANDEAU NEWSLETTER AUX COULEURS DE FIGMA */}
                <div className="bg-[#C3A569] rounded-2xl p-6 sm:p-10 flex flex-col lg:flex-row items-center justify-between gap-6 shadow-sm">
                    {/* Icône enveloppe + Textes */}
                    <div className="flex items-center gap-6 max-w-xl">
                        {/* Cercle d'arrière-plan #D9D9D9 */}
                        <div className="w-16 h-16 rounded-full bg-[#D9D9D9] flex items-center justify-center shrink-0 shadow-inner">
                            {/* Icône violette #6568B9 */}
                            <svg
                                className="w-8 h-8 text-[#6568B9]"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="1.9"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                viewBox="0 0 24 24"
                            >
                                <rect x="3" y="5" width="18" height="14" rx="2" />
                                <polyline points="3 7 12 13 21 7" />
                            </svg>
                        </div>

                        <div>
                            <h3 className="text-lg sm:text-xl font-bold text-white leading-tight">
                                Ne manquez rien de nos actualités
                            </h3>
                            <p className="text-xs sm:text-sm text-white/90 mt-1 leading-relaxed">
                                Abonnez-vous à notre Newsletter pour recevoir nos dernières nouvelles et publications.
                            </p>
                        </div>
                    </div>

                    {/* Formulaire d'inscription */}
                    <form onSubmit={handleSubmitNewsletter} className="w-full lg:w-auto flex-1 max-w-md">
                        <div className="relative flex items-center">
                            <input
                                type="email"
                                required
                                placeholder="Votre adresse e-mail"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                className="w-full bg-white/20 text-white placeholder-white/80 border border-white/50 rounded-full px-5 py-3 text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-white pr-32"
                            />
                            <button
                                type="submit"
                                className="absolute right-1.5 bg-[#8c8f3e] hover:bg-[#737630] text-white text-xs font-semibold px-5 py-2 rounded-full transition-colors shadow-sm"
                            >
                                S'abonner
                            </button>
                        </div>
                        <span className="text-[0.68rem] text-white/80 block mt-2 ml-4">
                            Nous respectons votre vie privée. Désinscription possible à tout moment.
                        </span>
                    </form>
                </div>
            </div>
        </section>
    );
}