/* Hero Section — Floating logo, cinematic lighting, golden particles */

function Particle({ x, y, size, delay, duration, dx, dy, opacity }) {
  return (
    <div className="particle" style={{
      left: `${x}%`,
      top: `${y}%`,
      width: `${size}px`,
      height: `${size}px`,
      '--p-dx': `${dx}px`,
      '--p-dy': `${dy}px`,
      '--p-opacity': opacity,
      animationDuration: `${duration}s`,
      animationDelay: `${delay}s`,
    }} />
  );
}

function ParticleField({ count = 35 }) {
  const particles = React.useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: 1.5 + Math.random() * 3.5,
      delay: Math.random() * 8,
      duration: 7 + Math.random() * 10,
      dx: (Math.random() - 0.5) * 120,
      dy: -(20 + Math.random() * 80),
      opacity: 0.25 + Math.random() * 0.5,
    }))
  , [count]);

  return (
    <div className="particle-field" aria-hidden="true">
      {particles.map(p => <Particle key={p.id} {...p} />)}
    </div>
  );
}

function HeroSection({ onNavigate, particleCount }) {
  const counts = { few: 15, normal: 35, many: 60 };
  const pCount = counts[particleCount] || 35;

  /* JS-driven staggered reveal via setTimeout */
  const [showLogo, setShowLogo] = React.useState(false);
  const [showText, setShowText] = React.useState(false);
  const [showScroll, setShowScroll] = React.useState(false);

  React.useEffect(() => {
    const t1 = setTimeout(() => setShowLogo(true), 2200);
    const t2 = setTimeout(() => setShowText(true), 2600);
    const t3 = setTimeout(() => setShowScroll(true), 3100);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);

  const revealStyle = (show) => ({
    opacity: show ? 1 : 0,
    transform: show ? 'translateY(0)' : 'translateY(30px)',
  });

  return (
    <section id="accueil" className="hero-section">
      <div className="hero-lighting" aria-hidden="true"></div>
      <ParticleField count={pCount} />

      <div className="hero-logo-wrap" style={revealStyle(showLogo)}>
        <div className="logo-aura"></div>
        <div className="logo-aura logo-aura--red"></div>
        <img
          src="uploads/logo.png"
          alt="Fête de la Fraise — Édition 2026"
          className="hero-logo"
          draggable="false"
        />
      </div>

      <div className="hero-text" style={revealStyle(showText)}>
        <p className="hero-overline">Ville de Skikda présente</p>
        <h1 className="hero-title">
          <span className="hero-title-line">Fête de la</span>
          <span className="hero-title-line hero-title-accent">Fraise</span>
        </h1>
        <div className="hero-meta">
          <span className="hero-edition">Édition 2026</span>
          <span className="hero-dot">◆</span>
          <span className="hero-dates">15 — 18 Mai</span>
        </div>
        <button className="cta-btn" onClick={() => onNavigate('inscription')}>
          <span className="cta-label">S'inscrire au Festival</span>
          <span className="cta-shimmer" aria-hidden="true"></span>
        </button>
      </div>

      <div className="scroll-indicator" style={revealStyle(showScroll)}>
        <div className="scroll-track">
          <div className="scroll-thumb"></div>
        </div>
        <span className="scroll-label">Découvrir</span>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, ParticleField });