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

import clsx from 'clsx';
import type { ReactNode } from 'react';

import {
  type Icon,
  Gear,
  Graph,
  MagicWand,
  ShieldCheck,
} from '@phosphor-icons/react';

import Section from '@site/src/components/landing/Section';

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

function Topic({
  title,
  style,
  Icon,
  children,
}: {
  title: string;
  style: string;
  Icon: Icon;
  children: ReactNode;
}) {
  return (
    <div className={clsx('col', 'col-3', styles.topic)}>
      <div className={styles.topic__contents}>
        <div className={clsx(styles.topic__icon, style)}>
          <Icon aria-hidden="true" size={128} weight="light" />
        </div>
        <div className={styles.topic__text}>
          <h3 className={styles.topic__title}>{title}</h3>
          <p className={styles.topic__description}>{children}</p>
        </div>
      </div>
    </div>
  );
}

export default function Research() {
  return (
    <Section id="research" title="Research">
      <div className={clsx('container', styles.topics)}>
        <div className="row">
          <Topic
            title="Critical systems"
            Icon={Gear}
            style={styles['topic__icon--system']}
          >
            Cyber-physical systems especially in&nbsp;the railway, automotive,
            and aerospace domains with stringent correctness and relability
            requirements
          </Topic>
          <Topic
            title="Formal verification"
            Icon={ShieldCheck}
            style={styles['topic__icon--verification']}
          >
            Proving the safety and reliability of critical system designs and
            software components in a mathematically precise way
          </Topic>
          <Topic
            title="Automated reasoning"
            Icon={MagicWand}
            style={styles['topic__icon--reasoning']}
          >
            Integrating logical and numerical solvers with intelligent
            heuristics to&nbsp;answer challenging analysis questions and
            synthesize reliable system designs
          </Topic>
          <Topic
            title="Graph generation"
            Icon={Graph}
            style={styles['topic__icon--graph']}
          >
            Efficient graph-based information processing for system modeling,
            testing data-driven systems, and knowledge representation in
            autonomous systems
          </Topic>
        </div>
      </div>
    </Section>
  );
}