Аккордеон

accordion({
  items: [
    { title: 'Что такое sitelo?', content: 'Генератор статических сайтов на Vite. Страницы — это функции, возвращающие HTML.' },
    { title: 'Есть ли рантайм?', content: 'Нет. В браузер ничего не попадает, пока вы сами не подключите скрипт.' },
    { title: 'Можно ли использовать TypeScript?', content: 'Да — .ht.ts и .ht.tsx такие же расширения страниц, как и остальные.' },
  ],
})

accordion({
  items: [
    { title: 'Открыт сразу', content: 'У этой секции open: true.', open: true },
    { title: 'Закрыт', content: 'А у этой нет.' },
  ],
})

accordion({
  name: 'demo-exclusive',
  items: [
    { title: 'Первая', content: 'Откройте другую — и эта закроется.', open: true },
    { title: 'Вторая', content: 'И эта тоже.' },
    { title: 'Третья', content: 'Открыта всегда только одна.' },
  ],
})

accordion(
  accordionItem({ title: 'Установка', open: true },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Добавьте пакет и его спутника для разметки:'),
      code('npm install sitelo javascript-to-html'),
    ),
  ),
  accordionItem({ title: 'Настройка' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Необязательно. Опции Vite живут под ключом vite.'),
      code('sitelo.config.js'),
    ),
  ),
  accordionItem({ title: 'Развёртывание' },
    stack({ gap: 'sm' },
      text({ variant: 'small', tone: 'muted' }, 'Опубликуйте каталог сборки на любом статическом хостинге.'),
      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 = [
    ['Правда ли, что настройка не нужна?', 'Проект с одним файлом в src/ и без конфига собирается. Всё остальное — по желанию.'],
    ['Как работают динамические маршруты?', 'Скобки в именах файлов. generateStaticParams перечисляет, что собирать.'],
    ['А поиск?', 'Поставьте pagefind: true, и сборка проиндексирует каждую страницу.'],
  ]

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