<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>
    <div class="header-top">
      <div class="brand">
        <span class="brand-name">Nur</span><span class="brand-accent">Falah</span>
        <span class="brand-tag">Muslim Companion</span>
      </div>
      <div class="geo-line"></div>
    </div>
  </header>

  <nav class="tab-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>

  <footer class="footer">
    <p class="footer-text">Built with <span class="gold">Falah OS</span> · Sovereign Digital Economy</p>
  </footer>
</div>

<style>
  :global(*) { box-sizing: border-box; margin: 0; padding: 0; }
  
  :global(body) {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    overflow-x: hidden;
  }

  /* Noise overlay */
  :global(body)::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4;
  }

  /* Geometric background */
  :global(body)::after {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 90% 80%, rgba(46,204,113,0.04) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at -10% 50%, rgba(201,168,76,0.03) 0%, transparent 50%);
    pointer-events: none;
  }

  .app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
  }

  header {
    padding: 20px 16px 8px;
    background: rgba(7,10,13,0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 24px 24px;
  }

  .header-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .brand-name {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--text);
    line-height: 1;
  }

  .brand-accent {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--gold);
    line-height: 1;
  }

  .brand-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
  }

  .geo-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--green), var(--gold), transparent);
    opacity: 0.6;
  }

  .tab-nav {
    display: flex;
    gap: 4px;
    padding: 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(12,17,23,0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 24px 24px;
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: all 0.2s;
    min-width: 56px;
  }

  .tab:hover { color: var(--gold); }
  
  .tab.active {
    color: var(--gold);
    background: var(--gold-dim);
  }
  
  .tab.active .tab-icon { color: var(--gold); }

  .tab-icon { font-size: 1.3rem; transition: color 0.2s; }
  .tab-label { white-space: nowrap; }

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

  :global(.card) {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 
      0 4px 20px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(201,168,76,0.05);
  }
  
  :global(.card h2) {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  :global(button.primary) {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--bg);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }
  
  :global(button.primary:hover) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201,168,76,0.3);
  }
  
  :global(button.primary:active) { transform: translateY(0); }

  :global(button.secondary) {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 10px 20px;
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(232,228,220,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  :global(button.secondary:hover) {
    border-color: var(--gold);
    color: var(--gold);
  }

  .footer {
    padding: 16px 12px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: rgba(12,17,23,0.8);
    backdrop-filter: blur(20px);
    margin-top: auto;
  }

  .footer-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .gold { color: var(--gold); }
  .green { color: var(--green); }
</style>