<script>
  const names = [
    { no: 1,  ar: 'الرَّحْمَنُ', en: 'Ar-Rahman', meaning: 'The Most Merciful' },
    { no: 2,  ar: 'الرَّحِيمُ', en: 'Ar-Raheem', meaning: 'The Most Compassionate' },
    { no: 3,  ar: 'الْمَلِكُ', en: 'Al-Malik', meaning: 'The King' },
    { no: 4,  ar: 'الْقُدُّوسُ', en: 'Al-Quddus', meaning: 'The Most Holy' },
    { no: 5,  ar: 'السَّلَامُ', en: 'As-Salam', meaning: 'The Source of Peace' },
    { no: 6,  ar: 'الْمُؤْمِنُ', en: "Al-Mu'min", meaning: 'The Guardian of Faith' },
    { no: 7,  ar: 'الْمُهَيْمِنُ', en: 'Al-Muhaymin', meaning: 'The Protector' },
    { no: 8,  ar: 'الْعَزِيزُ', en: 'Al-Aziz', meaning: 'The Almighty' },
    { no: 9,  ar: 'الْجَبَّارُ', en: 'Al-Jabbar', meaning: 'The Compeller' },
    { no: 10, ar: 'الْمُتَكَبِّرُ', en: 'Al-Mutakabbir', meaning: 'The Supreme' },
    { no: 11, ar: 'الْخَالِقُ', en: 'Al-Khaliq', meaning: 'The Creator' },
    { no: 12, ar: 'الْبَارِئُ', en: 'Al-Bari', meaning: 'The Maker' },
    { no: 13, ar: 'الْمُصَوِّرُ', en: 'Al-Musawwir', meaning: 'The Fashioner' },
    { no: 14, ar: 'الْغَفَّارُ', en: 'Al-Ghaffar', meaning: 'The Forgiving' },
    { no: 15, ar: 'الْقَهَّارُ', en: 'Al-Qahhar', meaning: 'The Subduer' },
    { no: 16, ar: 'الْوَهَّابُ', en: 'Al-Wahhab', meaning: 'The Bestower' },
    { no: 17, ar: 'الرَّزَّاقُ', en: 'Ar-Razzaq', meaning: 'The Provider' },
    { no: 18, ar: 'الْفَتَّاحُ', en: 'Al-Fattah', meaning: 'The Opener' },
    { no: 19, ar: 'الْعَلِيمُ', en: "Al-'Aleem", meaning: 'The All-Knowing' },
    { no: 20, ar: 'الْقَابِضُ', en: 'Al-Qabid', meaning: 'The Constrictor' },
    { no: 21, ar: 'الْبَاسِطُ', en: 'Al-Basit', meaning: 'The Expander' },
    { no: 22, ar: 'الْخَافِضُ', en: 'Al-Khafid', meaning: 'The Abaser' },
    { no: 23, ar: 'الرَّافِعُ', en: 'Ar-Rafi', meaning: 'The Exalter' },
    { no: 24, ar: 'الْمُعِزُّ', en: "Al-Mu'izz", meaning: 'The Bestower of Honor' },
    { no: 25, ar: 'الْمُذِلُّ', en: 'Al-Mudhill', meaning: 'The Humiliator' },
    { no: 26, ar: 'السَّمِيعُ', en: 'As-Sami', meaning: 'The All-Hearing' },
    { no: 27, ar: 'الْبَصِيرُ', en: 'Al-Basir', meaning: 'The All-Seeing' },
    { no: 28, ar: 'الْحَكَمُ', en: 'Al-Hakam', meaning: 'The Judge' },
    { no: 29, ar: 'الْعَدْلُ', en: "Al-'Adl", meaning: 'The Just' },
    { no: 30, ar: 'اللَّطِيفُ', en: 'Al-Latif', meaning: 'The Subtle One' },
    { no: 31, ar: 'الْخَبِيرُ', en: 'Al-Khabir', meaning: 'The All-Aware' },
    { no: 32, ar: 'الْحَلِيمُ', en: 'Al-Halim', meaning: 'The Forbearing' },
    { no: 33, ar: 'الْعَظِيمُ', en: "Al-'Azim", meaning: 'The Magnificent' },
    { no: 34, ar: 'الْغَفُورُ', en: 'Al-Ghafur', meaning: 'The All-Forgiving' },
    { no: 35, ar: 'الشَّكُورُ', en: 'Ash-Shakur', meaning: 'The Appreciative' },
    { no: 36, ar: 'الْعَلِيُّ', en: "Al-'Aliyy", meaning: 'The Most High' },
    { no: 37, ar: 'الْكَبِيرُ', en: 'Al-Kabir', meaning: 'The Most Great' },
    { no: 38, ar: 'الْحَفِيظُ', en: 'Al-Hafiz', meaning: 'The Preserver' },
    { no: 39, ar: 'الْمُقِيتُ', en: 'Al-Muqit', meaning: 'The Sustainer' },
    { no: 40, ar: 'الْحَسِيبُ', en: 'Al-Hasib', meaning: 'The Reckoner' },
    { no: 41, ar: 'الْجَلِيلُ', en: 'Al-Jalil', meaning: 'The Majestic' },
    { no: 42, ar: 'الْكَرِيمُ', en: 'Al-Karim', meaning: 'The Generous' },
    { no: 43, ar: 'الرَّقِيبُ', en: 'Ar-Raqib', meaning: 'The Watchful' },
    { no: 44, ar: 'الْمُجِيبُ', en: 'Al-Mujib', meaning: 'The Responsive' },
    { no: 45, ar: 'الْوَاسِعُ', en: 'Al-Wasi', meaning: 'The All-Encompassing' },
    { no: 46, ar: 'الْحَكِيمُ', en: 'Al-Hakim', meaning: 'The All-Wise' },
    { no: 47, ar: 'الْوَدُودُ', en: 'Al-Wadud', meaning: 'The Loving' },
    { no: 48, ar: 'الْمَجِيدُ', en: 'Al-Majid', meaning: 'The Glorious' },
    { no: 49, ar: 'الْبَاعِثُ', en: "Al-Ba'ith", meaning: 'The Resurrector' },
    { no: 50, ar: 'الشَّهِيدُ', en: 'Ash-Shahid', meaning: 'The Witness' },
    { no: 51, ar: 'الْحَقُّ', en: 'Al-Haqq', meaning: 'The Truth' },
    { no: 52, ar: 'الْوَكِيلُ', en: 'Al-Wakil', meaning: 'The Trustee' },
    { no: 53, ar: 'الْقَوِيُّ', en: 'Al-Qawiyy', meaning: 'The Most Strong' },
    { no: 54, ar: 'الْمَتِينُ', en: 'Al-Matin', meaning: 'The Firm' },
    { no: 55, ar: 'الْوَلِيُّ', en: 'Al-Waliyy', meaning: 'The Protecting Friend' },
    { no: 56, ar: 'الْحَمِيدُ', en: 'Al-Hamid', meaning: 'The Praiseworthy' },
    { no: 57, ar: 'الْمُحْصِي', en: 'Al-Muhsi', meaning: 'The Reckoner' },
    { no: 58, ar: 'الْمُبْدِئُ', en: 'Al-Mubdi', meaning: 'The Originator' },
    { no: 59, ar: 'الْمُعِيدُ', en: "Al-Mu'id", meaning: 'The Restorer' },
    { no: 60, ar: 'الْمُحْيِي', en: 'Al-Muhyi', meaning: 'The Giver of Life' },
    { no: 61, ar: 'الْمُمِيتُ', en: 'Al-Mumit', meaning: 'The Taker of Life' },
    { no: 62, ar: 'الْحَيُّ', en: 'Al-Hayy', meaning: 'The Ever-Living' },
    { no: 63, ar: 'الْقَيُّومُ', en: 'Al-Qayyum', meaning: 'The Sustainer' },
    { no: 64, ar: 'الْوَاجِدُ', en: 'Al-Wajid', meaning: 'The Finder' },
    { no: 65, ar: 'الْمَاجِدُ', en: 'Al-Majid', meaning: 'The Noble' },
    { no: 66, ar: 'الْوَاحِدُ', en: 'Al-Wahid', meaning: 'The One' },
    { no: 67, ar: 'الْأَحَدُ', en: 'Al-Ahad', meaning: 'The Unique' },
    { no: 68, ar: 'الصَّمَدُ', en: 'As-Samad', meaning: 'The Eternal' },
    { no: 69, ar: 'الْقَادِرُ', en: 'Al-Qadir', meaning: 'The Able' },
    { no: 70, ar: 'الْمُقْتَدِرُ', en: 'Al-Muqtadir', meaning: 'The Omnipotent' },
    { no: 71, ar: 'الْمُقَدِّمُ', en: 'Al-Muqaddim', meaning: 'The Advancer' },
    { no: 72, ar: 'الْمُؤَخِّرُ', en: "Al-Mu'akhkhir", meaning: 'The Delayer' },
    { no: 73, ar: 'الْأَوَّلُ', en: 'Al-Awwal', meaning: 'The First' },
    { no: 74, ar: 'الْآخِرُ', en: 'Al-Akhir', meaning: 'The Last' },
    { no: 75, ar: 'الظَّاهِرُ', en: 'Az-Zahir', meaning: 'The Manifest' },
    { no: 76, ar: 'الْبَاطِنُ', en: 'Al-Batin', meaning: 'The Hidden' },
    { no: 77, ar: 'الْوَالِي', en: 'Al-Wali', meaning: 'The Governor' },
    { no: 78, ar: 'الْمُتَعَالِي', en: "Al-Muta'ali", meaning: 'The Most Exalted' },
    { no: 79, ar: 'الْبَرُّ', en: 'Al-Barr', meaning: 'The Source of Goodness' },
    { no: 80, ar: 'التَّوَّابُ', en: 'At-Tawwab', meaning: 'The Acceptor of Repentance' },
    { no: 81, ar: 'الْمُنْتَقِمُ', en: 'Al-Muntaqim', meaning: 'The Avenger' },
    { no: 82, ar: 'الْعَفُوُّ', en: "Al-'Afuww", meaning: 'The Pardoner' },
    { no: 83, ar: 'الرَّؤُوفُ', en: "Ar-Ra'uf", meaning: 'The Kind' },
    { no: 84, ar: 'مَالِكُ الْمُلْكِ', en: 'Malik-ul-Mulk', meaning: 'Master of the Kingdom' },
    { no: 85, ar: 'ذُو الْجَلَالِ وَالْإِكْرَامِ', en: 'Dhul-Jalal wal-Ikram', meaning: 'Lord of Majesty & Honor' },
    { no: 86, ar: 'الْمُقْسِطُ', en: 'Al-Muqsit', meaning: 'The Equitable' },
    { no: 87, ar: 'الْجَامِعُ', en: 'Al-Jami', meaning: 'The Gatherer' },
    { no: 88, ar: 'الْغَنِيُّ', en: 'Al-Ghaniyy', meaning: 'The Self-Sufficient' },
    { no: 89, ar: 'الْمُغْنِي', en: 'Al-Mughni', meaning: 'The Enricher' },
    { no: 90, ar: 'الْمَانِعُ', en: 'Al-Mani', meaning: 'The Preventer' },
    { no: 91, ar: 'الضَّارُّ', en: 'Ad-Darr', meaning: 'The Afflictor' },
    { no: 92, ar: 'النَّافِعُ', en: 'An-Nafi', meaning: 'The Benefactor' },
    { no: 93, ar: 'النُّورُ', en: 'An-Nur', meaning: 'The Light' },
    { no: 94, ar: 'الْهَادِي', en: 'Al-Hadi', meaning: 'The Guide' },
    { no: 95, ar: 'الْبَدِيعُ', en: 'Al-Badi', meaning: 'The Originator' },
    { no: 96, ar: 'الْبَاقِي', en: 'Al-Baqi', meaning: 'The Everlasting' },
    { no: 97, ar: 'الْوَارِثُ', en: 'Al-Warith', meaning: 'The Inheritor' },
    { no: 98, ar: 'الرَّشِيدُ', en: 'Ar-Rashid', meaning: 'The Righteous Guide' },
    { no: 99, ar: 'الصَّبُورُ', en: 'As-Sabur', meaning: 'The Patient' },
  ];

  let search = $state('');
  let expanded = $state(null);

  const filtered = $derived(
    search.trim()
      ? names.filter(n => n.en.toLowerCase().includes(search.toLowerCase()) || n.meaning.toLowerCase().includes(search.toLowerCase()) || n.ar.includes(search))
      : names
  );
</script>

<div class="card">
  <h2>💚 99 Names of Allah</h2>

  <input
    class="search-input"
    type="search"
    placeholder="Search names…"
    bind:value={search}
  />

  <div class="names-grid">
    {#each filtered as n}
      <button
        class="name-card"
        class:expanded={expanded === n.no}
        onclick={() => expanded = expanded === n.no ? null : n.no}
      >
        <span class="name-no">{n.no}</span>
        <div class="name-body">
          <span class="name-ar">{n.ar}</span>
          <span class="name-en">{n.en}</span>
          {#if expanded === n.no}
            <span class="name-meaning">{n.meaning}</span>
          {/if}
        </div>
      </button>
    {/each}
  </div>
</div>

<style>
  .search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #99d6c9;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: #134e4a;
    outline: none;
  }
  .search-input:focus { border-color: #0f766e; }
  .names-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 55vh;
    overflow-y: auto;
  }
  .name-card {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    background: #f0fdfa;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    align-items: center;
    transition: background 0.15s;
  }
  .name-card:active { background: #ccfbf1; }
  .name-no {
    background: #0f766e;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .name-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .name-ar {
    font-size: 1rem;
    color: #134e4a;
    font-weight: 600;
    direction: rtl;
    text-align: right;
  }
  .name-en { font-size: 0.8rem; color: #0f766e; font-weight: 500; }
  .name-meaning { font-size: 0.75rem; color: #5b8c85; margin-top: 2px; }
</style>
