import { Link } from 'react-router-dom';
import { motion } from 'motion/react';
import { useTranslation } from '../../i18n';
import { useTypingEffect } from '../../hooks';
import { Scene3D } from '../effects';
import { Button } from '../ui';
import styles from './Hero.module.css';

export function Hero() {
  const { t } = useTranslation();
  
  const { text } = useTypingEffect({
    words: t.hero.rotatingWords,
    typingSpeed: 80,
    deletingSpeed: 40,
    pauseDuration: 2500,
  });

  return (
    <section className={styles.hero}>
      <Scene3D />
      
      <div className={`${styles.content} container`}>
        <motion.div
          className={styles.text}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
        >
          <motion.p
            className={styles.greeting}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
          >
            {t.hero.greeting}
          </motion.p>
          
          <motion.h1
            className={styles.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3, duration: 0.5 }}
          >
            {t.hero.company}
          </motion.h1>
          
          <motion.div
            className={styles.tagline}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
          >
            <span>{t.hero.tagline}</span>
            <span className={styles.typed}>
              {text}
              <span className={styles.cursor}>|</span>
            </span>
          </motion.div>
          
          <motion.div
            className={styles.cta}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.7, duration: 0.5 }}
          >
            <Link to="/contact">
              <Button variant="primary" size="lg">
                {t.hero.cta}
              </Button>
            </Link>
            <Link to="/about">
              <Button variant="outline" size="lg">
                {t.hero.ctaSecondary}
              </Button>
            </Link>
          </motion.div>
        </motion.div>
      </div>
      
      <div className={styles.scrollIndicator}>
        <motion.div
          className={styles.scrollMouse}
          animate={{ y: [0, 8, 0] }}
          transition={{ repeat: Infinity, duration: 1.5, ease: 'easeInOut' }}
        >
          <span className={styles.scrollWheel} />
        </motion.div>
      </div>
    </section>
  );
}