extends ./layout.spug
props
  title: string
  nav: { id: string, label: string, href: string, active?: boolean }[]
  albums: { id: string, name: string, cover: string, tracks: { title: string, duration: string }[] }[]
  ribbonStyle?: string
  intro: { id: string, label: string, note: string, tint: string }[]
  features: { label: string, href: string }[]
block content
  section.demo-hero
    h1= title
    p
  section.demo-intro(aria-label="Intro scene")
    div.demo-intro__stage@introstage()
      ul.demo-intro__topics(role="tablist")
        each step, index in intro
          li
            input.demo-intro__toggle(id=('intro-step-' + step.id) type="radio" name="intro-step" checked=index === 0)
            label.demo-intro__topic@introtopic(step.id)(for=('intro-step-' + step.id) role="tab" data-tint=step.tint)
              = step.label
      div.demo-intro__panel@intropanel()
        each step in intro
          p.demo-intro__note@intropane(step.id)()
            = step.note
  section.demo-meter.demo-meter--one
    i
  section.demo-meter.demo-meter--two
    i
  section.demo-meter.demo-meter--three
    i