<Card title="Invoice #INV-2024-0187" subtitle="Sent to Acme Corporation · 14 days ago">
  <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
    <div>
      <p style="margin: 0; color: var(--muted); font-size: 14px;">Amount due</p>
      <p style="margin: 4px 0 0; font-size: 36px; font-weight: 700; color: var(--fg);">$4,850.00</p>
      <p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">USD</p>
    </div>
    <div style="text-align: right;">
      <p style="margin: 0; color: var(--muted); font-size: 14px;">Due date</p>
      <p style="margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--fg);">March 15, 2025</p>
      <p style="margin: 4px 0 0; color: var(--success); font-size: 13px;">5 days remaining</p>
    </div>
  </div>

  <hr style="border: none; border-top: 1px solid var(--border); margin: 24px 0;" />

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
    <div>
      <p style="margin: 0; color: var(--muted); font-size: 13px;">Invoice date</p>
      <p style="margin: 4px 0 0; font-weight: 500;">February 28, 2025</p>
    </div>
    <div>
      <p style="margin: 0; color: var(--muted); font-size: 13px;">Payment terms</p>
      <p style="margin: 4px 0 0; font-weight: 500;">Net 15</p>
    </div>
    <div>
      <p style="margin: 0; color: var(--muted); font-size: 13px;">Status</p>
      <Badge tone="warning">Unpaid</Badge>
    </div>
  </div>

  <hr style="border: none; border-top: 1px solid var(--border); margin: 24px 0;" />

  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <Button variant="primary" icon="credit-card">Pay now</Button>
    <Button variant="secondary" icon="download">Download PDF</Button>
    <Button variant="tertiary" icon="mail">Send reminder</Button>
  </div>

  <Details title="View line items" style="margin-top: 24px;">
    <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
      <thead>
        <tr style="text-align: left; border-bottom: 1px solid var(--border); color: var(--muted);">
          <th style="padding: 12px 8px;">Description</th>
          <th style="padding: 12px 8px; text-align: right;">Qty</th>
          <th style="padding: 12px 8px; text-align: right;">Rate</th>
          <th style="padding: 12px 8px; text-align: right;">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid var(--border);">
          <td style="padding: 12px 8px;">Website redesign – Phase 2</td>
          <td style="padding: 12px 8px; text-align: right;">1</td>
          <td style="padding: 12px 8px; text-align: right;">$3,200.00</td>
          <td style="padding: 12px 8px; text-align: right; font-weight: 500;">$3,200.00</td>
        </tr>
        <tr style="border-bottom: 1px solid var(--border);">
          <td style="padding: 12px 8px;">Custom CMS integration</td>
          <td style="padding: 12px 8px; text-align: right;">1</td>
          <td style="padding: 12px 8px; text-align: right;">$1,650.00</td>
          <td style="padding: 12px 8px; text-align: right; font-weight: 500;">$1,650.00</td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; color: var(--muted);"></td>
          <td style="padding: 12px 8px;"></td>
          <td style="padding: 12px 8px; text-align: right; color: var(--muted);">Subtotal</td>
          <td style="padding: 12px 8px; text-align: right; font-weight: 600;">$4,850.00</td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; color: var(--muted);"></td>
          <td style="padding: 12px 8px;"></td>
          <td style="padding: 12px 8px; text-align: right; color: var(--muted);">Tax (0%)</td>
          <td style="padding: 12px 8px; text-align: right;">$0.00</td>
        </tr>
        <tr style="border-top: 2px solid var(--border);">
          <td style="padding: 12px 8px; color: var(--muted);"></td>
          <td style="padding: 12px 8px;"></td>
          <td style="padding: 12px 8px; text-align: right; font-weight: 600;">Total</td>
          <td style="padding: 12px 8px; text-align: right; font-weight: 700; font-size: 16px;">$4,850.00</td>
        </tr>
      </tbody>
    </table>
  </Details>
</Card>