// Animated calorie ring — used in hero and showcase
const CalorieRing = ({ size = 280, pct = 0.78, value = "1,847", unit = "kcal left", stroke = 16 }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setP(pct), 120);
    return () => clearTimeout(t);
  }, [pct]);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--ink-100)" strokeWidth={stroke} />
      <circle
        cx={size / 2} cy={size / 2} r={r} fill="none"
        stroke="var(--lime-500)" strokeWidth={stroke} strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c * (1 - p)}
        transform={`rotate(-90 ${size / 2} ${size / 2})`}
        style={{ transition: "stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1)" }}
      />
      <text x="50%" y="50%" textAnchor="middle" dy="-4"
        style={{ fontFamily: "var(--font-mono)", fontSize: size * 0.22, fontWeight: 500, letterSpacing: "-0.03em", fill: "var(--ink-900)" }}>
        {value}
      </text>
      <text x="50%" y="50%" textAnchor="middle" dy={size * 0.13}
        style={{ fontFamily: "var(--font-sans)", fontSize: size * 0.05, letterSpacing: "0.08em", textTransform: "uppercase", fill: "var(--ink-500)" }}>
        {unit}
      </text>
    </svg>
  );
};
window.CalorieRing = CalorieRing;