---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import { rules } from '../rules';
---

<WebsiteLayout title="Regeln">
  <div class="mx-4 my-6 sm:mx-48 sm:my-12">
    <h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 8 Regelwerk</h1>
    <div class="collapse collapse-arrow">
      <input type="checkbox" autocomplete="off" checked />
      <div class="collapse-title">
        <p>0. Vorwort</p>
      </div>
      <div class="collapse-content">
        <p>{rules.header}</p>
        <p class="mt-1 text-[.75rem]">{rules.footer}</p>
      </div>
      <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
    </div>
    {
      rules.sections.map((section, i) => (
        <div>
          <div class="collapse collapse-arrow">
            <input type="checkbox" autocomplete="off" />
            <div class="collapse-title">
              <p>
                {i + 1}. {section.title}
              </p>
            </div>
            <div class="collapse-content" set:html={section.content} />
          </div>
          <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
        </div>
      ))
    }
  </div>
</WebsiteLayout>