// Dance Studio — video player + sidebar of dances

const DANCES = [
  { id: 'd1', name: 'Kalamatiano', origin: 'Greek', tempo: '7/8 lifts', duration: '4:30',
    desc: 'The line dance from Kalamata. Twelve steps in a circle, leader holds a handkerchief.', glyph: '◐',
    yt: 'ryWGbu7Ubr8' },
  { id: 'd2', name: 'Dabke', origin: 'Lebanese', tempo: 'Driving', duration: '5:00',
    desc: 'Stomp, stomp, kick — the line moves clockwise. Lead waves a handkerchief.', glyph: '✦',
    yt: 'm_F9rKTdtZ0' },
  { id: 'd3', name: 'Bhangra', origin: 'Indian (Punjab)', tempo: 'Joyful', duration: '4:00',
    desc: 'Shoulders up, fingers wide, knees bouncing. The dhol does the rest.', glyph: '◉',
    yt: 'uMhW--Rov_M' },
];

const Dances = () => {
  const [active, setActive] = React.useState(DANCES[0]);
  const [playing, setPlaying] = React.useState(false);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => {
      setProgress(p => p >= 100 ? 0 : p + 0.4);
    }, 100);
    return () => clearInterval(t);
  }, [playing]);

  React.useEffect(() => { setProgress(0); setPlaying(false); }, [active.id]);

  return (
    <section className="section dance-section" id="dances">
      <div className="section-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>05 — Digital Dance Studio</div>
          <h2 className="title">Learn the <em>steps</em> before you arrive</h2>
        </div>
        <div className="meta">
          Six dances<br/>Two left feet welcome
        </div>
      </div>

      <div className="dance-grid">
        {/* Player */}
        <div className="player">
          <div className="player-screen" style={{ position: 'relative' }}>
            <iframe
              key={active.id}
              src={`https://www.youtube-nocookie.com/embed/${active.yt}?rel=0&modestbranding=1`}
              title={active.name}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              style={{ width: '100%', height: '100%', border: 0, display: 'block', borderRadius: 'var(--r-lg)' }}
            />
            <a
              href={`https://www.youtube.com/watch?v=${active.yt}`}
              target="_blank"
              rel="noopener noreferrer"
              className="mono"
              style={{
                position: 'absolute', top: 12, right: 12, zIndex: 3,
                padding: '8px 14px', borderRadius: 999,
                background: 'rgba(0,0,0,0.65)', color: 'white',
                fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                textDecoration: 'none', backdropFilter: 'blur(6px)',
                border: '1px solid rgba(255,255,255,0.2)',
              }}
            >
              Open on YouTube ↗
            </a>
          </div>
          <div className="player-caption">
            <div>
              <span className="eyebrow">{active.origin} · {active.tempo}</span>
              <h3 className="player-title" style={{ marginTop: 6 }}>{active.name}</h3>
            </div>
            <p className="player-desc" style={{ maxWidth: 360 }}>{active.desc}</p>
          </div>
        </div>

        {/* Sidebar list */}
        <aside className="dance-list">
          <div className="dance-list-head">
            <span className="eyebrow">Curriculum</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>{DANCES.length} videos</span>
          </div>

          {DANCES.map((d, i) => (
            <button
              key={d.id}
              className={`dance-row ${active.id === d.id ? 'on' : ''}`}
              onClick={() => setActive(d)}
            >
              <span className="dance-num mono">{String(i + 1).padStart(2, '0')}</span>
              <span className="dance-glyph">{d.glyph}</span>
              <div className="dance-info">
                <span className="dance-name">{d.name}</span>
                <span className="dance-origin">{d.origin}</span>
              </div>
              <span className="dance-dur mono">{d.duration}</span>
              <span className="dance-play">▶</span>
            </button>
          ))}
        </aside>
      </div>
    </section>
  );
};

window.Dances = Dances;