{{ define "main" }}
<article class="page-enter">
  <section class="section">
    <div class="container">
      <div class="product-hero">
        <div class="product-hero__image">
          {{ with .Params.hero_image }}
            <img src="{{ . }}" alt="{{ $.Title }}">
          {{ else }}
            <div class="product-hero__image-placeholder">{{ .Title }}</div>
          {{ end }}
        </div>
        <div>
          <p class="product-hero__type">{{ .Params.product_type | default "balm" | humanize }}</p>
          <h1 class="product-hero__title">{{ .Title }}</h1>
          {{ with .Params.one_line_identity }}
            <p class="product-hero__identity">{{ . }}</p>
          {{ end }}
          {{ with .Params.short_summary }}
            <p class="product-hero__summary">{{ . }}</p>
          {{ end }}
          {{ with .Params.benefit_chips }}
            <div class="product-hero__chips">
              {{ range . }}<span class="product-hero__chip">{{ . }}</span>{{ end }}
            </div>
          {{ end }}
          <div class="product-hero__actions">
            {{ if eq .Params.status "coming_soon" }}
              <span class="badge badge--sage">Coming Soon</span>
            {{ else }}
              <a href="/contact/?product={{ .File.ContentBaseName }}" class="btn btn--primary btn--lg">
                {{ .Params.cta_label | default "Inquire Now" }}
              </a>
            {{ end }}
            {{ if .Params.price_display }}
              <span style="font-family:var(--fk-font-ui);font-size:var(--fk-text-lg);font-weight:600;color:var(--fk-ink)">{{ .Params.price_display }}</span>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </section>

  {{ with .Params.blend_benefits_rich_text }}
  <section class="section">
    <div class="container container--narrow">
      <h2>The Blend</h2>
      <div class="section__body" style="margin-top:var(--fk-space-md)">{{ . | markdownify }}</div>
    </div>
  </section>
  {{ end }}

  {{ if or .Params.smells_like .Params.feels_like .Params.good_for }}
  <section class="section">
    <div class="container">
      <h2 style="text-align:center;margin-bottom:var(--fk-space-xl)">The Experience</h2>
      <div class="sensory-grid">
        {{ with .Params.smells_like }}
          <div class="sensory-card">
            <p class="sensory-card__label">Smells like</p>
            <p class="sensory-card__value">{{ . }}</p>
          </div>
        {{ end }}
        {{ with .Params.feels_like }}
          <div class="sensory-card">
            <p class="sensory-card__label">Feels like</p>
            <p class="sensory-card__value">{{ . }}</p>
          </div>
        {{ end }}
        {{ with .Params.good_for }}
          <div class="sensory-card">
            <p class="sensory-card__label">Good for</p>
            <p class="sensory-card__value">{{ . }}</p>
          </div>
        {{ end }}
      </div>
    </div>
  </section>
  {{ end }}

  {{ with .Params.directions }}
  <section class="section">
    <div class="container container--narrow">
      <h2>How to Use</h2>
      <div class="section__body" style="margin-top:var(--fk-space-md)">{{ . | markdownify }}</div>
    </div>
  </section>
  {{ end }}

  {{ with .Params.ritual_note }}
  <section class="section">
    <div class="container container--narrow">
      <blockquote style="font-family:var(--fk-font-display);font-style:italic;font-size:var(--fk-text-xl);color:var(--fk-ink-soft);border-left:3px solid var(--fk-kiss-red);padding-left:var(--fk-space-lg)">
        {{ . }}
      </blockquote>
    </div>
  </section>
  {{ end }}

  {{ with .Params.ingredients_list }}
  <section class="section">
    <div class="container container--narrow">
      <h2>Ingredients</h2>
      <p style="color:var(--fk-ink-soft);margin-bottom:var(--fk-space-lg)">{{ $.Params.ingredients_summary }}</p>
      <div class="ingredient-list">
        {{ range . }}
          <div class="ingredient-list__item">{{ . }}</div>
        {{ end }}
      </div>
    </div>
  </section>
  {{ end }}

  {{ with .Params.faq_items }}
  <section class="section">
    <div class="container container--narrow">
      <h2>Questions</h2>
      {{ range . }}
        <div class="faq-item">
          <button class="faq-item__question" onclick="this.parentElement.classList.toggle('open')">{{ .question }}</button>
          <div class="faq-item__answer"><p>{{ .answer }}</p></div>
        </div>
      {{ end }}
    </div>
  </section>
  {{ end }}

  <section class="section" style="text-align:center">
    <a href="/contact/?product={{ .File.ContentBaseName }}" class="btn btn--primary btn--lg">
      {{ .Params.cta_label | default "Ask About This Balm" }}
    </a>
  </section>
</article>
{{ end }}