import { Code, Heading, Lead, Small, Text } from "@/components/ui/typography";

export default function TypographyDemo() {
  return (
    <article className="flex w-full max-w-xl flex-col gap-4">
      <Small className="font-medium text-brand uppercase tracking-wider">
        Engineering
      </Small>
      <Heading level={1}>Shipping a design system people actually use</Heading>
      <Lead>
        Components are the easy part. Adoption comes from docs, defaults and a
        migration path that respects the code teams already have.
      </Lead>
      <Text tone="subtle">
        We started by auditing every button in the product and found 41
        variations. Six months later there are three, all imported from{" "}
        <Code>@/components/ui/button</Code>, and nobody had to stop shipping to
        get there.
      </Text>
      <Small>Maya Chen · 6 min read · Updated March 12</Small>
    </article>
  );
}

import { Heading, Text } from "@/components/ui/typography";

const sizes = [
  ["display", "48px / 1.05", "Hero titles, marketing"],
  ["xl", "36px / 1.25", "Page titles (h1)"],
  ["lg", "24px / 1.375", "Section titles (h2)"],
  ["md", "20px / 1.375", "Card and subsection titles (h3)"],
  ["sm", "18px / 1.375", "Small groups (h4)"],
  ["xs", "16px / 1.5", "Inline headings (h5, h6)"],
] as const;

export default function TypographyScale() {
  return (
    <div className="flex w-full max-w-2xl flex-col divide-y">
      {sizes.map(([size, metrics, use]) => (
        <div
          key={size}
          className="grid items-baseline gap-1 py-4 first:pt-0 last:pb-0 sm:grid-cols-[7rem_1fr] sm:gap-6"
        >
          <div className="flex flex-col">
            <Text as="span" size="sm" weight="medium">
              {size}
            </Text>
            <Text as="span" size="xs" tone="muted" className="tabular-nums">
              {metrics}
            </Text>
          </div>
          <div className="flex min-w-0 flex-col gap-1">
            <Heading level={3} size={size} className="truncate">
              Quarterly planning
            </Heading>
            <Text as="span" size="xs" tone="muted">
              {use}
            </Text>
          </div>
        </div>
      ))}
    </div>
  );
}

import { Heading, Text } from "@/components/ui/typography";

export default function TypographyLevels() {
  return (
    <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-2">
      <section className="flex flex-col gap-2 rounded-xl border bg-card p-5">
        {/* An h2 in the outline, sized for a compact card. */}
        <Heading level={2} size="sm">
          Billing
        </Heading>
        <Text size="sm" tone="muted">
          Rendered as <code>&lt;h2&gt;</code> with the <code>sm</code> size, so
          the card stays compact without skipping a level in the outline.
        </Text>
      </section>
      <section className="flex flex-col gap-2 rounded-xl border bg-card p-5">
        <Heading level={3} size="display" className="text-brand">
          99.98%
        </Heading>
        <Text size="sm" tone="muted">
          Rendered as <code>&lt;h3&gt;</code> with the <code>display</code>{" "}
          size: a big number that's still a small heading.
        </Text>
      </section>
    </div>
  );
}

import { Text } from "@/components/ui/typography";

export default function TypographyText() {
  return (
    <div className="grid w-full max-w-2xl gap-8 sm:grid-cols-2">
      <div className="flex flex-col gap-3">
        <Text
          size="xs"
          tone="muted"
          weight="medium"
          className="uppercase tracking-wider"
        >
          Sizes
        </Text>
        <Text size="lg">lg — Intro copy and roomy layouts.</Text>
        <Text size="md">md — The default for reading.</Text>
        <Text size="sm">sm — Dense UI, cards and tables.</Text>
        <Text size="xs">xs — Captions and footnotes.</Text>
      </div>
      <div className="flex flex-col gap-3">
        <Text
          size="xs"
          tone="muted"
          weight="medium"
          className="uppercase tracking-wider"
        >
          Tones
        </Text>
        <Text>default — Primary reading color.</Text>
        <Text tone="subtle">subtle — Softer body copy.</Text>
        <Text tone="muted">muted — Metadata and helper text.</Text>
        <Text tone="brand" weight="medium">
          brand — Emphasis that matches links.
        </Text>
        <Text tone="danger" weight="medium">
          danger — Something went wrong.
        </Text>
        <Text tone="success" weight="medium">
          success — Saved and synced.
        </Text>
      </div>
    </div>
  );
}

import { Code, Small, Text } from "@/components/ui/typography";

export default function TypographyInline() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <Text>
        Run <Code>npx shadcn@latest add @desyne/typography</Code>, then import{" "}
        <Code>Heading</Code> and <Code>Text</Code> wherever you'd reach for a
        raw <Code>&lt;h2&gt;</Code> or <Code>&lt;p&gt;</Code>. Press{" "}
        <kbd className="rounded-sm border bg-muted px-1 font-mono text-[0.8em]">
          ⌘K
        </kbd>{" "}
        to search the docs.
      </Text>
      <Text size="sm" tone="muted">
        Prices exclude VAT.{" "}
        <Text as="strong" size="sm" weight="semibold" tone="default">
          Annual plans save 20%.
        </Text>
      </Text>
      <Small>
        © 2026 Wrenly Inc. Wrenly is a registered trademark. Terms apply.
      </Small>
    </div>
  );
}

import { Blockquote, Heading, List } from "@/components/ui/typography";

export default function TypographyQuoteAndList() {
  return (
    <div className="grid w-full max-w-2xl gap-8 sm:grid-cols-2">
      <div className="flex flex-col gap-3">
        <Heading level={3} size="xs">
          Before you launch
        </Heading>
        <List ordered>
          <li>Point your domain at the new deploy.</li>
          <li>Invite your team and assign roles.</li>
          <li>Turn on two-factor authentication.</li>
        </List>
        <Heading level={3} size="xs" className="mt-2">
          Included in Pro
        </Heading>
        <List spacing="sm">
          <li>Unlimited projects</li>
          <li>Audit log with 1-year retention</li>
          <li>SAML single sign-on</li>
        </List>
      </div>
      <Blockquote attribution="Priya Raman, Head of Design at Northwind">
        We replaced three internal libraries with one. New hires ship their
        first screen in a day instead of a week.
      </Blockquote>
    </div>
  );
}

import { Prose } from "@/components/ui/typography";

export default function TypographyProse() {
  return (
    <Prose className="w-full max-w-prose">
      <h1>Migrating to the new billing API</h1>
      <p>
        The v2 billing API replaces per-seat line items with{" "}
        <strong>usage records</strong>. Existing subscriptions keep working
        until <a href="#timeline">June 30</a>, but new features only ship on v2.
      </p>
      <h2 id="timeline">Timeline</h2>
      <ol>
        <li>
          <strong>Now:</strong> v2 is available behind the{" "}
          <code>billing_v2</code> flag.
        </li>
        <li>
          <strong>April 15:</strong> new workspaces default to v2.
        </li>
        <li>
          <strong>June 30:</strong> v1 endpoints return <code>410 Gone</code>.
        </li>
      </ol>
      <h2>Updating your client</h2>
      <p>Swap the subscription item call for a usage record:</p>
      <pre>
        <code>{`await billing.usage.create({
  subscription: "sub_42",
  quantity: seats.length,
  timestamp: Date.now(),
});`}</code>
      </pre>
      <blockquote>
        <p>
          Usage records are idempotent per timestamp, so retries never double
          charge.
        </p>
      </blockquote>
      <h3>Field changes</h3>
      <table>
        <thead>
          <tr>
            <th>v1 field</th>
            <th>v2 field</th>
            <th>Notes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <code>seats</code>
            </td>
            <td>
              <code>quantity</code>
            </td>
            <td>Now reported, not set.</td>
          </tr>
          <tr>
            <td>
              <code>plan</code>
            </td>
            <td>
              <code>price</code>
            </td>
            <td>Prices are versioned.</td>
          </tr>
        </tbody>
      </table>
      <ul>
        <li>Webhooks keep the same signatures.</li>
        <li>
          Invoices show usage per day.
          <ul>
            <li>Totals are unchanged.</li>
          </ul>
        </li>
      </ul>
      <hr />
      <p>
        Questions? Reply to the migration email or open a ticket from{" "}
        <a href="#support">Settings → Support</a>.
      </p>
    </Prose>
  );
}

import { useState } from "react";
import { ToggleButton } from "@/components/ui/toggle-button";
import { ToggleButtonGroup } from "@/components/ui/toggle-button-group";
import { Prose } from "@/components/ui/typography";

type Size = "sm" | "md" | "lg";

export default function TypographyProseSizes() {
  const [size, setSize] = useState<Size>("sm");
  return (
    <div className="flex w-full max-w-prose flex-col gap-5">
      <ToggleButtonGroup
        aria-label="Text size"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[size]}
        onSelectionChange={(keys) => setSize([...keys][0] as Size)}
        variant="segmented"
        size="sm"
        className="self-start"
      >
        <ToggleButton id="sm">Small</ToggleButton>
        <ToggleButton id="md">Medium</ToggleButton>
        <ToggleButton id="lg">Large</ToggleButton>
      </ToggleButtonGroup>
      <Prose size={size}>
        <h3>Release notes · 4.2</h3>
        <p>
          Comments now support <strong>threads</strong> and{" "}
          <a href="#mentions">@mentions</a>. Everything else scales with the
          size you pick, because the article measures in <code>em</code>.
        </p>
        <ul>
          <li>Resolve a thread to collapse it.</li>
          <li>Mentions notify by email after five minutes.</li>
        </ul>
      </Prose>
    </div>
  );
}