// Imported from investidor/resources/js/modules/news/sections/about/MissionVision.tsx; original content preserved.
import { useState, useEffect, useRef } from 'react';
import { Target, Eye } from 'lucide-react';
import { Trans } from './source-text';

interface MissionVisionItem {
    id: number;
    title: string;
    description: string;
    icon: React.ReactNode;
    gradient: string;
}

export const MissionVision = () => {
    const [hoveredId, setHoveredId] = useState<number | null>(null);
    const sectionRef = useRef<HTMLElement>(null);
    const [isInView, setIsInView] = useState<boolean>(false);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => setIsInView(entry.isIntersecting),
            { threshold: 0.1, rootMargin: '0px 0px -80px 0px' },
        );

        if (sectionRef.current) {
            observer.observe(sectionRef.current);
        }

        return () => observer.disconnect();
    }, []);

    const items: MissionVisionItem[] = [
        {
            id: 1,
            title: 'Missão',
            description:
                'Fornecer soluções integradas e inovadoras em comércio, comunicação, tecnologia e informação, com excelência na intermediação comercial, na informação pública e em plataformas digitais promovendo crescimento sustentável e impacto positivo no mercado moçambicano.',
            icon: <Target className="h-7 w-7 sm:h-8 sm:w-8" />,
            gradient: 'from-red-500 to-red-600',
        },
        {
            id: 2,
            title: 'Visão',
            description:
                'Ser a referência líder em Moçambique, impulsionando o progresso do país através de soluções inovadoras e sustentáveis, para um futuro mais conectado, próspero e dinâmico.',
            icon: <Eye className="h-7 w-7 sm:h-8 sm:w-8" />,
            gradient: 'from-red-600 to-red-800',
        },
    ];

    return (
        <section ref={sectionRef} className="relative overflow-hidden py-6">
            <div className="relative mx-auto max-w-7xl px-5 sm:px-6 lg:px-8">
                <div className="grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2 lg:gap-6">
                    {items.map((item, index) => (
                        <div
                            key={item.id}
                            onMouseEnter={() => setHoveredId(item.id)}
                            onMouseLeave={() => setHoveredId(null)}
                            className={`transition-all duration-1200 ease-in-out ${isInView ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-6 scale-95 opacity-0'} `}
                            style={{ transitionDelay: `${index * 200}ms` }}
                        >
                            <div
                                className={`relative h-full rounded-2xl border bg-white/5 backdrop-blur-lg transition-all duration-700 ease-in-out sm:rounded-3xl ${
                                    hoveredId === item.id
                                        ? '-translate-y-2 border-red-500/50 shadow-xl shadow-red-600/20 sm:-translate-y-3'
                                        : 'border-white/10 shadow-sm'
                                } `}
                            >
                                <div className="p-5 sm:p-6 lg:p-8">
                                    <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-6">
                                        <div
                                            className={`h-14 w-14 flex-shrink-0 rounded-xl bg-gradient-to-br sm:h-16 sm:w-16 sm:rounded-2xl ${item.gradient} flex items-center justify-center p-3 text-white shadow-lg transition-all duration-700 ease-in-out sm:p-3.5 ${
                                                hoveredId === item.id
                                                    ? 'scale-125 rotate-12 animate-pulse shadow-2xl'
                                                    : 'animate-float scale-100 rotate-0'
                                            } `}
                                        >
                                            {item.icon}
                                        </div>

                                        <div className="mt-3 min-w-0 flex-1 text-center sm:mt-0 sm:text-left">
                                            <h3
                                                className={`mb-2 text-2xl font-light tracking-tight transition-colors duration-500 sm:mb-3 sm:text-3xl lg:text-4xl ${hoveredId === item.id ? 'text-red-400' : 'text-red-500'} `}
                                            >
                                                <Trans>{item.title}</Trans>
                                            </h3>
                                            <p className="text-sm leading-relaxed font-light text-[#ffffff] sm:text-base lg:text-lg">
                                                <Trans>
                                                    {item.description}
                                                </Trans>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                {hoveredId === item.id && (
                                    <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl sm:rounded-3xl">
                                        <div className="animate-shimmer absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent" />
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <style>{`
        @keyframes shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(200%); }
        }
        .animate-shimmer { animation: shimmer 2.5s ease-in-out infinite; }
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        .animate-float { animation: float 3s ease-in-out infinite; }
      `}</style>
        </section>
    );
};

export default MissionVision;