import App from 'components/Landings/IncreaseYourLeads/ads/App';
import Head from 'next/head';
import Script from 'next/script';
import { useRouter } from 'next/router';
import { dynamicId } from 'helpers';
import { GenericLayout } from 'components/Layouts';

const IncreaseYourLeads = () => {
    const { locales, locale } = useRouter();

    return (
        <>
            {/* GTM centralized in _document.js */}
            <Script
                id='seo'
                dangerouslySetInnerHTML={{
                    __html: `document.documentElement.classList.add("seo")`,
                }}
            />
            <Head>
                <title>
                    Scale Your Business Digitally with Our Services | UO
                    Solutions
                </title>
                <meta
                    name='description'
                    content='Discover our SEO Agency and your perfect strategy! E-commerce SEO, Content, Link Building and more. Ask here for your free SEO audit!'
                />
                {locales.map(locale => (
                    <link
                        rel='alternate'
                        hrefLang={locale}
                        href={`https://uosolutions.com/${
                            locale === 'en'
                                ? '/campaign/seo'
                                : locale + '/campaign/posicionamiento'
                        }`}
                        key={dynamicId()}
                    />
                ))}
                <link
                    rel='canonical'
                    href='https://uosolutions.com/campaign/seo'
                />
            </Head>
            <App locale={locale} />
        </>
    );
};

IncreaseYourLeads.getLayout = page => <GenericLayout>{page}</GenericLayout>;

export default IncreaseYourLeads;
