/*
 * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
 *
 * SPDX-License-Identifier: MIT
 */

import clsx from 'clsx';

import {
  FediverseIcon,
  GithubIcon,
  GoogleScholarIcon,
  LinkedInIcon,
  OrcidIcon,
} from '@site/src/components/icons';

import styles from './Hero.module.css';

export default function Hero({ avatar }: { avatar: string }) {
  return (
    <header className={clsx('hero', 'hero--dark', styles.hero)}>
      <div className="container">
        <div className="row">
          <div
            className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
          >
            <img src={avatar} alt="My photo" className={styles.avatar__image} />
          </div>
          <div className={clsx('col', 'col--9', styles.hero__col)}>
            <h1 className={clsx('hero__title', styles.introduction)}>
              Hi! 👋 I&rsquo;m{' '}
              <span className={styles.introduction__name}>Kristóf Marussy</span>
            </h1>
            <p>
              I&rsquo;m a research fellow working at the{' '}
              <a href="https://ftsrg.mit.bme.hu">
                🔬&nbsp;Critical Systems Research Group&nbsp;(
                <abbr>ftsrg</abbr>)
              </a>{' '}
              at the{' '}
              <a href="https://mit.bme.hu">
                🏫&nbsp;Department of Measurement and Information
                Systems&nbsp;(MIT)
              </a>{' '}
              at{' '}
              <a href="https://bme.hu">
                🏛️&nbsp;Budapest University of Technology and
                Economics&nbsp;(BME)
              </a>
              . My reasearch interests include graph generation, logic solvers,
              formal verification, and applying these techniques for ensuring
              the safety and correcness of critical systems.
            </p>
            <p>
              I also like free (as in liberty) and open source software. My
              pronouns are he/him.
            </p>
            <div className={styles.cta}>
              <a
                href="/cv.pdf"
                className={clsx(
                  'button',
                  'button--lg',
                  'button--primary',
                  styles.cta__button,
                )}
              >
                Read my CV
              </a>{' '}
              <a
                href="#contact"
                className={clsx(
                  'button',
                  'button--lg',
                  'button--secondary',
                  styles.cta__button,
                )}
              >
                Contact me
              </a>
              <ul className={styles.contacts}>
                <li className={styles.contacts__item}>
                  <a
                    href="https://orcid.org/0000-0002-9135-8256"
                    className={styles.contacts__icon}
                  >
                    <OrcidIcon />
                  </a>
                </li>
                <li className={styles.contacts__item}>
                  <a
                    href="https://scholar.google.com/citations?user=E9CKNYoAAAAJ"
                    className={styles.contacts__icon}
                  >
                    <GoogleScholarIcon />
                  </a>
                </li>
                <li className={styles.contacts__item}>
                  <a
                    href="https://github.com/kris7t/"
                    className={styles.contacts__icon}
                  >
                    <GithubIcon />
                  </a>
                </li>
                <li className={styles.contacts__item}>
                  <a
                    href="https://pleroma.marussy.com/users/kristof"
                    className={styles.contacts__icon}
                  >
                    <FediverseIcon />
                  </a>
                </li>
                <li className={styles.contacts__item}>
                  <a
                    href="https://www.linkedin.com/in/k-marussy"
                    className={styles.contacts__icon}
                  >
                    <LinkedInIcon />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}