import React, { useEffect, useRef } from 'react';
import { animate } from 'animejs';
import './Hero.scss';
import content from '../../data/content.json';

const Hero: React.FC = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const fireParticlesRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Анимация появления текста
    animate('.hero-title', {
      translateY: [50, 0],
      opacity: [0, 1],
      duration: 1000,
      easing: 'easeOutQuad',
      delay: 500
    });

    animate('.hero-subtitle', {
      translateY: [30, 0],
      opacity: [0, 1],
      duration: 800,
      easing: 'easeOutQuad',
      delay: 800
    });

    animate('.hero-buttons', {
      translateY: [20, 0],
      opacity: [0, 1],
      duration: 600,
      easing: 'easeOutQuad',
      delay: 1200
    });

    // Создание частиц огня
    createFireParticles();
  }, []);

  const createFireParticles = () => {
    const container = fireParticlesRef.current;
    if (!container) return;

    for (let i = 0; i < 20; i++) {
      const particle = document.createElement('div');
      particle.className = 'fire-particle';
      particle.style.left = Math.random() * 100 + '%';
      particle.style.animationDelay = Math.random() * 2 + 's';
      container.appendChild(particle);
    }
  };

  const scrollToProjects = () => {
    const projectsSection = document.getElementById('projects');
    projectsSection?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section className="hero" ref={heroRef}>
      <div className="fire-particles" ref={fireParticlesRef}></div>
      <div className="hero-bg">
        <div className="fire-gradient"></div>
      </div>

      <div className="container">
        <div className="hero-content">
          <div className="hero-logo">
            <div className="logo-fire">🔥</div>
          </div>

          <h1 className="hero-title">{content.hero.title}</h1>

          <p className="hero-subtitle">{content.hero.subtitle}</p>

          <p className="hero-description">{content.hero.description}</p>

          <div className="hero-buttons">
            {/* заменил a на button, чтобы eslint не ругался */}
            <button className="btn btn-primary">
              Присоединиться
            </button>
            <button onClick={scrollToProjects} className="btn btn-secondary">
              Проекты
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;