/* global React */
// Hero — wired to i18n

function SectionHero() {
  const i18n = window.__i18n;
  const screens = ["quran", "reciters", "prayer", "azkar", "qibla"];
  const screenMeta = {
    quran: { ar: "قراءة القرآن", en: "Read Quran", icon: "book" },
    reciters: { ar: "القرّاء", en: "Reciters", icon: "wave" },
    prayer: { ar: "مواقيت الصلاة", en: "Prayer Times", icon: "mosque" },
    azkar: { ar: "الأذكار", en: "Azkar", icon: "beads" },
    qibla: { ar: "اتجاه القبلة", en: "Qibla", icon: "compass" },
  };
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx((v) => (v + 1) % screens.length), 3200);
    return () => clearInterval(id);
  }, []);
  const cur = screens[idx];

  return (
    <section className="hero hero--v2">
      <div className="hero__bg" />

      <div className="container hero__wrap">
        <div className="hero__content">
          <Reveal delay={40}>
            <div className="hero__pill">{i18n.t("hero.pill")}</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="hero__title">
              <span className="hero__title-line">
                {i18n.t("hero.title.l1")}
              </span>
              <span className="hero__title-line">
                <span className="accent">{i18n.t("hero.title.l2a")}</span>{" "}
                {i18n.t("hero.title.l2b")}
              </span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <div className="hero__title-en">
              <em>{i18n.t("hero.subtitle")}</em>
            </div>
          </Reveal>
          <Reveal delay={220}>
            <p className="hero__lede">{i18n.t("hero.lede")}</p>
          </Reveal>
          <Reveal delay={300}>
            <div className="hero__cta">
              <StoreButtons />
            </div>
          </Reveal>
          <Reveal delay={380}>
            <div className="hero__meta">
              <div className="hero__meta-item">
                <b>+1M</b>
                <small>{i18n.t("hero.meta.1")}</small>
              </div>
              <div className="hero__meta-item">
                <b>4.9</b>
                <small>
                  <span className="hero__rating">
                    <Stars n={5} size={11} />
                    <span>{i18n.t("hero.meta.2")}</span>
                  </span>
                </small>
              </div>
              <div className="hero__meta-item">
                <b>15</b>
                <small>{i18n.t("hero.meta.3")}</small>
              </div>
            </div>
          </Reveal>
        </div>

        <div className="hero__phones">
          <div className="hero__phone-glow" />
          <div className="hero__phone-ring" aria-hidden="true">
            {screens.map((s, i) => {
              const angle =
                (i / screens.length) * 360 - 90 + idx * (360 / screens.length);
              const isActive = i === idx;
              return (
                <button
                  key={s}
                  className={"hero__orbit" + (isActive ? " is-active" : "")}
                  style={{
                    transform: `rotate(${angle}deg) translate(260px) rotate(${-angle}deg)`,
                  }}
                  onClick={() => setIdx(i)}
                  aria-label={screenMeta[s].en}
                >
                  <Icon name={screenMeta[s].icon} size={18} />
                  <span className="hero__orbit-label">{screenMeta[s].ar}</span>
                </button>
              );
            })}
          </div>
          <div className="hero__phone-stack">
            <img
              src="assets/hand.png"
              alt=""
              className="hero__hand"
              aria-hidden="true"
            />
            <PhoneFrame
              screen={cur}
              rotation={window.TWEAKS.phoneAngle || -4}
            />
          </div>
          <div className="hero__caption">
            <div className="hero__caption-idx">
              {String(idx + 1).padStart(2, "0")}
              <span>/{String(screens.length).padStart(2, "0")}</span>
            </div>
            <div className="hero__caption-text">
              <div className="hero__caption-ar">{screenMeta[cur].ar}</div>
              <div className="hero__caption-en">{screenMeta[cur].en}</div>
            </div>
            <div className="hero__caption-bar">
              <div className="hero__caption-fill" key={idx} />
            </div>
          </div>
        </div>
      </div>

      <div className="hero__scroll" aria-hidden="true">
        <span className="mono">SCROLL</span>
        <span className="hero__scroll-line" />
      </div>
    </section>
  );
}

window.SectionHero = SectionHero;