{% assign announcement_text = "Soakie's is being honored with a historic marker in Downtown Kansas City!" %}
{% assign announcement_url = "https://www.eventbrite.com/e/soakies-historic-marker-rsvp-for-the-celebration-by-bqkc-tickets-1999807323538?aff=oddtdtcreator" %}
{% assign announcement_label = "Learn more & RSVP for The Celebration on 9/26" %}

<div id="announcement-bar" style="display: none;">
  <div id="announcement-inner">
    <span id="announcement-text">
      {{ announcement_text }}
      <a href="{{ announcement_url }}" target="_blank">{{ announcement_label }}</a>
    </span>
    <button id="announcement-close" aria-label="Dismiss announcement">✕</button>
  </div>
</div>

<style>
#announcement-bar {
  background-color: var(--text-white);
  color: var(--bg-black);
  width: 100%;
  z-index: 10000;
  border-bottom: 1px solid var(--border-color-subtle);
}

#announcement-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

#announcement-text {
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing-normal);
  text-align: center;
}

#announcement-text a {
  color: var(--bg-black);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

#announcement-text a:hover {
  opacity: 0.7;
}

#announcement-close {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: var(--bg-black);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  opacity: 0.6;
  line-height: 1;
}

#announcement-close:hover {
  opacity: 1;
}
</style>

<script>
(function() {
  var bar = document.getElementById("announcement-bar");
  var closeBtn = document.getElementById("announcement-close");
  var storageKey = "announcement-dismissed-v1";

  // Show bar if not dismissed
  if (!localStorage.getItem(storageKey)) {
    bar.style.display = "block";
  }

  // Dismiss on X click
  closeBtn.addEventListener("click", function() {
    bar.style.display = "none";
    localStorage.setItem(storageKey, "true");
  });
})();
</script>