<Card title="Task Focus" subtitle="Your single most urgent task right now">
  <Columns>
    <div>
      <Badge tone="danger">Most urgent</Badge>
      <h2>Submit Q3 expense report</h2>
      <p>
        <strong>Deadline:</strong> Today, 5:00 PM (in 2h 15m)<br />
        <strong>Priority:</strong> High · Finance approval required
      </p>
      <Stat label="Current status" value="In progress" icon="clock" tone="info" note="Started 2 days ago · 70% complete" />
    </div>
    <div>
      <Progress value="70" max="100" label="Completion" tone="info" />
      <p style="margin-top: 1rem">Mark this task as done when all receipts are attached and submitted.</p>
      <Button variant="primary" label="Mark as done">✓ Mark as done</Button>
    </div>
  </Columns>
</Card>

<Card title="Task details">
  <Tabs>
    <Tab title="Description">
      <p>Compile all receipts from the quarter, categorise them by department, and submit through the finance portal. Manager approval needed before submission.</p>
    </Tab>
    <Tab title="Subtasks">
      <ul>
        <li>✅ Collect all receipts (12/12 collected)</li>
        <li>✅ Categorise by department</li>
        <li>🔄 Attach digital copies to portal</li>
        <li>⬜ Submit for manager approval</li>
      </ul>
    </Tab>
    <Tab title="Notes">
      <p>Last quarter the report was rejected due to missing taxi receipts — double-check those.</p>
    </Tab>
  </Tabs>
</Card>

<Card title="Related">
  <Columns>
    <div>
      <h3>Next up after this</h3>
      <p>Prepare client presentation (due tomorrow)</p>
    </div>
    <div>
      <h3>Blocked by</h3>
      <p>Manager approval (after submission)</p>
    </div>
  </Columns>
</Card>

<FollowUps>
- What happens after I mark it done?
- Remind me 30 minutes before the deadline
- Show me all tasks due today
</FollowUps>