import { Link } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import { useParallax } from '../model/useParallax'
import { ConversionFlow } from './ConversionFlow'
import { ExchangeCard } from './ExchangeCard'
import styles from './Hero.module.css'

export function Hero() {
  const heroRef = useParallax<HTMLElement>()

  return (
    <section className={styles.hero} ref={heroRef}>
      <div className={styles.orbs} aria-hidden="true">
        <div className={`${styles.orb} ${styles.orbPurple}`} />
      </div>
      <div className={styles.content}>
        <div className={styles.left}>
          <div className={styles.desktop}>
            <ConversionFlow />
          </div>
          <div className={styles.mobile}>
            <ExchangeCard />
          </div>
        </div>
        <div className={styles.right}>
          <h1 className={styles.title}>
            Ваш мост
            <span className={styles.reflection} aria-hidden="true">
              Ваш мост
            </span>
            <span className={styles.line2}>
              в мир
              <br />
              цифровых
              <br />
              активов
            </span>
          </h1>
          <div className={styles.ctaRow}>
            <Link to={ROUTES.REGISTER} className={styles.cta}>
              Зарегистрироваться
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}
