export function ReflectionBox({ text }: { text: string }) {
  return (
    <section
      aria-label="Reflection question"
      className="rounded-2xl border border-sage/30 bg-sage/10 p-6"
      style={{ backgroundColor: "color-mix(in oklab, var(--sage) 10%, transparent)" }}
    >
      <h3 className="font-serif text-xl font-semibold text-primary">Reflection</h3>
      <p className="mt-3 text-base leading-relaxed text-foreground/85">{text}</p>
    </section>
  );
}