/* GoalCards.jsx — Apple Health-style progress rings on a grid of goals. */

function ProgressRing({ pct, color }) {
  const R = 30;
  const C = 2 * Math.PI * R;
  const off = C * (1 - pct / 100);
  return (
    <div className="ring-c">
      <svg viewBox="0 0 74 74">
        <circle cx="37" cy="37" r={R} fill="none" stroke="var(--bg-secondary)" strokeWidth="5"/>
        <circle cx="37" cy="37" r={R} fill="none" stroke={color} strokeWidth="5"
          strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off}/>
      </svg>
      <div className="v">{pct}</div>
    </div>
  );
}

const GOAL_ICON = {
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>,
  book:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3z"/><path d="M4 4v13a3 3 0 0 0 3 3"/></svg>,
  bolt:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
  flag:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 22V4l8 4h8l-2 4 2 4h-8l-8-4"/></svg>,
};

const GOALS = [
  { color:'var(--purple)', icon: 'book',   pct: 64, title:'Finish CS 240 project', why:'Submission due Friday 16. 2 milestones left.' },
  { color:'var(--green)',  icon: 'bolt',   pct: 78, title:'5k under 24:00',         why:'Two practice runs this week. Last: 24:38.' },
  { color:'var(--accent)', icon: 'target', pct: 41, title:'Sleep debt < 1h',        why:'Currently 3.1h. Recovery plan active.' },
  { color:'var(--orange)', icon: 'flag',   pct: 92, title:'Visa documents · Spain', why:'One signature outstanding.' },
];

function GoalCards() {
  return (
    <section data-screen-label="04 Goals">
      <div className="section-title">
        <span>Goals</span>
        <span className="see-all">All goals →</span>
      </div>
      <div className="goal-grid">
        {GOALS.map((g, i) => (
          <div key={i} className="goal-card">
            <div>
              <span className="chip" style={{ background: g.color }}>{GOAL_ICON[g.icon]}</span>
              <div className="ttl">{g.title}</div>
              <div className="why">{g.why}</div>
              <div className="pct">{g.pct}% · on track</div>
            </div>
            <ProgressRing pct={g.pct} color={g.color} />
          </div>
        ))}
      </div>
    </section>
  );
}

window.GoalCards = GoalCards;