framework = await FileAttachment("data/framework.json").json()

readinessItems = framework.readinessItems

// Question labels rendered separately as full-width blocks
html`<div class="quiz-q-label"><strong>${readinessItems[0].dimension}:</strong> ${readinessItems[0].question}</div>`

viewof q1 = Inputs.radio(
  new Map([
    [readinessItems[0].score_0, 0],
    [readinessItems[0].score_1, 1],
    [readinessItems[0].score_2, 2]
  ]),
  {value: 0}
)

html`<div class="quiz-q-label"><strong>${readinessItems[1].dimension}:</strong> ${readinessItems[1].question}</div>`

viewof q2 = Inputs.radio(
  new Map([
    [readinessItems[1].score_0, 0],
    [readinessItems[1].score_1, 1],
    [readinessItems[1].score_2, 2]
  ]),
  {value: 0}
)

html`<div class="quiz-q-label"><strong>${readinessItems[2].dimension}:</strong> ${readinessItems[2].question}</div>`

viewof q3 = Inputs.radio(
  new Map([
    [readinessItems[2].score_0, 0],
    [readinessItems[2].score_1, 1],
    [readinessItems[2].score_2, 2]
  ]),
  {value: 0}
)

html`<div class="quiz-q-label"><strong>${readinessItems[3].dimension}:</strong> ${readinessItems[3].question}</div>`

viewof q4 = Inputs.radio(
  new Map([
    [readinessItems[3].score_0, 0],
    [readinessItems[3].score_1, 1],
    [readinessItems[3].score_2, 2]
  ]),
  {value: 0}
)

html`<div class="quiz-q-label"><strong>${readinessItems[4].dimension}:</strong> ${readinessItems[4].question}</div>`

viewof q5 = Inputs.radio(
  new Map([
    [readinessItems[4].score_0, 0],
    [readinessItems[4].score_1, 1],
    [readinessItems[4].score_2, 2]
  ]),
  {value: 0}
)

totalScore = q1 + q2 + q3 + q4 + q5

stages = framework.adoptionStages

stageIndex = totalScore <= 2 ? 0 :
             totalScore <= 4 ? 1 :
             totalScore <= 6 ? 2 :
             totalScore <= 8 ? 3 : 4

currentStage = stages[stageIndex]

html`<div class="quiz-result">
  <div class="result-header">
    <div class="result-stage-number">${stageIndex + 1}</div>
    <div>
      <div style="font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:#5C5859;">Etapa de adoptare</div>
      <div class="result-title">Etapa ${stageIndex + 1}: ${currentStage.name}</div>
    </div>
  </div>
  <p class="result-description">${currentStage.purpose}</p>
  <p style="font-size:0.95rem;color:#5C5859;margin-bottom:1rem;">
    <em> ${currentStage.guiding_question}</em>
  </p>
  <a href="adoptare.html#stagiu-${stageIndex + 1}" class="btn btn-primary" style="font-size:0.9rem;padding:0.6rem 1.2rem;">
    Descoperă activitățile pentru Etapa ${stageIndex + 1} →
  </a>
</div>`