{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="intro">
  c15t's headless mode means using the hooks (`useConsentManager`, `useTranslations`, etc.) without any pre-built UI components. This gives you complete control over the consent experience.

  Before you go headless, walk the customization ladder in order:

  1. **Pre-built components** - Use provider options, component props, tokens, slots, and `theme.consentActions`
  2. **Compound components** - Rearrange c15t primitives when the markup order must change
  3. **`noStyle`** - Keep c15t structure but replace its styling
  4. **Headless** - Use only hooks and build the entire UI yourself

  ## When to Go Headless

  Go headless when:

  * Your design system requires complete control over markup
  * You need a consent flow that doesn't fit the banner/dialog pattern
  * You want to embed consent choices inline rather than as overlays

  Use a lower-power tool instead when:

  * The component structure works but the styling doesn't -> use tokens, slots, or `noStyle`
  * You only need to rearrange existing c15t parts -> use compound components
  * You want to change copy -> use `ConsentManagerProvider.options.i18n`
  * You only need to restyle stock actions -> use `theme.consentActions`

  > ⚠️ **Warning:**
  > Headless mode is not the first answer for pure theming. If you are still trying to debug why a banner footer color did not change, stay in the styling system and verify the token-to-component mapping before you rebuild the UI.
</section>