// Imported from investidor/resources/js/modules/news/sections/about/CompanyValues.tsx; original content preserved.
import { useState, useEffect, useRef } from 'react';
import { Users, Lightbulb, Globe, ChevronDown, ChevronUp } from 'lucide-react';
import { Trans } from './source-text';

const img01 = '/assets/imgs/img01.jpg';
const img02 = '/assets/imgs/img02.jpg';
const img03 = '/assets/imgs/img03.jpg';
const img04 = '/assets/imgs/img04.jpg';

interface CompanyValue {
    id: number;
    title: string;
    description: string;
    image?: string;
    icon?: React.ReactNode;
    color?: string;
    label?: string;
}

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

    useEffect(() => {
        const handleScroll = () => {
            if (sectionRef.current) {
                const rect = sectionRef.current.getBoundingClientRect();
                setIsInView(
                    rect.top < window.innerHeight * 0.8 && rect.bottom > 100,
                );
            }
        };

        window.addEventListener('scroll', handleScroll);
        handleScroll();

        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    const values: CompanyValue[] = [
        {
            id: 1,
            title: 'Diversidade & Inclusão',
            description:
                'Representando todas as vozes e realidades de Moçambique',
            image: img01,
            icon: <Users className="h-6 w-6" />,
            color: 'from-red-500 to-orange-500',
            label: 'Valor Central',
        },
        {
            id: 2,
            title: 'Inovação',
            description:
                'Soluções tecnológicas e sustentáveis que impulsionam o desenvolvimento',
            image: img02,
            icon: <Lightbulb className="h-6 w-6" />,
            color: 'from-red-600 to-red-700',
            label: 'Essencial',
        },
        {
            id: 3,
            title: 'Excelência',
            description:
                'Acreditamos que cada história merece ser contada com propósito. Combinamos visão criativa e conhecimento estratégico para dar vida às ideias.',
            image: img03,
            label: 'Somos mais que comunicação, somos transformação',
        },
        {
            id: 4,
            title: 'Impacto Positivo',
            description:
                'Criamos marcas que inspiram, conteúdo que conecta e experiências memoráveis. Transformamos visão em realidade com estratégia, criatividade e tecnologia.',
            image: img04,
            icon: <Globe className="h-6 w-6" />,
            color: 'from-red-600 to-red-700',
            label: 'Propósito',
        },
    ];

    const toggleExpand = (id: number) => {
        setExpandedId(expandedId === id ? null : id);
    };

    return (
        <section
            ref={sectionRef}
            className="bg-primary relative overflow-hidden py-4"
        >
            <div className="mx-auto mb-4 max-w-7xl space-y-2 px-6 text-center">
                <div
                    className={`transition-all duration-1000 ${isInView ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}
                >
                    <h2 className="text-3xl font-semibold tracking-wide text-white md:text-3xl">
                        <span
                            className="font-bold italic not-italic"
                            style={{ color: '#FFFFFF' }}
                        >
                            <Trans>Valores</Trans>
                        </span>
                    </h2>
                </div>
            </div>

            <div className="mx-auto max-w-7xl px-6">
                <div className="grid grid-cols-1 items-stretch gap-4 md:grid-cols-2 lg:grid-cols-4">
                    {values.map((value, i) => {
                        const isExpanded = expandedId === value.id;
                        const hasLongText = value.id === 3 || value.id === 4;

                        return (
                            <div
                                key={value.id}
                                onMouseEnter={() => setHoveredId(value.id)}
                                onMouseLeave={() => setHoveredId(null)}
                                className={`group relative transition-all duration-500 ${isInView ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
                                style={{ transitionDelay: `${i * 100}ms` }}
                            >
                                <div
                                    className={`relative flex h-full flex-col overflow-hidden rounded-2xl border bg-white/5 backdrop-blur-xl transition-all duration-500 ${
                                        hoveredId === value.id
                                            ? 'translate-y-[-6px] border-red-500/40 shadow-2xl shadow-red-600/20'
                                            : 'border-white/10'
                                    }`}
                                >
                                    <div className="relative flex h-44 flex-1 flex-col overflow-hidden">
                                        <img
                                            src={value.image}
                                            alt={value.title}
                                            className={`h-full w-full object-cover transition-transform duration-700 ${
                                                hoveredId === value.id
                                                    ? 'scale-110'
                                                    : 'scale-100'
                                            }`}
                                        />
                                        <div className="absolute inset-0 bg-black/40" />

                                        {value.icon && value.color && (
                                            <div
                                                className={`absolute top-4 left-4 h-11 w-11 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white shadow-lg transition-transform duration-500 ${
                                                    hoveredId === value.id
                                                        ? 'scale-110 rotate-12'
                                                        : ''
                                                }`}
                                            >
                                                {value.icon}
                                            </div>
                                        )}

                                        {value.label && (
                                            <div className="absolute top-4 right-5 px-3 py-1 text-lg font-bold text-white drop-shadow-md md:text-xl">
                                                <Trans>{value.label}</Trans>
                                            </div>
                                        )}
                                    </div>

                                    <div className="flex flex-col bg-gradient-to-t from-black/60 via-black/30 to-transparent p-5">
                                        <h3 className="mb-2 text-2xl font-bold text-white drop-shadow-md md:text-3xl">
                                            <Trans>{value.title}</Trans>
                                        </h3>
                                        <p
                                            className={`text-sm leading-relaxed text-gray-100 drop-shadow-md md:text-base ${
                                                !isExpanded && hasLongText
                                                    ? 'line-clamp-2'
                                                    : ''
                                            }`}
                                        >
                                            <Trans>{value.description}</Trans>
                                        </p>
                                        {hasLongText && (
                                            <button
                                                onClick={() =>
                                                    toggleExpand(value.id)
                                                }
                                                className="mt-1 flex items-center gap-1 text-sm font-medium text-red-400 transition-colors hover:text-red-300"
                                            >
                                                {isExpanded ? (
                                                    <>
                                                        <Trans>Ver menos</Trans>{' '}
                                                        <ChevronUp className="h-4 w-4" />
                                                    </>
                                                ) : (
                                                    <>
                                                        <Trans>Ver mais</Trans>{' '}
                                                        <ChevronDown className="h-4 w-4" />
                                                    </>
                                                )}
                                            </button>
                                        )}
                                    </div>

                                    {hoveredId === value.id && (
                                        <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
                                            <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(100%); }
        }
        .animate-shimmer { animation: shimmer 1.5s ease-in-out infinite; }
      `}</style>
        </section>
    );
};

export default CompanyValues;