import { Plus, Search, ArrowLeft } from '@lucide/icons';
import { FayeMark } from '@fayegram-ai/faye-ui/icons';
import { ThemeScope } from '@fayegram-ai/faye-ui/provider/provider';
import { ScopedBaseline } from '@fayegram-ai/faye-ui/core/scoped-baseline';
import { Box } from '@fayegram-ai/faye-ui/core/box';
import { Text, Heading } from '@fayegram-ai/faye-ui/core/text';
import { Surface, Card, CardHeader, CardBody, CardFooter } from '@fayegram-ai/faye-ui/core/surface';
import { Separator } from '@fayegram-ai/faye-ui/core/separator';
import { Code, Kbd } from '@fayegram-ai/faye-ui/core/code';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { VisuallyHidden, SkipLink } from '@fayegram-ai/faye-ui/core/visually-hidden';
import { Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Section } from '../example';
export default function Foundations() {
    return <><Section title="Typography and semantic structure"><ScopedBaseline><Box as="section" p="2"><Stack gap="3"><Heading level={4}>Structure before decoration</Heading><Text as="p" size="lg">A readable baseline for product interfaces.</Text><Text as="p" tone="muted">Use semantic roles; the same tokens resolve in both schemes.</Text><Text as="p" size="sm"><Code>color.text</Code> is a meaning, not a palette index. Press <Kbd>Tab</Kbd> to explore.</Text><Inline><Icon icon={Plus} label="Add item"/><Text>Import artwork explicitly; icons inherit color through the shared renderer.</Text></Inline><Separator /><Text as="p" truncate title="A long title remains available through native title">A deliberately long title that may be truncated in a constrained layout while preserving the original text.</Text><VisuallyHidden>Additional screen-reader context.</VisuallyHidden></Stack></Box></ScopedBaseline></Section><Section title="Icon artwork and compatibility"><Stack gap="3"><Inline wrap>{(["xs", "sm", "md", "lg"] as const).map(size => <Inline key={size}><Icon icon={Search} size={size} label={`Search ${size}`}/><Icon icon={FayeMark} size={size} label={`Faye ${size}`}/><Text size="sm">{size}</Text></Inline>)}</Inline><ThemeScope direction="rtl"><Inline><Icon icon={ArrowLeft} size="sm" label="Directional action" mirrorInRtl style={{transform:"translateY(1px)"}}/><Text size="sm">Directional artwork mirrors inside its positioned frame.</Text></Inline></ThemeScope><Inline><Icon size="sm" label="Legacy custom action"><path d="M12 5v14M5 12h14"/></Icon><Text size="sm">SVG children remain supported with their original stroke default.</Text></Inline></Stack></Section><Section title="Surfaces and cards"><Inline wrap>{(['plain', 'subtle', 'outlined', 'raised'] as const).map(variant => <Surface key={variant} variant={variant} padding="md"><Text>{variant}</Text></Surface>)}</Inline><Card><CardHeader><Heading level={4} size="sm">Research workspace</Heading></CardHeader><CardBody><Text as="p" tone="muted">Header, body and footer share spacing, not business rules.</Text></CardBody><CardFooter><Text size="sm">Updated locally</Text></CardFooter></Card><SkipLink href="#live-example">Skip this preview</SkipLink></Section></>;
}