import { Prose } from "@booleanpress/ui/typography"

export default function TypographyProse() {
  return (
    <Prose asChild className="max-w-xl">
      <article>
        <h1>Moving to a new mailer</h1>
        <p>
          Switching providers does not lose a single email. The old mailer keeps sending until the new one passes its
          first test, and the <a href="#delivery-log">delivery log</a> shows both side by side.
        </p>
        <h2>Before you start</h2>
        <p>
          Collect the new provider’s host, port and API key. Keys are shown once, so store yours in a secrets manager,
          not in <code>wp-config.php</code>.
        </p>
        <h3>Check your DNS</h3>
        <p>
          Add the provider’s <strong>SPF</strong> and <strong>DKIM</strong> records. Receiving servers check them on
          every message.
        </p>
        <pre>
          <code>{`v=spf1 include:_spf.example.com ~all`}</code>
        </pre>
        <h4>How long it takes</h4>
        <p>DNS changes usually reach every server within an hour, and always within two days.</p>
        <hr />
        <p>Questions? The support team answers within one working day.</p>
      </article>
    </Prose>
  )
}

import { Heading } from "@booleanpress/ui/typography"

export default function TypographyHeadings() {
  return (
    <div className="flex flex-col gap-3">
      <Heading level={1}>Delivery log</Heading>
      <Heading level={2}>Failed deliveries</Heading>
      <Heading level={3}>Bounced by the receiving server</Heading>
      <Heading level={4}>Soft bounces</Heading>
      <Heading level={5}>Mailbox full</Heading>
      <Heading level={6}>Last checked 4 October 2026</Heading>
      <Heading level={2} size={4} className="text-muted-foreground">
        An h2 drawn at size 4
      </Heading>
    </div>
  )
}

import { Text } from "@booleanpress/ui/typography"

export default function TypographyText() {
  return (
    <div className="flex max-w-md flex-col gap-3">
      <Text size="lg" tone="muted">
        A lead paragraph: what this page is for, in one sentence.
      </Text>
      <Text size="base">Running text, for help pages and articles: 16 pixels on a 24 pixel line.</Text>
      <Text>Component text, the default: 14 pixels on a 21 pixel line.</Text>
      <Text size="xs" tone="muted">
        Small print: last synced 5 October 2026.
      </Text>
      <div className="flex flex-wrap gap-x-4 gap-y-1">
        <Text tone="strong" weight="semibold">
          Strong
        </Text>
        <Text tone="muted">Muted</Text>
        <Text tone="success" weight="medium">
          Delivered
        </Text>
        <Text tone="destructive" weight="medium">
          Bounced
        </Text>
      </div>
    </div>
  )
}

import { Blockquote, Prose } from "@booleanpress/ui/typography"

export default function TypographyListsAndQuotes() {
  return (
    <div className="flex max-w-xl flex-col gap-6">
      <Prose>
        <ul>
          <li>Connect a mailer</li>
          <li>
            Verify your domain
            <ul>
              <li>Add the SPF record</li>
              <li>Add the DKIM record</li>
            </ul>
          </li>
          <li>Send a test email</li>
        </ul>
        <ol>
          <li>Create an API key.</li>
          <li>Paste it into the mailer’s settings.</li>
          <li>Save, then press Send test.</li>
        </ol>
        <blockquote>
          <p>We moved forty sites to the new mailer in an afternoon, and no customer noticed.</p>
        </blockquote>
      </Prose>
      <Blockquote>A Blockquote on its own, outside Prose, looks the same.</Blockquote>
    </div>
  )
}

import { Prose } from "@booleanpress/ui/typography"

const ROWS = [
  ["Delivered", "The receiving server accepted the message.", "1,284"],
  ["Deferred", "The server asked us to try again later.", "12"],
  ["Bounced", "The server refused the message for good.", "7"],
]

export default function TypographyTableInProse() {
  return (
    <Prose className="w-full max-w-xl">
      <h3>Delivery states</h3>
      <p>Every message in the log is in one of three states.</p>
      <table>
        <thead>
          <tr>
            <th>State</th>
            <th>Meaning</th>
            <th>Today</th>
          </tr>
        </thead>
        <tbody>
          {ROWS.map(([state, meaning, count]) => (
            <tr key={state}>
              <td>
                <code>{state.toLowerCase()}</code>
              </td>
              <td>{meaning}</td>
              <td>{count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Prose>
  )
}