<script>
  import PrayerTimes from './lib/PrayerTimes.svelte';
  import Qibla from './lib/Qibla.svelte';
  import Quran from './lib/Quran.svelte';
  import Hijri from './lib/Hijri.svelte';
  import Tasbih from './lib/Tasbih.svelte';
  import Names99 from './lib/Names99.svelte';

  const tabs = ['Prayer', 'Qibla', 'Quran', 'Hijri', 'Tasbih', '99 Names'];
  const icons = ['🕌', '🧭', '📖', '📅', '📿', '💚'];
  let activeTab = $state(0);

  function handleKeydown(e) {
    if (e.key === 'ArrowRight') activeTab = (activeTab + 1) % tabs.length;
    if (e.key === 'ArrowLeft') activeTab = (activeTab - 1 + tabs.length) % tabs.length;
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="app">
  <header>
    <h1>Nūr</h1>
    <span class="subtitle">Muslim Companion</span>
  </header>

  <nav>
    {#each tabs as tab, i}
      <button
        class="tab"
        class:active={activeTab === i}
        onclick={() => activeTab = i}
        aria-label={tab}
      >
        <span class="tab-icon">{icons[i]}</span>
        <span class="tab-label">{tab}</span>
      </button>
    {/each}
  </nav>

  <main>
    {#if activeTab === 0}
      <PrayerTimes />
    {:else if activeTab === 1}
      <Qibla />
    {:else if activeTab === 2}
      <Quran />
    {:else if activeTab === 3}
      <Hijri />
    {:else if activeTab === 4}
      <Tasbih />
    {:else if activeTab === 5}
      <Names99 />
    {/if}
  </main>
</div>

<style>
  :global(*) { box-sizing: border-box; margin: 0; padding: 0; }
  :global(body) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0fdfa;
    color: #134e4a;
    min-height: 100dvh;
    overflow-x: hidden;
  }
  .app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
  }
  header {
    text-align: center;
    padding: 20px 16px 8px;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: white;
    border-radius: 0 0 24px 24px;
  }
  header h1 { font-size: 1.8rem; font-weight: 700; }
  .subtitle { font-size: 0.8rem; opacity: 0.85; }

  nav {
    display: flex;
    gap: 4px;
    padding: 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    flex-wrap: wrap;
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.7rem;
    color: #5b8c85;
    transition: all 0.2s;
    min-width: 56px;
  }
  .tab.active {
    background: #ccfbf1;
    color: #0f766e;
    font-weight: 600;
  }
  .tab-icon { font-size: 1.3rem; }
  .tab-label { white-space: nowrap; }

  main {
    flex: 1;
    padding: 0 12px 16px;
  }

  :global(.card) {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(15, 118, 110, 0.08);
  }
  :global(.card h2) {
    font-size: 1rem;
    color: #0f766e;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  :global(button.primary) {
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
  }
  :global(button.primary:active) { opacity: 0.85; }
</style>
