/* global React */

function getCarouselOffset(index, active, total) {
  let diff = index - active;
  const half = Math.floor(total / 2);
  if (diff > half) diff -= total;
  if (diff < -half) diff += total;
  return diff;
}

function SectionDeepdive() {
  const i18n = window.__i18n;
  const dragRef = useRef({ active: false, startX: 0, moved: false });
  const features = [
    {
      id: "quran",
      labelKey: "dd.tab.quran",
      screen: "quran",
      tone: "emerald",
      title: {
        ar: "اقرأ القرآن كما لم تقرأه من قبل",
        en: "Read the Quran like never before",
        tr: "Kuran'ı hiç olmadığı gibi okuyun",
        fr: "Lisez le Coran comme jamais",
        ur: "قرآن کو اس انداز میں پڑھیں جیسا پہلے نہیں پڑھا",
        id: "Baca Quran seperti belum pernah sebelumnya",
        hi: "क़ुरआन को पहले जैसा कभी नहीं पढ़ा",
      },
      desc: {
        ar: "المصحف الشريف برسم عثماني أصيل، تفاسير معتمدة بنقرة واحدة، علامات مرجعية ذكية، ومزامنة بين أجهزتك.",
        en: "Authentic Uthmani script, certified tafsirs at a tap, smart bookmarks, and cross-device sync.",
        tr: "Osmani hattıyla, tek dokunuşla tefsir, akıllı yer imleri ve cihazlar arası senkron.",
        fr: "Écriture Uthmani authentique, tafsirs en un clic, signets intelligents et synchro multi-appareils.",
        ur: "عثمانی رسم، ایک ٹچ پر مستند تفاسیر، سمارٹ بُک مارک اور آلات کی ہم آہنگی۔",
        id: "Tulisan Utsmani asli, tafsir tepercaya sekali tap, bookmark cerdas, dan sinkron antar perangkat.",
        hi: "उस्मानी लिपि, एक टैप पर तफ़सीर, स्मार्ट बुकमार्क और डिवाइस सिंक।",
      },
      bullets: {
        ar: [
          "١١٤ سورة كاملة برسم عثماني",
          "خمس روايات معتمدة للتفسير",
          "بحث متقدم في الآيات والكلمات",
          "خطوط متعددة وأحجام قابلة للتعديل",
        ],
        en: [
          "114 surahs in Uthmani script",
          "Five certified tafsir traditions",
          "Advanced verse & word search",
          "Multiple fonts and adjustable sizes",
        ],
        tr: [
          "Osmani hattıyla 114 sure",
          "Beş güvenilir tefsir",
          "Gelişmiş ayet ve kelime arama",
          "Çoklu yazı tipi ve boyut ayarı",
        ],
        fr: [
          "114 sourates en écriture Uthmani",
          "Cinq tafsirs reconnus",
          "Recherche avancée par verset/mot",
          "Polices multiples et tailles réglables",
        ],
        ur: [
          "عثمانی رسم میں ۱۱۴ سورتیں",
          "پانچ مستند تفاسیر",
          "آیات اور الفاظ میں جدید تلاش",
          "متعدد فونٹس اور قابلِ ترمیم سائز",
        ],
        id: [
          "114 surat dalam tulisan Utsmani",
          "Lima tafsir tepercaya",
          "Pencarian ayat & kata canggih",
          "Berbagai font dan ukuran disesuaikan",
        ],
        hi: [
          "उस्मानी लिपि में 114 सूरतें",
          "पाँच प्रमाणित तफ़सीर",
          "उन्नत आयत और शब्द खोज",
          "कई फ़ॉन्ट और समायोज्य आकार",
        ],
      },
    },
    {
      id: "audio",
      labelKey: "dd.tab.audio",
      screen: "reciters",
      tone: "ink",
      title: {
        ar: "أصوات القراء بين يديك",
        en: "World-class reciters at your fingertips",
        tr: "Dünya hafızları parmaklarınızın ucunda",
        fr: "Les meilleurs récitateurs à portée de main",
        ur: "بہترین قاریوں کی آوازیں آپ کے ہاتھ میں",
        id: "Qari kelas dunia dalam genggaman",
        hi: "आपकी उंगलियों पर विश्व स्तरीय क़ारी",
      },
      desc: {
        ar: "أكثر من ٣٠ قارئاً عالمياً بجودة صوت عالية، مع إمكانية التكرار والتحميل والاستماع دون إنترنت.",
        en: "30+ world reciters in high quality, with repeat, download, and offline listening.",
        tr: "30+ dünya hafızı, yüksek kalite, tekrar, indirme ve çevrimdışı dinleme.",
        fr: "Plus de 30 récitateurs en haute qualité, avec répétition, téléchargement et écoute hors ligne.",
        ur: "۳۰ سے زائد عالمی قاری اعلیٰ معیار میں، تکرار، ڈاؤن لوڈ اور آف لائن سننا۔",
        id: "30+ qari dunia berkualitas tinggi, dengan pengulangan, unduh, dan dengar offline.",
        hi: "30+ विश्व क़ारी उच्च गुणवत्ता में, दोहराव, डाउनलोड और ऑफलाइन सुनना।",
      },
      bullets: {
        ar: [
          "السديس، العفاسي، المعيقلي، عبدالباسط",
          "تكرار آلي للآيات وتحديد المقاطع",
          "تحميل للاستماع دون إنترنت",
          "تحكم كامل في السرعة والصوت",
        ],
        en: [
          "Sudais, Afasy, Mueaqly, Abdul Basit",
          "Auto-repeat verses and ranges",
          "Download for offline listening",
          "Full speed and volume control",
        ],
        tr: [
          "Sudais, Afasy, Mueaqly, Abdul Basit",
          "Otomatik ayet ve aralık tekrarı",
          "Çevrimdışı için indirme",
          "Tam hız ve ses kontrolü",
        ],
        fr: [
          "Soudais, Afasy, Mueaqly, Abdul Basit",
          "Répétition auto des versets",
          "Téléchargement hors ligne",
          "Contrôle total vitesse et volume",
        ],
        ur: [
          "سدیس، عفاسی، معیقلی، عبدالباسط",
          "آیات اور حصوں کی خودکار تکرار",
          "آف لائن کے لیے ڈاؤن لوڈ",
          "رفتار اور آواز پر مکمل کنٹرول",
        ],
        id: [
          "Sudais, Afasy, Mueaqly, Abdul Basit",
          "Pengulangan otomatis ayat",
          "Unduh untuk offline",
          "Kontrol penuh kecepatan & volume",
        ],
        hi: [
          "सुदैस, अफ़ासी, मुऐक़ली, अब्दुल बासित",
          "स्वचालित आयत दोहराव",
          "ऑफलाइन के लिए डाउनलोड",
          "पूर्ण गति और वॉल्यूम नियंत्रण",
        ],
      },
    },
    {
      id: "prayer",
      labelKey: "dd.tab.prayer",
      screen: "prayer",
      tone: "cream",
      title: {
        ar: "لا تفوّت صلاة بعد اليوم",
        en: "Never miss a prayer again",
        tr: "Bir daha namaz kaçırmayın",
        fr: "Ne manquez plus jamais une prière",
        ur: "اب کوئی نماز نہ چھوٹے",
        id: "Tak pernah lewat salat lagi",
        hi: "अब कोई नमाज़ न छूटे",
      },
      desc: {
        ar: "مواقيت دقيقة تلقائية حسب موقعك، أذان قابل للتخصيص، وتنبيهات قبل كل صلاة.",
        en: "Auto-detected accurate times, customizable adhan, and alerts before each prayer.",
        tr: "Konuma göre hassas vakitler, özelleştirilebilir ezan, namaz öncesi uyarılar.",
        fr: "Heures précises automatiques, adhan personnalisable et alertes.",
        ur: "مقام کے مطابق درست اوقات، قابلِ ترتیب اذان اور انتباہات۔",
        id: "Waktu akurat berdasarkan lokasi, azan kustomisasi, dan peringatan.",
        hi: "स्थान के अनुसार सटीक समय, अनुकूलन योग्य अज़ान और अलर्ट।",
      },
      bullets: {
        ar: [
          "مواقيت دقيقة لأي مكان في العالم",
          "أذان قابل للتخصيص بأصوات متعددة",
          "تنبيهات قبل الصلاة بدقائق محددة",
          "حساب وفق طرق معتمدة عالمياً",
        ],
        en: [
          "Accurate times worldwide",
          "Customizable adhan, multiple voices",
          "Alerts X minutes before prayer",
          "Internationally accepted methods",
        ],
        tr: [
          "Dünya çapında doğru vakitler",
          "Çoklu sesli özelleştirilebilir ezan",
          "Namaz öncesi dakikalı uyarılar",
          "Uluslararası kabul görmüş yöntemler",
        ],
        fr: [
          "Heures précises dans le monde",
          "Adhan personnalisable, plusieurs voix",
          "Alertes X minutes avant",
          "Méthodes reconnues internationalement",
        ],
        ur: [
          "دنیا بھر میں درست اوقات",
          "متعدد آوازوں کے ساتھ قابلِ ترتیب اذان",
          "نماز سے پہلے انتباہات",
          "بین الاقوامی طور پر تسلیم شدہ طریقے",
        ],
        id: [
          "Waktu akurat di seluruh dunia",
          "Azan kustomisasi banyak suara",
          "Peringatan menit sebelum salat",
          "Metode standar internasional",
        ],
        hi: [
          "दुनिया भर में सटीक समय",
          "कई आवाज़ों के साथ अनुकूलन योग्य अज़ान",
          "नमाज़ से पहले अलर्ट",
          "अंतरराष्ट्रीय रूप से स्वीकृत विधियाँ",
        ],
      },
    },
    {
      id: "azkar",
      labelKey: "dd.tab.azkar",
      screen: "azkar",
      tone: "gold",
      title: {
        ar: "حصّن نفسك بأذكار الصباح والمساء",
        en: "Fortify your day with morning & evening azkar",
        tr: "Sabah-akşam zikirleriyle gününüzü güçlendirin",
        fr: "Renforcez votre journée avec les adhkâr",
        ur: "صبح و شام کے اذکار سے اپنے دن کو محفوظ بنائیں",
        id: "Perkuat harimu dengan zikir pagi & petang",
        hi: "सुबह-शाम के अज़कार से अपना दिन मज़बूत करें",
      },
      desc: {
        ar: "مجموعة شاملة من الأذكار من القرآن والسنة، مع عدّاد ذكي يحفظ تقدّمك تلقائياً.",
        en: "A complete azkar collection from Quran and Sunnah, with smart auto-saving counter.",
        tr: "Kuran ve Sünnet'ten kapsamlı zikirler, otomatik kaydeden akıllı sayaç.",
        fr: "Collection complète d'adhkâr du Coran et de la Sunna, avec compteur intelligent.",
        ur: "قرآن و سنت سے مکمل اذکار، خودکار محفوظ کرنے والا سمارٹ کاؤنٹر۔",
        id: "Kumpulan zikir lengkap dari Quran dan Sunnah, penghitung cerdas otomatis.",
        hi: "क़ुरआन और सुन्नत से संपूर्ण अज़कार, स्मार्ट ऑटो-सेव काउंटर।",
      },
      bullets: {
        ar: [
          "أذكار الصباح والمساء كاملة",
          "أدعية من القرآن والسنة",
          "عدّاد ذكي مع حفظ تلقائي",
          "تنبيهات يومية للأذكار",
        ],
        en: [
          "Complete morning & evening azkar",
          "Duas from Quran and Sunnah",
          "Smart counter with auto-save",
          "Daily azkar reminders",
        ],
        tr: [
          "Tam sabah-akşam zikirleri",
          "Kuran ve Sünnet'ten dualar",
          "Otomatik kayıt akıllı sayaç",
          "Günlük zikir hatırlatmaları",
        ],
        fr: [
          "Adhkâr du matin et soir complets",
          "Du'as du Coran et de la Sunna",
          "Compteur auto-sauvegardé",
          "Rappels quotidiens",
        ],
        ur: [
          "مکمل صبح و شام کے اذکار",
          "قرآن و سنت کی دعائیں",
          "خودکار محفوظ کرنے والا کاؤنٹر",
          "روزانہ یاد دہانیاں",
        ],
        id: [
          "Zikir pagi & petang lengkap",
          "Doa dari Quran dan Sunnah",
          "Penghitung dengan auto-save",
          "Pengingat zikir harian",
        ],
        hi: [
          "पूरे सुबह-शाम के अज़कार",
          "क़ुरआन और सुन्नत से दुआएँ",
          "ऑटो-सेव स्मार्ट काउंटर",
          "दैनिक अज़कार रिमाइंडर",
        ],
      },
    },
    {
      id: "qibla",
      labelKey: "dd.tab.qibla",
      screen: "qibla",
      tone: "sage",
      title: {
        ar: "اتجاه القبلة من أي مكان",
        en: "Qibla direction from anywhere",
        tr: "Her yerden kıble yönü",
        fr: "Direction de la Qibla de partout",
        ur: "کہیں سے بھی قبلہ کی سمت",
        id: "Arah kiblat dari mana saja",
        hi: "कहीं से भी क़िबला दिशा",
      },
      desc: {
        ar: "بوصلة رقمية دقيقة تحدد اتجاه الكعبة المشرفة من أي نقطة على الأرض.",
        en: "An accurate digital compass pointing to the Kaaba from any point on Earth.",
        tr: "Yeryüzünün her noktasından Kâbe'yi gösteren hassas dijital pusula.",
        fr: "Boussole numérique précise pointant vers la Ka'ba.",
        ur: "دنیا میں کہیں سے بھی کعبہ کی سمت بتانے والا ڈیجیٹل کمپاس۔",
        id: "Kompas digital akurat menuju Ka'bah dari mana pun.",
        hi: "पृथ्वी पर कहीं से भी काबा की ओर इशारा करने वाला सटीक डिजिटल कम्पास।",
      },
      bullets: {
        ar: [
          "دقة عالية باستخدام GPS",
          "وضع الواقع المعزز للتوجيه",
          "يعمل دون إنترنت",
          "معايرة تلقائية للبوصلة",
        ],
        en: [
          "High precision via GPS",
          "Augmented-reality view",
          "Works without internet",
          "Auto compass calibration",
        ],
        tr: [
          "GPS ile yüksek hassasiyet",
          "Artırılmış gerçeklik görünümü",
          "İnternet olmadan çalışır",
          "Otomatik pusula kalibrasyonu",
        ],
        fr: [
          "Haute précision GPS",
          "Vue en réalité augmentée",
          "Fonctionne hors ligne",
          "Calibration auto",
        ],
        ur: [
          "GPS کے ساتھ اعلیٰ درستگی",
          "آگمنٹڈ ریئلٹی منظر",
          "انٹرنیٹ کے بغیر کام",
          "خودکار کمپاس کیلیبریشن",
        ],
        id: [
          "Presisi tinggi via GPS",
          "Tampilan AR",
          "Bekerja tanpa internet",
          "Kalibrasi kompas otomatis",
        ],
        hi: [
          "GPS के माध्यम से उच्च परिशुद्धता",
          "एआर व्यू",
          "इंटरनेट के बिना काम",
          "स्वचालित कम्पास कैलिब्रेशन",
        ],
      },
    },
  ];

  const [active, setActive] = useState(0);
  const lang = i18n.lang;
  const total = features.length;
  const cur = features[active];
  const highlights = (cur.bullets[lang] || cur.bullets.ar).slice(0, 2);

  useEffect(() => {
    const id = setInterval(() => {
      setActive((v) => (v + 1) % total);
    }, 4600);
    return () => clearInterval(id);
  }, [total]);

  const handleChange = (i) => {
    if (dragRef.current.moved) return;
    if (i === active) return;
    setActive(i);
  };

  const next = () => setActive((v) => (v + 1) % total);
  const prev = () => setActive((v) => (v - 1 + total) % total);

  const handlePointerDown = (e) => {
    dragRef.current.active = true;
    dragRef.current.startX = e.clientX;
    dragRef.current.moved = false;
  };

  const handlePointerMove = (e) => {
    if (!dragRef.current.active) return;
    const delta = e.clientX - dragRef.current.startX;
    if (Math.abs(delta) < 54) return;
    dragRef.current.moved = true;
    dragRef.current.startX = e.clientX;
    if (delta < 0) next();
    else prev();
  };

  const handlePointerEnd = () => {
    dragRef.current.active = false;
    if (!dragRef.current.moved) return;
    window.setTimeout(() => {
      dragRef.current.moved = false;
    }, 0);
  };

  return (
    <section
      id="deepdive"
      className="deepdive deepdive--carousel"
      data-tone={cur.tone}
    >
      <div className="deepdive__bg deepdive__bg--dots" />
      <div className="container">
        <div className="section-head section-head--center deepdive__head">
          <span className="eyebrow eyebrow--gold" style={{ margin: "0 auto" }}>
            {i18n.t("dd.eyebrow")}
          </span>
          <h2 style={{ color: "inherit" }}>{i18n.t("dd.title")}</h2>
        </div>

        <div className="deepdive__preview">
          <div className="deepdive__visual deepdive__visual--carousel">
            <div className="deepdive__halo" />
            <div
              className="deepdive__carousel"
              aria-live="polite"
              onPointerDown={handlePointerDown}
              onPointerMove={handlePointerMove}
              onPointerUp={handlePointerEnd}
              onPointerCancel={handlePointerEnd}
              onPointerLeave={handlePointerEnd}
            >
              {features.map((f, i) => {
                const offset = getCarouselOffset(i, active, total);
                return (
                  <button
                    key={f.id}
                    type="button"
                    className={
                      "deepdive__slide" + (offset === 0 ? " is-active" : "")
                    }
                    data-offset={offset}
                    onClick={() => handleChange(i)}
                    aria-label={i18n.t(f.labelKey)}
                    aria-current={offset === 0 ? "true" : "false"}
                  >
                    <div className="deepdive__slide-phone">
                      <PhoneFrame
                        screen={f.screen}
                        rotation={offset === 0 ? 0 : offset < 0 ? -5 : 5}
                        scale={
                          offset === 0
                            ? 1
                            : Math.abs(offset) === 1
                              ? 0.88
                              : 0.74
                        }
                        toneIndex={i}
                      />
                    </div>
                    <span className="deepdive__slide-label">
                      {i18n.t(f.labelKey)}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          <div className="deepdive__details" key={cur.id}>
            <div className="deepdive__eyebrow">
              {i18n.t("dd.feature")} {String(active + 1).padStart(2, "0")} /{" "}
              {String(total).padStart(2, "0")}
            </div>
            <h3 className="deepdive__title">
              {cur.title[lang] || cur.title.ar}
            </h3>
            <p className="deepdive__desc">{cur.desc[lang] || cur.desc.ar}</p>
            <div className="deepdive__highlights">
              {highlights.map((item, i) => (
                <div key={i} className="deepdive__highlight">
                  <span className="deepdive__highlight-icon">
                    <Icon name="check" size={14} />
                  </span>
                  <span>{item}</span>
                </div>
              ))}
            </div>
            <div className="deepdive__actions">
              <a href="#download" className="btn btn--gold deepdive__cta">
                {i18n.t("dd.try")}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.SectionDeepdive = SectionDeepdive;