/* global React */

function SectionPrayer() {
  const qibla = 33;

  return (
    <section className="section prayer">
      <div className="container">
        <div className="prayer__grid">
          <Reveal>
            <div className="prayer-card">
              <div className="prayer-card__head">
                <div className="prayer-card__date">
                  <div className="prayer-card__hijri">١٥ رمضان ١٤٤٦</div>
                  <div className="prayer-card__greg">March 15, 2025</div>
                </div>
                <div className="prayer-card__location">
                  <Icon name="location" size={12}/> مكة المكرمة
                </div>
              </div>
              <div className="prayer-card__next">
                <div className="prayer-card__next-label">Next Prayer</div>
                <div className="prayer-card__next-name">العصر</div>
                <div className="prayer-card__next-time">15:43</div>
                <div className="prayer-card__next-count">بعد ٢ ساعة و ١٤ دقيقة · in 2h 14m</div>
              </div>
              <div className="prayer-list">
                {PRAYERS.map((p, idx) => (
                  <div key={p.en} className={"prayer-row" + (idx === 3 ? " is-next" : "") + (idx < 3 ? " is-past" : "")}>
                    <span className="prayer-row__icon"><Icon name={p.icon} size={20}/></span>
                    <span className="prayer-row__name">{p.name}</span>
                    <span className="prayer-row__time">{p.time}</span>
                    <span className="prayer-row__status">{idx < 3 ? "صُلّيت" : idx === 3 ? "القادمة" : "—"}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="prayer__intro">
              <div className="eyebrow">Prayer & Qibla · الصلاة والقبلة</div>
              <h2 className="prayer__title">
                مواقيت دقيقة<br/>واتجاه القبلة من أي مكان
              </h2>
              <p className="prayer__lede">
                مواقيت الصلاة حسب موقعك الجغرافي بدقة عالية، تنبيهات ذكية قبل كل صلاة،
                بوصلة قبلة فورية، وتقويم هجري كامل.
              </p>

              <div className="qibla" style={{ "--q": `${qibla}deg` }}>
                <div className="qibla__ring"/>
                <span className="qibla__marker qibla__marker--n">N</span>
                <span className="qibla__marker qibla__marker--s">S</span>
                <span className="qibla__marker qibla__marker--e">E</span>
                <span className="qibla__marker qibla__marker--w">W</span>
                <div className="qibla__needle"/>
                <div className="qibla__hub"/>
                <div className="qibla__kaaba-wrap">
                  <div className="qibla__kaaba">🕋</div>
                </div>
              </div>
              <div className="prayer__direction">
                {Math.round(qibla)}° from North · ٦٧ كم إلى الكعبة المشرفة
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.SectionPrayer = SectionPrayer;