<Card title="Focus: Most Urgent Task" subtitle="One task at a time — everything else can wait.">

<Callout tone="warning" title="Deadline approaching">
  This task is due in under 24 hours. Prioritise it above all other work.
</Callout>

<Columns>
<div>
<Card title="Task">
  <h3>Finalise Q3 investor report</h3>
  <p>
    <Badge tone="danger">Urgent</Badge> <Badge tone="warning">In progress</Badge>
  </p>
  <p><strong>Deadline:</strong> Today, 17:00 (in 3.5 hours)</p>
  <p><strong>Assigned to:</strong> You</p>
  <p><strong>Project:</strong> Investor communications</p>
</Card>
</div>

<div>
<Card title="Status">
  <Stat label="Progress" value="65%" tone="warning" icon="chart-line" />
  <Progress value="65" max="100" label="Completed" tone="warning" />
  <p><strong>Current step:</strong> Consolidating financial data from the accounting team.</p>
  <ul>
    <li>✅ Collect revenue figures</li>
    <li>✅ Draft executive summary</li>
    <li>⏳ Add charts and visuals</li>
    <li>⬜ Final proofread</li>
  </ul>
</Card>
</div>
</Columns>

<Card title="Mark as done">
  <p>Once you’ve finished and verified the report, mark it complete. This will clear your focus view and move the next most urgent task to the top.</p>
  <Button variant="primary" label="Mark as done">Mark as done</Button>
  <Button variant="secondary" label="Snooze 30 minutes">Snooze 30 minutes</Button>
</Card>

<Details title="What happens after I mark it done?" open="false">
  <p>The task will be archived in your completed list. Your focus view will automatically load the next most urgent task with its own deadline and status. You’ll get a brief confirmation and a new 25-minute focus session suggestion.</p>
</Details>

<FollowUps>
- Show my next most urgent task
- What tasks are due this week?
- How many tasks have I completed this month?
</FollowUps>