footer.tsx

"use client";
import React, { useCallback } from 'react';
import clsx from 'clsx';
import { styled } from '@mui/material/styles';

import { Grid, Link, useTheme } from '@mui/material';
import FavoriteIcon from '@mui/icons-material/Favorite';

import InternalWrapper from '../InternalWrapper';
import Logo from '..//Logo';

const PREFIX = 'AfterFooter';
const classes = {
    divider: `${PREFIX}-divider`,
    logo: `${PREFIX}-logo`,
    afterFooter: `${PREFIX}-afterFooter`,
    afterFooterTexts: `${PREFIX}-afterFooterTexts`,
    afterFooterTitle: `${PREFIX}-afterFooterTitle`,
    afterFooterAddress: `${PREFIX}-afterFooterAddress`,
    afterFooterInfo: `${PREFIX}-afterFooterInfo`,
    nopaddingtop: `${PREFIX}-nopaddingtop`,
    securityChecks: `${PREFIX}-securityChecks`,
    securityCheckItem: `${PREFIX}-securityCheckItem`,
    securityCheckGoogle: `${PREFIX}-securityCheckGoogle`,
};

const Root = styled('div')(({ theme }) => ({
    [`& .${classes.divider}`]: {
        display: 'block',
        marginBottom: '1rem',
        marginTop: '1rem',
        width: 15,
        height: 2,
        background: theme.palette.primary.main,
        [theme.breakpoints.down('md')]: {
            marginRight: 'auto',
            marginLeft: 'auto',
        },
    },
    [`& .${classes.logo}`]: {
        display: 'flex',
        alignItems: 'center',
        [theme.breakpoints.down('md')]: {
            marginTop: '2rem',
            flexDirection: 'column',
            '& img': {
                width: 200,
            },
        },
        '& img': {
            height: 'auto',
        },
    },
    [`& .${classes.afterFooter}`]: {
        background: 'black',
        paddingBottom: '2rem',
        [theme.breakpoints.down('md')]: {
            textAlign: 'center',
            alignItems: 'center',
        },
    },
    [`& .${classes.afterFooterTexts}`]: {
        paddingTop: '2rem !important',
        fontSize: '0.825rem',
    },
    [`& .${classes.afterFooterTitle}`]: {
        color: theme.palette.primary.main,
        fontWeight: 'bold',
        margin: 0,
        fontSize: 15,
        textTransform: 'uppercase',
    },
    [`& .${classes.afterFooterAddress}`]: {
        color: 'white',
        fontStyle: 'normal',
        position: 'relative',
    },
    [`& .${classes.afterFooterInfo}`]: {
        color: '#868686',
        margin: '0 0 0.5rem',
        '& a': {
            color: '#868686',
        },
    },
    [`& .${classes.nopaddingtop}`]: {
        paddingTop: '0 !important',
    },
    [`& .${classes.securityChecks}`]: {
        background: 'white',
        borderRadius: 5,
        padding: '1rem',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        [theme.breakpoints.down('xs')]: {
            flexWrap: 'wrap',
        },
    },
    [`& .${classes.securityCheckItem}`]: {
        padding: '0.5rem',
        [theme.breakpoints.down('xs')]: {
            width: '50%',
        },
    },
    [`& .${classes.securityCheckGoogle}`]: {
        maxWidth: 195,
        width: '100%',
        height: 85,
        overflow: 'hidden',
    },
}));

const AfterFooter = () => {
    const theme = useTheme();

    const armoredRef = useCallback((node) => {
        if (node !== null) {
            const script = document.createElement('script');
            script.src = 'https://cdn.siteblindado.com/aw.js';
            script.onload = () => xmlGetAw();
            document.body.appendChild(script);
        }
    }, []);

    return (
        <Root>
            <div className={classes.afterFooter}>
                <InternalWrapper>
                    <Grid container spacing={4}>
                        <Grid
                            item
                            xs={12}
                            lg={2}
                            className={clsx(classes.nopaddingtop, classes.logo)}
                        >
                            <Logo maxWidth="90%" forceDark forceMobile />
                        </Grid>
                        <Grid item xs={12} lg={5} className={classes.afterFooterTexts}>
                            <p className={classes.afterFooterTitle}>
                                PICHAU INFORMÁTICA® É UMA MARCA REGISTRADA DE BAZAM E PICHAU
                                INFORMATICA LTDA | CNPJ: 09.376.495/0001-22
                            </p>
                            <address className={classes.afterFooterAddress}>
                                Avenida Santos Dumont, 7199 - Aventureiro, Joinville - SC - 89226-435
                            </address>
                            <span className={classes.divider} />
                            <p className={classes.afterFooterInfo}>
                                Preços e condições de pagamento exclusivos para compras via
                                internet e podem variar nas lojas físicas. Os preços anunciados
                                neste site ou via e-mail promocional podem ser alterados sem
                                prévio aviso. A Pichau Informática, não é responsável por erros
                                descritivos. As fotos contidas nesta página são meramente
                                ilustrativas do produto e podem variar de acordo com o
                                fornecedor/lote do fabricante. Ofertas válidas até o término de
                                nossos estoques. Vendas sujeitas à análise e confirmação de
                                dados.
                            </p>
                            <p className={classes.afterFooterInfo}>
                                Made with
                                {' '}
                                <FavoriteIcon fontSize="small" style={{ fontSize: 14, color: '#F00', marginBottom: -2 }} />
                                {' '}
                                by
                                {' '}
                                <Link target="_blank" rel="nofollow" href="https://www.facebook.com/pichauinfo">Pichau</Link>
                                {' '}
                                &
                                {' '}
                                <Link target="_blank" rel="nofollow" href="https://www.heerdt.com.br">Heerdt</Link>
                            </p>
                        </Grid>
                        <Grid item xs={12} lg={5} className={classes.afterFooterTexts}>
                            <p className={classes.afterFooterTitle}>
                                Certificados de segurança
                            </p>
                            <span className={classes.divider} />
                            <>
                                <div className={classes.securityChecks}>
                                    <div id="armored_website" ref={armoredRef}>
                                        <param id="aw_preload" value="true" />
                                        <param id="aw_use_cdn" value="true" />
                                    </div>
                                    <a href="#" className={classes.securityCheckItem}>
                                        <img
                                            alt="Google"
                                            src="/images/pichau-google.png"
                                            width={80}
                                            height={80}
                                        />
                                    </a>
                                    <a
                                        id="seloEbit"
                                        href="http://www.ebit.com.br/6261/selo"
                                        target="_blank"
                                        rel="noreferrer"
                                        title="Avaliado pelos consumidores"
                                        className={classes.securityCheckItem}
                                    >
                                        <img
                                            src="https://newimgebit-a.akamaihd.net/ebitBR/selo/img_6261.png"
                                            alt="E-bit"
                                        />
                                    </a>
                                    <div
                                        id="___ratingbadge_0"
                                        className={clsx(classes.securityCheckItem,
                                            classes.securityCheckGoogle)}
                                    >
                                        <iframe
                                            frameBorder="0"
                                            hspace="0"
                                            marginWidth="0"
                                            scrolling="no"
                                            vspace="0"
                                            width={195}
                                            height={85}
                                            src="https://www.google.com/shopping/customerreviews/badge?merchant_id=106916823&position=INLINE&origin=https://www.pichau.com.br"
                                            title="Google Customer Reviews"
                                        />
                                    </div>
                                </div>
                            </>
                        </Grid>
                    </Grid>
                </InternalWrapper>
            </div>
        </Root>
    );
};

export default AfterFooter;