import { Meta, Title, Subtitle, Description, Canvas } from '@storybook/addon-docs/blocks';
import * as BrandingStories from './branding.stories';

<Meta of={BrandingStories} />

<Title>Branding</Title>
<Subtitle>Visual identity components for Xertica.ai applications.</Subtitle>

<Description>
The Branding module contains the official logos and icons for Xertica.ai. These components are designed to be theme-aware and responsive, ensuring consistent brand representation across all parts of the design system.
</Description>

## Logos

### Full Logo
The standard Xertica.ai logo, available in multiple color variants to suit different backgrounds and themes.

<Canvas>
  <BrandingStories.Logos />
</Canvas>

## AI Best Practices

> [!IMPORTANT]
> - **Variants** — Use `default` on light/neutral backgrounds, `white` on dark or colored backgrounds, and `theme` to inherit the surrounding text color. There is no `brand` or `dark` variant.
> - **Scaling** — Always specify a height (`h-*`) and use `w-auto` to maintain the correct aspect ratio.
> - **Icon Usage** — Use `XerticaXLogo` for favicon-like placements, profile avatars, or collapsed sidebars where horizontal space is limited.