---
import BaseLayout from '../../layouts/BaseLayout.astro'
import CasinoTable from '../../components/CasinoTable.astro'
import Breadcrumbs from '../../components/Breadcrumbs.astro'
import SchemaOrg from '../../components/SchemaOrg.astro'
import WhoIsFor from '../../components/WhoIsFor.astro'
import { getDb, type Casino } from '../../lib/db'

const { slug } = Astro.params
const db = getDb()

const category = db.prepare('SELECT * FROM categories WHERE slug = ? AND active = 1').get(slug) as {
  slug: string; name_sv: string; description_sv: string | null; meta_title: string | null; meta_desc: string | null
} | undefined

if (!category) return Astro.redirect('/kategorier/', 302)

const casinos = db.prepare(`
  SELECT c.* FROM casinos c, json_each(c.categories)
  WHERE json_each.value = ? AND c.active = 1
  ORDER BY c.rating DESC
`).all(slug) as Casino[]

// Get related categories for cross-linking
const allCats = db.prepare(`SELECT slug, name_sv FROM categories WHERE active = 1 AND slug != ?`).all(slug) as { slug: string; name_sv: string }[]
const relatedCats = allCats.slice(0, 3)

const faqMap: Record<string, { question: string; answer: string }[]> = {
  'snabba-uttag': [
    { question: 'Hur snabba är de snabbaste uttagen i Sverige?', answer: 'Med Pay N Play via Trustly kan uttag gå på 0-60 minuter. GogoCasino, Speedy Casino och Snabbare är kända för snabbast utbetalning.' },
    { question: 'Varför tar uttag tid?', answer: 'KYC-kontroller (identitetsverifiering) kan fördröja uttag. Med Pay N Play är du redan verifierad via BankID och slipper detta.' },
    { question: 'Finns det casinon som betalar ut på minuter?', answer: 'Ja. GogoCasino och Speedy Casino – båda med Pay N Play – rapporterar uttag på 5-30 minuter för de flesta banker.' },
  ],
  'ingen-registrering': [
    { question: 'Vad är casino utan registrering?', answer: 'Pay N Play-casino där du identifieras via BankID och Trustly utan att fylla i formulär. Du sätter in, spelar och tar ut – allt via din bank.' },
    { question: 'Är casino utan registrering säkert?', answer: 'Ja. Identifiering sker via BankID (säkrare än lösenord). Alla seriösa Pay N Play-casinon i Sverige har SGA-licens.' },
    { question: 'Vilka casinon har Pay N Play?', answer: 'GogoCasino, Speedy Casino och Ninja Casino är de mest kända. Alla med SGA-licens.' },
  ],
  'live-kasino': [
    { question: 'Vad är live casino?', answer: 'Live casino streamas i realtid med riktiga dealers. Du kan spela roulette, blackjack, baccarat och spelshow-spel.' },
    { question: 'Vilka spel finns i live casino?', answer: 'Roulette, blackjack, baccarat, poker, Crazy Time, Deal or No Deal och hundratals andra.' },
    { question: 'Vilket är bästa live casino i Sverige?', answer: 'LeoVegas och Betsson har de bästa live casino-utbuden med Evolution Gaming som leverantör.' },
  ],
}

const faqItems = faqMap[slug ?? ''] ?? [
  { question: `Vad är ${category.name_sv}?`, answer: category.description_sv ?? '' },
]

const whoIsForMap: Record<string, { forItems: string[]; notForItems: string[] }> = {
  'snabba-uttag': {
    forItems: ['Spelare som vill ta ut pengar samma dag', 'Pay N Play-användare', 'Dig som hatar att vänta'],
    notForItems: ['Spelare som prioriterar bonusar framför snabbhet', 'Spelare som inte bryr sig om uttagstid'],
  },
  'ingen-registrering': {
    forItems: ['Spelare som hatar registreringsformulär', 'Dig med BankID-verifiering', 'Integritetsmåna spelare'],
    notForItems: ['Spelare som vill ha traditionell välkomstbonus', 'Utan BankID-möjlighet'],
  },
  'live-kasino': {
    forItems: ['Bordsspelsentusiaster', 'Spelare som vill ha casino-atmosfär hemifrån', 'Blackjack- och roulette-spelare'],
    notForItems: ['Slot-spelare', 'Spelare som söker snabba snurr utan socialt spel'],
  },
}

const whoIsFor = whoIsForMap[slug ?? ''] ?? {
  forItems: ['Spelare som söker specifikt detta erbjudande'],
  notForItems: ['Spelare med andra prioriteringar'],
}
---

<BaseLayout
  title={category.meta_title ?? `${category.name_sv} Casino 2026 | casinoguidese.com`}
  description={category.meta_desc ?? `De bästa casinona med ${category.name_sv} i Sverige 2026.`}
  canonical={`/kategorier/${slug}/`}
>
  <SchemaOrg type="FAQ" items={faqItems} />

  <div class="container py-6 md:py-10">
    <Breadcrumbs items={[{ name: 'Kategorier', href: '/kategorier/' }, { name: category.name_sv }]} />

    <header class="mb-6">
      <h1 class="font-heading font-bold text-3xl md:text-4xl text-[#F0F4FF] mb-3">{category.name_sv} Casino 2026</h1>
      {category.description_sv && (
        <p class="text-[#8BA3C7] text-lg max-w-2xl">{category.description_sv}</p>
      )}
    </header>

    <!-- Above-fold: first row of table + CTA is visible immediately -->
    {casinos.length > 0 ? (
      <CasinoTable {casinos} pageSrc={slug} pageType="category" />
    ) : (
      <p class="text-muted">Inga casinon i denna kategori ännu.</p>
    )}

    <WhoIsFor forItems={whoIsFor.forItems} notForItems={whoIsFor.notForItems} />

    <!-- FAQ -->
    {faqItems.length > 0 && (
      <section class="mt-10">
        <h2 class="font-heading font-bold text-2xl text-[#F0F4FF] mb-6">Vanliga frågor om {category.name_sv}</h2>
        <div class="space-y-4 max-w-3xl">
          {faqItems.map(item => (
            <details class="card p-4 group">
              <summary class="font-semibold text-[#F0F4FF] cursor-pointer list-none flex items-center justify-between gap-3">
                {item.question}
                <span class="text-[#8BA3C7] group-open:rotate-180 transition-transform flex-shrink-0">▼</span>
              </summary>
              <p class="text-[#8BA3C7] text-sm mt-3">{item.answer}</p>
            </details>
          ))}
        </div>
      </section>
    )}

    <!-- Cross-links to related categories -->
    {relatedCats.length > 0 && (
      <div class="mt-10">
        <h3 class="font-semibold text-[#F0F4FF] mb-3">Liknande kategorier</h3>
        <div class="flex flex-wrap gap-2">
          {relatedCats.map(cat => (
            <a href={`/kategorier/${cat.slug}/`} class="btn-secondary text-sm no-underline">
              {cat.name_sv}
            </a>
          ))}
          <a href="/kategorier/" class="btn-secondary text-sm no-underline">Alla kategorier</a>
        </div>
      </div>
    )}
  </div>
</BaseLayout>