/* global React */

function SectionQuran() {
  const [reciter, setReciter] = useState(0);
  const spotlightProfiles = [
    {
      label: "تلاوة وقورة",
      note: "نبرة متزنة وإيقاع هادئ يناسب القراءة اليومية والإنصات الطويل.",
      tag: "ورد يومي",
    },
    {
      label: "دفء واضح",
      note: "صوت دافئ وتجويد سلس يجعل المراجعة والحفظ أكثر راحة.",
      tag: "مراجعة وحفظ",
    },
    {
      label: "صفاء ممتد",
      note: "طبقة واضحة مع امتداد نغمي مريح عند تكرار الآيات.",
      tag: "تكرار ذكي",
    },
    {
      label: "حضور كلاسيكي",
      note: "أداء مهيب بطابع تراثي يمنح التلاوة وقاراً خاصاً.",
      tag: "خشوع أعلى",
    },
    {
      label: "هدوء متوازن",
      note: "إلقاء هادئ ومباشر مناسب للورد الصباحي والاستماع السريع.",
      tag: "استماع يومي",
    },
    {
      label: "وضوح قوي",
      note: "صوت حاضر بوضوح عالٍ وتقطيع نظيف للآيات أثناء الترديد.",
      tag: "جودة عالية",
    },
  ];
  const reciterPortraits = [
    "assets/reciters/سديس.jpg",
    "assets/reciters/عفاسي.jpg",
    "assets/reciters/معقيلي.jpg",
    "assets/reciters/عبد الباسط.png",
    "assets/reciters/Saad_al_Ghamdi.jpg",
    "assets/reciters/العجمي.jpg",
  ];
  const activeReciter = {
    ...RECITERS[reciter],
    portrait: reciterPortraits[reciter],
  };
  const activeProfile = spotlightProfiles[reciter % spotlightProfiles.length];
  const progressWidths = [38, 54, 46, 63, 49, 41];
  const timecodes = ["1:42 / 4:18", "0:58 / 3:52", "2:11 / 5:04", "1:26 / 4:47", "0:44 / 3:18", "1:09 / 4:02"];
  const chipNames = ["السديس", "العفاسي", "المعيقلي", "عبدالباسط", "الغامدي", "العجمي"];

  useEffect(() => {
    const id = setInterval(() => {
      setReciter((v) => (v + 1) % RECITERS.length);
    }, 3600);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="section quran" id="quran">
      <div className="container">
        <div className="quran__grid">
          <Reveal>
            <div className="quran__preview">
              <div className="quran__surah-header">
                <div className="quran__surah-meta">
                  <div className="quran__surah-name">سورة البقرة</div>
                  <div className="quran__surah-info">Al-Baqarah · Medinan · 286 Ayahs</div>
                </div>
                <div className="quran__surah-num">٢</div>
              </div>
              <div className="quran__bismillah">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</div>
              <div className="quran__ayahs">
                {AYAH_BAQARAH_255.map((t, i) => (
                  <React.Fragment key={i}>
                    {t}
                  </React.Fragment>
                ))}
                <span className="quran__ayah-mark">
                  <svg viewBox="0 0 32 32" width="26" height="26">
                    <path d="M16 2 L20 10 L28 10 L22 16 L28 22 L20 22 L16 30 L12 22 L4 22 L10 16 L4 10 L12 10 Z" fill="#fdf6e3" stroke="#a88639" strokeWidth="1"/>
                  </svg>
                  <span>٢٥٥</span>
                </span>
              </div>
              <div className="quran__controls">
                <button className="quran__control-btn"><Icon name="arrow-right" size={16}/></button>
                <button className="quran__control-btn quran__control-btn--play"><Icon name="play" size={20}/></button>
                <button className="quran__control-btn"><Icon name="arrow-left" size={16}/></button>
                <div className="quran__progress">
                  <div className="quran__progress-fill" style={{ width: `${progressWidths[reciter]}%` }} />
                </div>
                <span className="mono" style={{color: "var(--y-800)"}}>{timecodes[reciter]}</span>
              </div>
              <div className="quran__chips">
                {RECITERS.map((r, i) => (
                  <button
                    key={r.en}
                    className={"quran__chip" + (i === reciter ? " is-active" : "")}
                    onClick={() => setReciter(i)}
                  >
                    {chipNames[i] || r.name}
                  </button>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="quran__spotlight">
              <div className="eyebrow quran__spotlight-eyebrow">Selected Reciter · القارئ المختار</div>
              <div className="quran__spotlight-shell" key={activeReciter.en}>
                <div className="quran__spotlight-media">
                  <img
                    className="quran__spotlight-photo"
                    src={encodeURI(activeReciter.portrait)}
                    alt={activeReciter.name}
                    loading="lazy"
                    decoding="async"
                  />
                  <span className="quran__spotlight-badge">{activeProfile.tag}</span>
                </div>

                <div className="quran__spotlight-copy">
                  <div className="quran__spotlight-kicker">{activeProfile.label}</div>
                  <h3 className="quran__spotlight-name">{activeReciter.name}</h3>
                  <div className="quran__spotlight-meta">
                    <span>{activeReciter.en}</span>
                    <span>·</span>
                    <span>{activeReciter.country}</span>
                  </div>
                  <p className="quran__spotlight-note">{activeProfile.note}</p>
                  <div className="quran__spotlight-stats">
                    <span>{activeReciter.surahs} سورة كاملة</span>
                    <span>{activeReciter.country}</span>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.SectionQuran = SectionQuran;