import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';

<Meta title="Pages/ShowcaseContent" />

<Title>ShowcaseContent</Title>
<Subtitle>Living brand-system showcase for the Xertica UI library, grounded in the IDXERTICA brand manual.</Subtitle>

---

## Overview

`ShowcaseContent` is a long-scroll reference page that demonstrates the Xertica UI design system with a focus on the
`xertica` brand theme — the IDXERTICA-compliant identity (Helvetica Neue/Inter typography, Coral focus/asterisk,
pill buttons with a 1px press-shift, shadow-free cards). It complements `TemplateContent`, which is a deep kitchen-sink
of every UI primitive: `ShowcaseContent` instead documents the brand system itself (typography scale, color palette,
isotypes, buttons, forms, cards) and closes with a compact tour of the remaining primitives not covered elsewhere.

```tsx
import { ShowcaseContent } from 'xertica-ui';

<ShowcaseContent defaultThemeId="xertica" />
```

---

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `defaultThemeId` | `string` | `undefined` | Brand theme id to switch to on mount (e.g. `"xertica"`). Left unset by default so embedding this content inside a host app never hijacks its active theme — only `ShowcasePage` opts into this. |

---

## Sections

1. **Theme switcher** — pills reading `useBrandColors()`, with `xertica` listed first and marked as recommended.
2. **Typography** — the full IDXERTICA type scale (Hero/Display, H1–H3, Body, Eyebrow, Nav, Button), rendered through
   `var(--font-heading)` / `var(--font-body)` so the fonts swap live when the theme changes.
3. **Colors & surfaces** — the fixed 10-color accent palette, 4 surface tones, approved color combinations, and the
   3 mandated color-intersection hexes. This section is intentionally static (hardcoded hex) and does not react to
   the active theme.
4. **Isotypes & logo** — `Mosaico`, `Cuadrados` (3 variants), `Isotipo` (3 variants), and the
   `XerticaLogo`/`XerticaXLogo` marks over hardcoded light surfaces, with the brand manual's "never" list as a
   caption.
5. **Buttons** — existing `Button` variants/sizes mapped onto the manual's 3 CTA colorways.
6. **Forms** — `Label` (required asterisk), `Input`, `Select`, `Textarea`, and a submit button.
7. **Cards** — the 6 `components/blocks/card-patterns` compositions with sample data.
8. **Controls** — `ThemeToggle` and `LanguageSelector`.
9. **Explore more** — a dense, tabbed tour of ~20 additional primitives not covered above. See `TemplateContent` for
   full depth on every remaining component.

---

## Theme Behavior

Brand CSS variables (`--font-heading`, `--button-active-shift`, `--card-hover-shadow`, etc.) are applied globally by
`BrandColorsContext` whenever the active theme defines them. `ShowcaseContent` never branches on `currentTheme`
directly — it renders through the normal design-system components, so switching themes updates typography, button
behavior, and card treatment automatically.

---

## AI Best Practices

> [!IMPORTANT]
> - **Brand reference first** - Before building brand-specific UI, check this page for the correct `xertica` theme composition.
> - **Static sections stay static** - The color/isotype swatches use fixed hex values from the IDXERTICA manual on purpose; do not make them theme-reactive.
> - **Depth lives in TemplateContent** - Do not duplicate the full primitive kitchen-sink here; link to `TemplateContent` instead.