/* global React */

const FEATURES = [
  { id: "quran", num: "01", icon: "book", tone: "emerald",
    titleKey: "feat.quran.title", descKey: "feat.quran.desc",
    statKey: "feat.quran.stat", lottie: "https://lottie.host/4d42d6d9-1f2e-4f54-b5b8-9f2c6e0a3a3a/0X1cVdQR7Z.lottie" },
  { id: "audio", num: "02", icon: "wave", tone: "gold",
    titleKey: "feat.audio.title", descKey: "feat.audio.desc",
    statKey: "feat.audio.stat" },
  { id: "prayer", num: "03", icon: "mosque", tone: "ink",
    titleKey: "feat.prayer.title", descKey: "feat.prayer.desc",
    statKey: "feat.prayer.stat" },
  { id: "qibla", num: "04", icon: "compass", tone: "sage",
    titleKey: "feat.qibla.title", descKey: "feat.qibla.desc",
    statKey: "feat.qibla.stat" },
  { id: "azkar", num: "05", icon: "beads", tone: "cream",
    titleKey: "feat.azkar.title", descKey: "feat.azkar.desc",
    statKey: "feat.azkar.stat" },
  { id: "tafsir", num: "06", icon: "quill", tone: "emerald",
    titleKey: "feat.tafsir.title", descKey: "feat.tafsir.desc",
    statKey: "feat.tafsir.stat" },
];

function FeatureViz({ id }) {
  // Custom inline visualizations per feature — feels designed, not slop
  if (id === "quran") {
    return (
      <div className="fv fv--quran">
        <div className="fv__bg-arabesque" aria-hidden="true">
          <svg viewBox="0 0 200 200" width="100%" height="100%">
            <defs>
              <pattern id="arab" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M20 0 L40 20 L20 40 L0 20 Z" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.4"/>
                <circle cx="20" cy="20" r="6" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.6"/>
              </pattern>
            </defs>
            <rect width="200" height="200" fill="url(#arab)"/>
          </svg>
        </div>
        <div className="fv__quran-text">
          ﷽
          <div className="fv__quran-verse">الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</div>
          <div className="fv__quran-meta">سورة الفاتحة · آية ١</div>
        </div>
      </div>
    );
  }
  if (id === "audio") {
    return (
      <div className="fv fv--audio">
        <div className="fv__reciter">
          <div className="fv__reciter-avatar">السديس</div>
          <div className="fv__reciter-meta">
            <div className="fv__reciter-name">عبدالرحمن السديس</div>
            <div className="fv__reciter-sub">إمام الحرم المكي</div>
          </div>
          <button className="fv__reciter-play" aria-label="Play"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
        </div>
        <div className="fv__wave">
          {[8,14,22,30,40,55,68,78,72,60,50,40,32,22,14,8,12,20,30,42,55,38,22,15].map((h, i) => (
            <span key={i} style={{height: h + "%", animationDelay: (i * 0.06) + "s"}}/>
          ))}
        </div>
        <div className="fv__audio-track">
          <div className="fv__audio-time">٠٠:٤٢</div>
          <div className="fv__audio-bar"><span/></div>
          <div className="fv__audio-time">٠٢:١٨</div>
        </div>
      </div>
    );
  }
  if (id === "prayer") {
    return (
      <div className="fv fv--prayer">
        <div className="fv__prayer-clock">
          <svg viewBox="0 0 100 100" width="100%" height="100%">
            <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
            <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.2"/>
            {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => {
              const a = (i / 12) * Math.PI * 2 - Math.PI/2;
              return <circle key={i} cx={50 + Math.cos(a)*43} cy={50 + Math.sin(a)*43} r="1" fill="currentColor" opacity={i % 3 === 0 ? 1 : 0.4}/>;
            })}
            <line x1="50" y1="50" x2="50" y2="20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            <line x1="50" y1="50" x2="68" y2="50" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.7"/>
          </svg>
        </div>
        <div className="fv__prayer-list">
          <div><span>الفجر</span><time>٠٤:٤٢</time></div>
          <div><span>الشروق</span><time>٠٦:١٨</time></div>
          <div className="is-next"><span>الظهر</span><time>١٢:١٧ <em>—  الآن</em></time></div>
          <div><span>العصر</span><time>١٥:٤٣</time></div>
          <div><span>المغرب</span><time>١٨:٢٤</time></div>
          <div><span>العشاء</span><time>١٩:٥١</time></div>
        </div>
      </div>
    );
  }
  if (id === "qibla") {
    return (
      <div className="fv fv--qibla">
        <div className="fv__qibla-compass">
          <svg viewBox="0 0 200 200" width="100%" height="100%">
            <circle cx="100" cy="100" r="90" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
            <circle cx="100" cy="100" r="78" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.5" strokeDasharray="2 4"/>
            {[..."NESW"].map((dir, i) => {
              const a = (i / 4) * Math.PI * 2 - Math.PI/2;
              return <text key={i} x={100 + Math.cos(a)*70} y={100 + Math.sin(a)*70 + 4} textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.6" fontFamily="var(--ff-en-ui)">{dir}</text>;
            })}
            {Array.from({length: 36}).map((_, i) => {
              const a = (i / 36) * Math.PI * 2;
              const x1 = 100 + Math.cos(a)*82, y1 = 100 + Math.sin(a)*82;
              const x2 = 100 + Math.cos(a)*88, y2 = 100 + Math.sin(a)*88;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="currentColor" strokeWidth={i % 9 === 0 ? 1.5 : 0.5} opacity="0.5"/>;
            })}
            <g className="fv__qibla-needle">
              <path d="M100 30 L106 100 L100 105 L94 100 Z" fill="currentColor"/>
              <path d="M100 170 L106 100 L100 95 L94 100 Z" fill="currentColor" opacity="0.3"/>
            </g>
            <circle cx="100" cy="100" r="6" fill="currentColor"/>
            <text x="100" y="22" textAnchor="middle" fontSize="14" fontWeight="700" fill="currentColor" fontFamily="var(--ff-ar-display)">القبلة</text>
          </svg>
        </div>
        <div className="fv__qibla-coord">
          <div><b>21° 25' N</b><small>Lat</small></div>
          <div><b>39° 49' E</b><small>Lng</small></div>
          <div><b>247°</b><small>Bearing</small></div>
        </div>
      </div>
    );
  }
  if (id === "azkar") {
    return (
      <div className="fv fv--azkar">
        <div className="fv__azkar-card">
          <div className="fv__azkar-label">ذكر · ١ من ٣٣</div>
          <div className="fv__azkar-text">سُبْحَانَ اللهِ وَبِحَمْدِهِ</div>
          <div className="fv__azkar-counter">
            <div className="fv__azkar-num">٢٤</div>
            <div className="fv__azkar-bar"><span style={{width: "73%"}}/></div>
            <div className="fv__azkar-target">/ ٣٣</div>
          </div>
        </div>
        <div className="fv__azkar-beads">
          {Array.from({length: 33}).map((_, i) => (
            <span key={i} className={i < 24 ? "is-on" : ""} style={{animationDelay: (i*0.04) + "s"}}/>
          ))}
        </div>
      </div>
    );
  }
  if (id === "tafsir") {
    return (
      <div className="fv fv--tafsir">
        <div className="fv__tafsir-quote">إِنَّ مَعَ ٱلْعُسْرِ يُسْرًا</div>
        <div className="fv__tafsir-sources">
          <div><b>ابن كثير</b><span>قال: "العسر مع اليسر"</span></div>
          <div><b>السعدي</b><span>"اليسر يصاحب العسر"</span></div>
          <div className="is-active"><b>الطبري</b><span>"إن مع الشدة رخاء"</span></div>
          <div><b>الميسر</b><span>"بشارة بزوال الكرب"</span></div>
        </div>
      </div>
    );
  }
  return null;
}

function SectionFeatures() {
  const i18n = window.__i18n;
  const lang = i18n.lang;
  return (
    <section id="features" className="features-v2">
      <div className="features-v2__grain"/>
      <div className="container">
        <div className="features-v2__head">
          <div>
            <span className="eyebrow eyebrow--gold">{i18n.t("feat.eyebrow")}</span>
            <h2 className="features-v2__title">
              <span>{i18n.t("feat.title.l1")}</span>
              <em>{i18n.t("feat.title.l2")}</em>
            </h2>
          </div>
          <p className="features-v2__lede">{i18n.t("feat.lede")}</p>
        </div>

        <div className="features-v2__chapters">
          {FEATURES.map((f, i) => (
            <article key={f.id} className={"chapter chapter--" + f.tone} style={{"--i": i}}>
              <div className="chapter__num">{f.num}</div>
              <div className="chapter__media">
                <FeatureViz id={f.id}/>
                <div className="chapter__media-corner">
                  <Icon name={f.icon} size={20}/>
                </div>
              </div>
              <div className="chapter__body">
                <div className="chapter__meta">
                  <span className="chapter__chip">{i18n.t("feat." + f.id + ".chip")}</span>
                </div>
                <h3 className="chapter__title">{i18n.t(f.titleKey)}</h3>
                <p className="chapter__desc">{i18n.t(f.descKey)}</p>
                <div className="chapter__stat">
                  <b>{i18n.t("feat." + f.id + ".stat.num")}</b>
                  <span>{i18n.t("feat." + f.id + ".stat.label")}</span>
                </div>
                <a href="#deepdive" className="chapter__link">
                  {i18n.t("feat.learn")}
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d={i18n.isRTL ? "M14 6l-6 6 6 6" : "M10 6l6 6-6 6"}/></svg>
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SectionFeatures = SectionFeatures;