export function ExploreBenefitsBlock()

in app/src/landing/ExploreBenefitsBlock.tsx [97:201]
99 lines of code
12 McCabe index (conditional complexity)

export function ExploreBenefitsBlock() {
    const theme = getCurrentTheme();
    const getThemeClassName = (baseClass: string) => !!theme && theme === 'loveship_dark' ? `${baseClass}LoveshipDark` : `${baseClass}${theme.charAt(0).toUpperCase() + theme.slice(1)}`;
    const topBlockRefs: React.RefObject<HTMLDivElement>[] = topExploreBlocks.map(() => React.createRef());
    const bottomBlockRefs: React.RefObject<HTMLDivElement>[] = bottomExploreBlocks.map(() => React.createRef());

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const direction = (entry.target as HTMLElement).dataset.direction;
                    entry.target.classList.add(css[`animatedSlideIn${direction}`]);
                    observer.unobserve(entry.target);
                }
            });
        });

        topBlockRefs.forEach((ref, index) => {
            ref.current.dataset.direction = index % 2 === 0 ? 'Left' : 'Right';
            observer.observe(ref.current);
        });

        bottomBlockRefs.forEach((ref) => {
            ref.current.dataset.direction = 'Up';
            observer.observe(ref.current);
        });

        return () => {
            topBlockRefs.forEach((ref) => {
                if (ref.current) {
                    observer.unobserve(ref.current);
                }
            });

            bottomBlockRefs.forEach((ref) => {
                if (ref.current) {
                    observer.unobserve(ref.current);
                }
            });
        };
    }, []);

    return (
        <div className={ css.root }>
            <div className={ css.container }>
                <Text cx={ css.exploreHeader } fontWeight="600">Explore UUI benefits</Text>
                <div className={ css.topBlockWrapper }>
                    { topExploreBlocks.map((item, index) => (
                        <Panel ref={ topBlockRefs[index] } cx={ css.topBlockPanel } key={ item.id }>
                            <IconContainer icon={ item.icon.element } cx={ cx(css.topBlockIcon, css[getThemeClassName(`topBlockIcon${item.icon.name}`)]) } size="18" />
                            <FlexCell cx={ css.topBlockContextWrapper }>
                                <Text fontSize="18" lineHeight="24" fontWeight="600">{ item.caption }</Text>
                                <Text fontSize="16" lineHeight="24" color="secondary">{ item.text }</Text>
                            </FlexCell>
                            { item.footer && (
                                <FlexRow cx={ css.topBlockFooter } justifyContent="center">
                                    <Button
                                        rawProps={ { style: { width: '100%' } } }
                                        fill="ghost"
                                        size="42"
                                        caption={ item.footer.linkCaption }
                                        href={ item.footer.href }
                                        onClick={ () => {
                                        } }
                                    />
                                </FlexRow>
                            ) }
                        </Panel>
                    )) }
                </div>
                <div className={ css.bottomBlockWrapper }>
                    { bottomExploreBlocks.map((item, index) => (
                        <Panel ref={ bottomBlockRefs[index] } cx={ css.bottomBlockPanel } key={ item.id }>
                            <IconContainer size="36" icon={ item.icon.element } cx={ cx(css.bottomBlockIcon, css[getThemeClassName(`bottomBlockIcon${item.icon.name}`)]) } />
                            <FlexRow cx={ css.bottomBlockCaptionWrapper }>
                                <Text fontSize="24" lineHeight="30" fontWeight="600" cx={ css.bottomBlockCaption }>{ item.caption }</Text>
                                { item.captionBadge
                                && <Badge color="success" fill="outline" size="24" cx={ css.bottomItemBadge } icon={ item.captionBadge.icon } caption={ item.captionBadge.caption } /> }
                            </FlexRow>
                            <Text fontSize="18" lineHeight="24" cx={ css.bottomBlockText } color="secondary">{ item.text }</Text>
                            { item.footer && (
                                <FlexRow cx={ css.bottomBlockFooter } columnGap="6">
                                    { item.footer.map((footerItem) => (
                                        <Button
                                            key={ footerItem.linkCaption }
                                            size="42"
                                            icon={ index === 1 && CommunicationMailFillIcon }
                                            href={ footerItem.href }
                                            fill={ index === 1 ? 'solid' : 'none' }
                                            target="_blank"
                                            color={ footerItem.color }
                                            caption={ footerItem.linkCaption }
                                            onClick={ () => {
                                            } }
                                        />
                                    )) }
                                </FlexRow>
                            ) }
                        </Panel>
                    )) }
                </div>
            </div>
        </div>
    );
}