function computeScores(answers) {
  const scores = {};
  Object.keys(window.APP_DATA.archetypes).forEach(id => { scores[id] = 0; });
  answers.forEach(id => { scores[id] = (scores[id] || 0) + 1; });
  return scores;
}

function Results({ answers, onRetake }) {
  const archetypes = window.APP_DATA.archetypes;
  const giftIdeas = window.APP_DATA.giftIdeas;

  const scores = computeScores(answers);
  const ranked = Object.keys(scores).sort((a, b) => scores[b] - scores[a]);
  const topId = ranked[0];
  const top = archetypes[topId];
  const maxScore = answers.length;
  const ideas = giftIdeas[topId];

  return (
    <div className="results">
      <div className="results-hero" style={{ background: `linear-gradient(135deg, ${top.color}, ${top.color}CC)` }}>
        <span className="results-eyebrow">Your gift-preference profile</span>
        <h2>{top.name}</h2>
        <p>{top.summary}</p>
        <div className="trait-row">
          {top.traits.map(t => (
            <span className="trait-pill" key={t}>{t}</span>
          ))}
        </div>
      </div>

      <div>
        <div className="section-heading">
          <h3>How you scored across every profile</h3>
          <span>Based on 7 answers</span>
        </div>
        <div className="results-score-row">
          {ranked.map(id => (
            <div className="score-chip" key={id}>
              <span className="score-chip-label">{archetypes[id].name.replace("The ", "")}</span>
              <div className="score-chip-track">
                <div
                  className="score-chip-fill"
                  style={{
                    width: `${(scores[id] / maxScore) * 100}%`,
                    background: archetypes[id].color,
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div className="section-heading">
          <h3>Gift ideas matched to {top.name}</h3>
          <span>{ideas.length} picks</span>
        </div>
        <div className="gift-grid">
          {ideas.map(idea => (
            <div className="gift-card" key={idea.name}>
              <div className="gift-card-top">
                <span className="gift-card-name">{idea.name}</span>
                <span className="gift-card-price">${idea.price}</span>
              </div>
              <span className="gift-card-tag">{idea.tag}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="results-actions">
        <button className="btn-secondary" onClick={onRetake}>↺ Retake the quiz</button>
      </div>
    </div>
  );
}