import { Link } from 'react-router-dom';
import { useAtomValue } from 'jotai';
import { languageState } from '../state/atoms';
import { getTranslations } from '../translations';
import styles from '../styles/components/Hero.module.scss';

export default function Hero() {
  const language = useAtomValue(languageState);
  const t = getTranslations(language);

  return (
    <section id="home" className={styles.hero}>
      <div className={styles.grid} aria-hidden="true" />

      <div className={styles.content}>
        <p className={styles.greeting}>{t.hero.greeting}</p>
        <h1 className={styles.name}>
          {t.hero.name}<span className={styles.dot}>.</span>
        </h1>
        <p className={styles.tagline}>
          {t.hero.tagline}
        </p>
        <p className={styles.sub}>
          {t.hero.sub}
        </p>

        <div className={styles.cta}>
          <Link to="/projects" className={styles.btnPrimary}>
            {t.hero.ctaPrimary}
          </Link>
          <Link to="/contact" className={styles.btnGhost}>
            {t.hero.ctaSecondary}
          </Link>
        </div>
      </div>
    </section>
  );
}