'use client';

import { motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';

export default function HeroTitle() {
  const { t } = useLanguage();

  const titleStyle = {
    fontSize: 'clamp(48px, 6.5vw, 140px)',
    lineHeight: '100%',
    letterSpacing: '-0.03em',
  };

  return (
    <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden select-none">
      <motion.div
        className="text-special-white text-left relative self-stretch font-domine md:whitespace-nowrap"
        style={{ ...titleStyle, fontWeight: 400 }}
        initial={{ opacity: 0, x: -60, filter: 'blur(12px)' }}
        whileInView={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
        viewport={{ once: true }}
        transition={{ duration: 0.9, ease: 'easeOut', delay: 0.2 }}
      >
        {t('hero.title1')}
      </motion.div>

      <motion.div
        className="text-special-white text-left relative w-full font-domine md:whitespace-nowrap"
        style={{ ...titleStyle, fontWeight: 700 }}
        initial={{ opacity: 0, x: 60, filter: 'blur(12px)' }}
        whileInView={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
        viewport={{ once: true }}
        transition={{ duration: 0.9, ease: 'easeOut', delay: 0.4 }}
      >
        {t('hero.title2')}
      </motion.div>
    </div>
  );
}