Akordeon

accordion({
  items: [
    { title: 'Czym jest sitelo?', content: 'Generatorem stron statycznych zbudowanym na Vite. Strony to funkcje zwracające HTML.' },
    { title: 'Czy wysyła runtime?', content: 'Nie. Nic nie trafia do przeglądarki, dopóki sam nie podlinkujesz skryptu.' },
    { title: 'Czy mogę użyć TypeScriptu?', content: 'Tak — .ht.ts i .ht.tsx to rozszerzenia stron jak każde inne.' },
  ],
})

accordion({
  items: [
    { title: 'Otwarty na wejściu', content: 'Ten ma open: true.', open: true },
    { title: 'Zamknięty', content: 'Ten nie ma.' },
  ],
})

accordion({
  name: 'demo-exclusive',
  items: [
    { title: 'Pierwsza', content: 'Otwórz inną, a ta się zamknie.', open: true },
    { title: 'Druga', content: 'Ta też.' },
    { title: 'Trzecia', content: 'Otwarta jest zawsze tylko jedna.' },
  ],
})

accordion(
  accordionItem({ title: 'Instalacja', open: true },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Dodaj pakiet i jego towarzysza do znaczników:'),
      code('npm install sitelo javascript-to-html'),
    ),
  ),
  accordionItem({ title: 'Konfiguracja' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Opcjonalna. Opcje Vite leżą pod kluczem vite.'),
      code('sitelo.config.js'),
    ),
  ),
  accordionItem({ title: 'Wdrożenie' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Opublikuj katalog wyjściowy na dowolnym hostingu statycznym.'),
      stack({ direction: 'row', gap: 'sm', wrap: true },
        chip({ size: 'sm' }, 'Netlify'),
        chip({ size: 'sm' }, 'Vercel'),
        chip({ size: 'sm' }, 'Cloudflare Pages'),
        chip({ size: 'sm' }, 'GitHub Pages'),
      ),
    ),
  ),
)

return (() => {
  const faq = [
    ['Czy naprawdę bez konfiguracji?', 'Projekt z jednym plikiem w src/ i bez konfiguracji się buduje. Cała reszta jest opcjonalna.'],
    ['Jak działają trasy dynamiczne?', 'Nawiasy w nazwach plików. generateStaticParams wylicza, co zbudować.'],
    ['A wyszukiwanie?', 'Ustaw pagefind: true, a build zindeksuje każdą stronę.'],
  ]

  return accordion({
    name: 'demo-faq',
    items: faq.map(([title, content]) => ({ title, content })),
  })
})()