/* global React */

function SectionAudio() {
  const [playing, setPlaying] = useState(1);
  const bars = useMemo(
    () => Array.from({ length: 60 }, () => Math.random() * 80 + 10),
    [],
  );
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 160);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="section audio">
      <div className="container">
        <div className="audio__grid">
          <Reveal>
            <div>
              <div className="eyebrow">Reciters · القرّاء</div>
              <h2
                style={{
                  fontFamily: "var(--ff-ar-display)",
                  fontSize: "var(--step-5)",
                  marginBlock: ".75rem 1rem",
                  lineHeight: 1.1,
                }}
              >
                استمع بصوت
                <br />
                نخبة القرّاء
              </h2>
              <p
                style={{
                  color: "var(--fg-muted)",
                  fontSize: "var(--step-1)",
                  lineHeight: 1.7,
                  marginBottom: "1.5rem",
                }}
              >
                أكثر من ٣٠ قارئاً عالمياً، جودة صوت عالية، تحميل للاستماع بدون
                إنترنت، والتكرار الذكي لتيسير الحفظ والمراجعة.
              </p>

              <div className="audio__waveform" aria-hidden="true">
                {bars.map((h, idx) => {
                  const phase = (idx + tick) % bars.length;
                  const amp =
                    playing != null
                      ? Math.abs(Math.sin(phase * 0.35)) * 0.7 + 0.3
                      : 0.3;
                  return (
                    <div
                      key={idx}
                      className="audio__bar"
                      style={{
                        height: `${h * amp}%`,
                        opacity: 0.3 + amp * 0.7,
                      }}
                    />
                  );
                })}
              </div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  marginTop: "1rem",
                  color: "var(--fg-muted)",
                  fontFamily: "var(--ff-en-ui)",
                  fontSize: "var(--step--1)",
                }}
              >
                <span className="mono">02:18 / 04:47</span>
                <span>Al-Fatihah · {RECITERS[playing]?.en}</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="reciters">
              {RECITERS.map((r, idx) => (
                <div
                  key={r.en}
                  className={"reciter" + (idx === playing ? " is-playing" : "")}
                  onClick={() => setPlaying(idx === playing ? null : idx)}
                >
                  <div className="reciter__avatar">{r.initial}</div>
                  <div className="reciter__info">
                    <div className="reciter__name">{r.name}</div>
                    <div className="reciter__meta">
                      {r.en} · {r.country}
                    </div>
                  </div>
                  <button className="reciter__play">
                    <Icon name={idx === playing ? "pause" : "play"} size={14} />
                  </button>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.SectionAudio = SectionAudio;