---
import BaseLayout from '../../layouts/BaseLayout.astro'
import BonusCard from '../../components/BonusCard.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 bonusConfig: Record<string, {
  title: string
  h1: string
  description: string
  intro: string
  filter: string
  ctaText: string
  faq: { question: string; answer: string }[]
  forItems: string[]
  notForItems: string[]
}> = {
  'ingen-insattning': {
    title: 'Bonus utan Insättning 2026 – Bästa No Deposit Bonus | casinoguidese.com',
    h1: 'Casino Bonus utan Insättning 2026',
    description: 'De bästa casinobonusarna utan insättning i Sverige 2026. Testa nya casinon utan att riskera egna pengar. Inga bonuskoder.',
    intro: 'En bonus utan insättning (no deposit bonus) låter dig spela med casinots pengar utan att sätta in egna. Det är bra för att testa ett casino eller ett nytt spel utan risk.',
    filter: 'no-deposit',
    ctaText: 'Hämta bonus utan insättning →',
    faq: [
      { question: 'Vad är en bonus utan insättning?', answer: 'En no deposit bonus är en gratisbonus som casinot ger dig utan att du behöver sätta in pengar. Vanligtvis 10-50 SEK eller 10-20 free spins.' },
      { question: 'Kan jag ta ut vinster från no deposit bonus?', answer: 'Ja, men de flesta casinon sätter ett maxuttag på 100-500 SEK och kräver att du omsätter bonusen 30-40x innan uttag.' },
      { question: 'Behövs bonuskod?', answer: 'Nej. Vi publicerar inga bonuskoder. Bonusarna på den här sidan aktiveras automatiskt.' },
    ],
    forItems: ['Dig som vill testa ett casino utan risk', 'Nya spelare som inte vet vilket casino att välja', 'Spelare som letar efter gratis spelpengar'],
    notForItems: ['Dig som vill ha stora bonusar', 'Erfarna spelare med ett favoritcasino', 'Spelare som söker höga uttaksgränser'],
  },
  'free-spins': {
    title: 'Free Spins Casino 2026 – Bästa Gratis Snurr | casinoguidese.com',
    h1: 'Free Spins Casino 2026 – Gratis snurr utan bonuskod',
    description: 'Hitta casinon med de bästa free spins erbjudandena 2026. Gratis snurr på slots utan bonuskoder. SGA-licensierade casinon.',
    intro: 'Free spins (gratissnurr) är en av de populäraste bonustyperna på svenska casinon. Du får ett antal snurr på utvalda slots utan att det kostar något.',
    filter: 'free-spins',
    ctaText: 'Få gratis snurr →',
    faq: [
      { question: 'Vad är free spins?', answer: 'Free spins är gratis snurr på en eller flera slot-spel. Varje snurr har ett fast värde (vanligtvis 1-5 SEK per snurr).' },
      { question: 'Hur många free spins kan jag få?', answer: 'Det varierar. Välkomstpaket kan innehålla 10-300 free spins. Utan insättning brukar det vara 10-50 snurr.' },
      { question: 'Har free spins omsättningskrav?', answer: 'Ja, vanligtvis 30-40x. Det innebär att du måste spela för 30-40 gånger värdet av dina vinster innan du kan ta ut dem.' },
    ],
    forItems: ['Slots-entusiaster', 'Dig som vill prova nya slotspel utan risk', 'Spelare som jagar jackpots'],
    notForItems: ['Bordsspelsspelare (blackjack, roulette)', 'Spelare som vill ha kontantbonus', 'Spelare som undviker omsättningskrav'],
  },
  'valkombonusar': {
    title: 'Bästa Välkomstbonus Casino 2026 – Upp till 10 000 SEK | casinoguidese.com',
    h1: 'Bästa Välkomstbonus Casino Sverige 2026',
    description: 'Jämför de bästa välkomstbonusarna på svenska casinon 2026. Matchningsbonus upp till 10 000 SEK + free spins. Inga bonuskoder.',
    intro: 'En välkomstbonus är det erbjudande ett casino ger dig som ny spelare. Vanligtvis matchas din första insättning med 50-200%, ibland på de första 2-4 insättningarna.',
    filter: 'welcome',
    ctaText: 'Hämta välkomstbonus →',
    faq: [
      { question: 'Vad är en välkomstbonus?', answer: 'En välkomstbonus matchas din insättning med en procentandel. T.ex. 100% match på 2000 SEK = du får 2000 SEK extra i bonus.' },
      { question: 'Vilket är det bästa välkomsterbjudandet i Sverige 2026?', answer: 'LeoVegas erbjuder 5000 SEK + 200 FS med 35x omsättning. Betsson ger 3000 SEK med 30x. Snabbare ger 2500 SEK med 25x (lägst omsättningskrav).' },
      { question: 'Finns det dolda villkor?', answer: 'Alla villkor vi listar är transparenta: omsättningskrav, giltighetstid och maxinsats per snurr. Inga surprises.' },
    ],
    forItems: ['Nya casinospelare', 'Spelare som vill maximera startkapitalet', 'Dig som har råd att nå omsättningskravet'],
    notForItems: ['Spelare som vill ta ut pengar snabbt utan omsättning', 'Prefererar Pay N Play', 'Spelare med begränsad budget'],
  },
}

const config = bonusConfig[slug ?? '']
if (!config) {
  return Astro.redirect('/bonus/', 302)
}

const db = getDb()
const casinos = db.prepare(`
  SELECT * FROM casinos
  WHERE active = 1 AND bonus_amount IS NOT NULL AND bonus_amount != 'Ingen välkomstbonus'
  ORDER BY rating DESC
  LIMIT 8
`).all() as Casino[]
---

<BaseLayout
  title={config.title}
  description={config.description}
  canonical={`/bonus/${slug}/`}
>
  <SchemaOrg type="FAQ" items={config.faq} />

  <div class="container py-6 md:py-10">
    <Breadcrumbs items={[{ name: 'Bonusar', href: '/bonus/' }, { name: config.h1.split('–')[0].trim() }]} />

    <header class="mb-8">
      <h1 class="font-heading font-bold text-3xl md:text-4xl text-[#F0F4FF] mb-3">{config.h1}</h1>
      <p class="text-[#8BA3C7] text-lg max-w-2xl">{config.intro}</p>
    </header>

    <!-- Hero CTA above fold -->
    <div class="bg-gradient-to-r from-primary to-blue-800 rounded-card p-6 mb-8 text-white text-center">
      <p class="font-heading font-bold text-2xl mb-2">Inga bonuskoder. Ingen registreringskrångel.</p>
      <p class="text-blue-100 mb-4">Alla bonusar aktiveras automatiskt. Klicka och börja spela.</p>
      <a href={`/kasino/?kategori=${slug}`} class="btn-primary bg-accent text-primary hover:bg-white">
        {config.ctaText}
      </a>
    </div>

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

    <h2 class="font-heading font-bold text-2xl text-[#F0F4FF] mb-4 mt-8">Bästa casinon med denna bonus</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      {casinos.map(casino => (
        <BonusCard
          slug={casino.slug}
          brand={casino.brand}
          bonus_amount={casino.bonus_amount}
          bonus_wagering={casino.bonus_wagering}
          min_deposit={casino.min_deposit}
          payout_speed={casino.payout_speed}
          pageSrc={slug}
          pageType="bonus"
        />
      ))}
    </div>

    <!-- FAQ -->
    <section class="mt-12">
      <h2 class="font-heading font-bold text-2xl text-[#F0F4FF] mb-6">Vanliga frågor</h2>
      <div class="space-y-4 max-w-3xl">
        {config.faq.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>

    <!-- Internal links -->
    <div class="mt-8 p-4 bg-bg rounded-card border border-[#1E3058] text-sm">
      <p class="font-semibold text-[#F0F4FF] mb-2">Relaterat:</p>
      <div class="flex flex-wrap gap-3">
        <a href="/bonus/" class="text-primary hover:text-accent no-underline">Alla bonustyper</a>
        <a href="/spel/spelautomater/" class="text-primary hover:text-accent no-underline">Om slots & omsättningskrav</a>
        <a href="/kasino/" class="text-primary hover:text-accent no-underline">Alla casinon</a>
      </div>
    </div>
  </div>
</BaseLayout>