// founding_badge.el - Founding Member badge (Option C: Tag).
//
// Tall card, navy top stroke, brain logo prominent, member number,
// "Neuron, LLC" footer. Matches the design picked from
// /tmp/founding-badge-preview.html.

extern fn el_div(attrs: String, children: String) -> String
extern fn el_img(src: String, alt: String, attrs: String) -> String

fn founding_badge(member_number: Int) -> String {
    let num_str: String = int_to_str(member_number)
    let show_number: Bool = member_number > 0

    let number_or_pending: String = if show_number {
        el_div("class=\"founding-badge-num\"", "#" + num_str) +
        el_div("class=\"founding-badge-of\"", "of 1,000")
    } else {
        el_div("class=\"founding-badge-pending\"", "Your number awaits")
    }

    el_div(
        "class=\"founding-badge\" aria-label=\"Founding Member badge\"",
        el_img("/assets/brand/neuron-brain.png", "Neuron", "class=\"founding-badge-brain\" width=\"40\" height=\"40\"") +
        el_div("class=\"founding-badge-eye\"", "Founding Member") +
        number_or_pending +
        el_div("class=\"founding-badge-line\"", "") +
        el_div("class=\"founding-badge-name\"", "Neuron, LLC")
    )
}

fn founding_badge_css() -> String {
    let css_a: String = ".founding-badge {
  width: 200px;
  background: #fff;
  border: 1px solid rgba(0,82,160,.18);
  border-top: 4px solid #0052A0;
  padding: 1.5rem 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  box-shadow: 0 4px 24px rgba(0,82,160,.10);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.founding-badge-brain {
  width: 56px;
  height: 56px;
  margin-bottom: .5rem;
  opacity: .92;
}
.founding-badge-eye {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(0,82,160,.65);
  margin-bottom: .25rem;
}
.founding-badge-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: #0052A0;
  line-height: 1.05;
}
.founding-badge-of {
  font-size: .65rem;
  font-weight: 400;
  color: #6B6B7E;
  letter-spacing: .04em;
}
.founding-badge-pending {
  font-size: .65rem;
  font-weight: 500;
  color: rgba(0,82,160,.55);
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .5rem 0;
}
.founding-badge-line {
  width: 100%;
  height: 1px;
  background: rgba(0,82,160,.12);
  margin: .65rem 0 .5rem;
}
.founding-badge-name {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B6B7E;
}"
    "<style>" + css_a + "</style>"
}