import photo from '@assets/images/armand-philippot.jpg';
import { settings } from '@utils/config';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Script from 'next/script';
import { ReactElement, useEffect, useRef } from 'react';
import { useIntl } from 'react-intl';
import { Person, WithContext } from 'schema-dts';
import styles from './Branding.module.scss';
import Logo from './Logo/Logo';

type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement;

const Branding: BrandingReturn = ({ isHome = false }) => {
  const intl = useIntl();
  const { locale } = useRouter();
  const TitleTag = isHome ? 'h1' : 'p';
  const logoRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
  const jobRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    if (logoRef.current) {
      logoRef.current.style.setProperty(
        '--branding-logo-animation',
        'flip-logo 9s ease-in 0s 1'
      );
    }
  }, []);

  useEffect(() => {
    if (titleRef.current) {
      titleRef.current.style.setProperty(
        '--branding-name-animation',
        'blink 0.8s ease-in-out 0s 2, typing 4.3s linear 0s 1'
      );
    }
  }, []);

  useEffect(() => {
    if (jobRef.current) {
      jobRef.current.style.setProperty(
        '--branding-job-animation',
        'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1'
      );
    }
  }, []);

  const schemaJsonLd: WithContext<Person> = {
    '@context': 'https://schema.org',
    '@type': 'Person',
    '@id': `${settings.url}/#branding`,
    name: settings.name,
    url: settings.url,
    jobTitle: locale?.startsWith('en')
      ? settings.baseline.en
      : settings.baseline.fr,
    image: photo.src,
    subjectOf: { '@id': `${settings.url}` },
  };

  return (
    <>
      <Script
        id="schema-branding"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
      />
      <div id="branding" className={styles.wrapper}>
        <div className={styles.logo} ref={logoRef}>
          <div className={styles.logo__front}>
            <Image
              src={photo}
              alt={intl.formatMessage(
                {
                  defaultMessage: '{brandingName} picture',
                  description: 'Branding: branding name picture.',
                  id: 'ILRLTq',
                },
                {
                  brandingName: settings.name,
                }
              )}
              layout="responsive"
            />
          </div>
          <div className={styles.logo__back}>
            <Logo />
          </div>
        </div>
        <TitleTag ref={titleRef} className={styles.name}>
          <Link href="/">
            <a className={styles.link}>{settings.name}</a>
          </Link>
        </TitleTag>
        <p ref={jobRef} className={styles.job}>
          {locale?.startsWith('en')
            ? settings.baseline.en
            : settings.baseline.fr}
        </p>
      </div>
    </>
  );
};

export default Branding;
mponents/Icons?h=v2.0.0&amp;id=1fe43a98098eeef254a26b21d77e2d0ce8e55c30'>Icons</a>/<a href='/www.armandphilippot.com/tree/src/components/Icons/Hamburger?h=v2.0.0&amp;id=1fe43a98098eeef254a26b21d77e2d0ce8e55c30'>Hamburger</a>/<a href='/www.armandphilippot.com/tree/src/components/Icons/Hamburger/Hamburger.tsx?h=v2.0.0&amp;id=1fe43a98098eeef254a26b21d77e2d0ce8e55c30'>Hamburger.tsx</a></div><div class='content'>blob: 9b39272bce6deed2d3e81e0b23c16fac077fb2ed (<a href='/www.armandphilippot.com/plain/src/components/Icons/Hamburger/Hamburger.tsx?h=v2.0.0&amp;id=1fe43a98098eeef254a26b21d77e2d0ce8e55c30'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
</pre></td>
<td class='lines'><pre><code>