'use client';

import { useTranslations, useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { useEffect, useRef, useState, Suspense } from 'react';
import { ArrowRight } from 'lucide-react';
import dynamic from 'next/dynamic';
import styles from './Hero.module.css';

const Scene3D = dynamic(() => import('./Scene3D'), {
    ssr: false,
    loading: () => <div className={styles.sceneLoader} />
});

export default function Hero() {
    const t = useTranslations('HomePage');
    const locale = useLocale();
    const router = useRouter();
    const heroRef = useRef<HTMLElement>(null);
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

    const handleGetStarted = () => {
        router.push(`/${locale}/docs`);
    };

    useEffect(() => {
        const handleMouseMove = (e: MouseEvent) => {
            if (!heroRef.current) return;
            
            const rect = heroRef.current.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width - 0.5) * 20;
            const y = ((e.clientY - rect.top) / rect.height - 0.5) * 20;
            
            setMousePosition({ x, y });
        };

        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, []);

    return (
        <section ref={heroRef} className={styles.hero}>
            <Suspense fallback={<div className={styles.sceneLoader} />}>
                <Scene3D />
            </Suspense>
            <div 
                className={styles.heroContent}
                style={{
                    transform: `perspective(1000px) rotateX(${mousePosition.y * 0.1}deg) rotateY(${mousePosition.x * 0.1}deg) translateZ(0)`
                }}
            >
                <h1 className={styles.title}>{t('title')}</h1>
                <p className={styles.subtitle}>{t('subtitle')}</p>
                <div className={styles.ctaGroup}>
                    <button className={styles.ctaButton} onClick={handleGetStarted}>
                        {t('getStarted')}
                        <ArrowRight size={20} />
                    </button>
                    <button className={styles.secondaryButton} onClick={handleGetStarted}>
                        {t('learnMore')}
                    </button>
                </div>
            </div>
            <div 
                className={styles.gradientOrb}
                style={{
                    transform: `translate(-50%, -50%) translateZ(0) translate(${mousePosition.x * 0.5}px, ${mousePosition.y * 0.5}px)`
                }}
            ></div>
        </section>
    );
}

