// hero.jsx — Dj Antønic hero with animated deck visual

const { useState, useEffect, useRef } = React;

function AnimatedBars({ count = 56, className = "", min = 6, max = 100, speed = 1, seed = 0 }) {
  // Renders a deterministic-ish waveform whose bars subtly modulate over time.
  const [tick, setTick] = useState(0);
  useEffect(() => {
    let raf;
    let last = performance.now();
    const loop = (now) => {
      if (now - last > 80 / speed) {
        setTick(t => t + 1);
        last = now;
      }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [speed]);

  const bars = [];
  for (let i = 0; i < count; i++) {
    const phase = (i * 0.45 + tick * 0.18 + seed) ;
    const v = (Math.sin(phase) + Math.sin(phase * 1.7) * 0.6 + Math.sin(phase * 0.31) * 0.8 + 2.4) / 4.6;
    const h = min + v * (max - min);
    bars.push(<i key={i} style={{ height: `${h}%` }} />);
  }
  return <div className={className}>{bars}</div>;
}

function DjDeck() {
  return (
    <div className="deck" role="img" aria-label="Antønic visual: spinning platter and waveform">
      <div className="deck-row">
        <span className="deck-label">DECK A · CHANNEL 01</span>
        <div className="deck-led">
          <i className="on" />
          <i className="on" />
          <i />
          <i />
        </div>
      </div>

      <div style={{ position: "relative" }}>
        <div className="deck-platter" />
        <div className="deck-tonearm" />
      </div>

      <AnimatedBars className="deck-waveform" count={48} min={8} max={95} />

      <div className="deck-footer">
        <span>track_master_v3.alac</span>
        <span className="deck-bpm">128 BPM · 320 kbps</span>
      </div>
    </div>
  );
}

function Hero({ onCtaConvert, onCtaFormats }) {
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <span className="eyebrow"><span className="dot" /> Audio engine v3.2 — live</span>
            <h1 className="headline">
              Convierte tu audio<br />
              a <span className="neon">MP3 320 kbps</span>.
            </h1>
            <p className="lede">
              Sube archivos ALAC, AAC, M4A, MP4, WAV, FLAC, OGG y más. Extraemos, convertimos y te devolvemos tu pista en alta calidad — sin marcas de agua, sin colas.
            </p>

            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onCtaConvert}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                Convertir ahora
              </button>
              <button className="btn btn-ghost" onClick={onCtaFormats}>
                Ver formatos compatibles
              </button>
            </div>

            <div className="hero-stats">
              <div className="stat"><span className="v">10</span><span className="k">Formatos in</span></div>
              <div className="stat"><span className="v">320<small style={{fontSize:'14px',color:'var(--text-3)',marginLeft:'4px',fontFamily:'var(--font-mono)'}}>kbps</small></span><span className="k">Max bitrate</span></div>
              <div className="stat"><span className="v">~12s</span><span className="k">Avg convert</span></div>
              <div className="stat"><span className="v">350<small style={{fontSize:'14px',color:'var(--text-3)',marginLeft:'4px',fontFamily:'var(--font-mono)'}}>mb</small></span><span className="k">File limit</span></div>
            </div>
          </div>

          <DjDeck />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, AnimatedBars, DjDeck });