import type { Meta, StoryObj } from '@storybook/react';
import Grid, { GridItem } from '../index.js';
import { GridProps } from '../types.js';
import { withGridStyles } from './GridDecorator.js';
import { SBContainer } from '@sb-utils/SBContainer.js';
import { SBDemoBox } from '@sb-utils/SBDemoBox.js';

const meta: Meta<GridProps> = {
  title: 'Component Library/Grid',
  component: Grid,
  parameters: {
    layout: 'centered',
    controls: { sort: 'alpha' },
    docs: {
      description: {
        component: `The Grid component is a flexible layout container that implements the CSS Grid API. It provides a powerful way to create two-dimensional layouts with customizable columns, rows, gaps, and alignment.`,
      },
    },
  },
  decorators: [withGridStyles],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    templateColumns: 'repeat(3, 1fr)',
    gap: '16px',
    children: (
      <>
        <GridItem as={SBDemoBox}>Box 1</GridItem>
        <GridItem as={SBDemoBox}>Box 2</GridItem>
        <GridItem as={SBDemoBox}>Box 3</GridItem>
        <GridItem as={SBDemoBox}>Box 4</GridItem>
        <GridItem as={SBDemoBox}>Box 5</GridItem>
        <GridItem as={SBDemoBox}>Box 6</GridItem>
      </>
    ),
  },
};

export const TemplateColumns: Story = {
  name: 'Template Columns',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Equal Columns (repeat)</h4>
        <p>3 equal columns using repeat(3, 1fr)</p>
        <Grid templateColumns="repeat(3, 1fr)" gap="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Fixed and Flexible Columns</h4>
        <p>200px, auto, 1fr - fixed, content-fit, and flexible</p>
        <Grid templateColumns="200px auto 1fr" gap="16px">
          <GridItem as={SBDemoBox}>200px</GridItem>
          <GridItem as={SBDemoBox}>Auto</GridItem>
          <GridItem as={SBDemoBox}>1fr</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Columns (auto-fit)</h4>
        <p>Automatically fits columns, minimum 150px each</p>
        <Grid templateColumns="repeat(auto-fit, minmax(150px, 1fr))" gap="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Columns (auto-fill)</h4>
        <p>Fills space with columns, minimum 100px each</p>
        <Grid
          templateColumns="repeat(auto-fill, minmax(100px, 1fr))"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const TemplateRows: Story = {
  name: 'Template Rows',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Equal Rows</h4>
        <p>3 columns with 2 equal-height rows (100px each)</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="repeat(2, 100px)"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Mixed Row Heights</h4>
        <p>Header (auto), content (1fr), footer (auto)</p>
        <Grid
          templateColumns="1fr"
          templateRows="auto 1fr auto"
          gap="16px"
          style={{ height: '300px' }}
        >
          <GridItem as={SBDemoBox}>Header</GridItem>
          <GridItem as={SBDemoBox}>Main Content (fills space)</GridItem>
          <GridItem as={SBDemoBox}>Footer</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const AutoFlow: Story = {
  name: 'Auto Flow',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Row Flow (Default)</h4>
        <p>Items flow horizontally across rows</p>
        <Grid templateColumns="repeat(3, 1fr)" autoFlow="row" gap="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Column Flow</h4>
        <p>Items flow vertically down columns</p>
        <Grid templateRows="repeat(3, 1fr)" autoFlow="column" gap="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Dense Packing</h4>
        <p>Fills gaps with smaller items</p>
        <Grid templateColumns="repeat(4, 1fr)" autoFlow="row dense" gap="16px">
          <GridItem as={SBDemoBox} gridColumn="span 2">
            1 (spans 2)
          </GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox} gridColumn="span 2">
            5 (spans 2)
          </GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const AlignItems: Story = {
  name: 'Align Items',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Stretch (Default)</h4>
        <p>Items stretch to fill cell height</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="100px"
          alignItems="stretch"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Start</h4>
        <p>Items aligned to top of cell</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="100px"
          alignItems="start"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox} tall>
            2
          </GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Center</h4>
        <p>Items centered vertically in cell</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="100px"
          alignItems="center"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox} tall>
            2
          </GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>End</h4>
        <p>Items aligned to bottom of cell</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="100px"
          alignItems="end"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox} tall>
            2
          </GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const JustifyContent: Story = {
  name: 'Justify Content',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Start (Default)</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="start"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Center</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="center"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>End</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="end"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Between</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="space-between"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Around</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="space-around"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Space Evenly</h4>
        <Grid
          templateColumns="repeat(3, 100px)"
          justifyContent="space-evenly"
          gap="16px"
          style={{ border: '2px dashed #ccc', padding: '16px' }}
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const Gaps: Story = {
  name: 'Gap Spacing',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>No Gap</h4>
        <Grid templateColumns="repeat(3, 1fr)">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>8px Gap</h4>
        <Grid templateColumns="repeat(3, 1fr)" gap="8px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>16px Gap</h4>
        <Grid templateColumns="repeat(3, 1fr)" gap="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>24px Gap</h4>
        <Grid templateColumns="repeat(3, 1fr)" gap="24px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const SemanticElements: Story = {
  name: 'Semantic HTML Elements',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>As Section</h4>
        <Grid as="section" templateColumns="repeat(3, 1fr)" gap="16px">
          <GridItem as={SBDemoBox}>Item 1</GridItem>
          <GridItem as={SBDemoBox}>Item 2</GridItem>
          <GridItem as={SBDemoBox}>Item 3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>As Nav</h4>
        <Grid as="nav" templateColumns="repeat(3, 1fr)" gap="16px">
          <GridItem as={SBDemoBox}>Home</GridItem>
          <GridItem as={SBDemoBox}>About</GridItem>
          <GridItem as={SBDemoBox}>Contact</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>As Article</h4>
        <Grid as="article" templateColumns="1fr 2fr" gap="16px">
          <GridItem as={SBDemoBox}>Sidebar</GridItem>
          <GridItem as={SBDemoBox}>Main Content</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const InlineGrid: Story = {
  name: 'Inline Grid',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Regular Grid (Block Level)</h4>
        <p>Before grid container</p>
        <Grid templateColumns="repeat(3, 1fr)" gap="8px" marginBlock="16px">
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
        <p>After grid container</p>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Inline Grid</h4>
        <p>
          Before grid container{' '}
          <Grid inline templateColumns="repeat(3, 1fr)" gap="8px">
            <GridItem as={SBDemoBox}>1</GridItem>
            <GridItem as={SBDemoBox}>2</GridItem>
            <GridItem as={SBDemoBox}>3</GridItem>
          </Grid>{' '}
          after grid container
        </p>
      </SBContainer>
    </SBContainer>
  ),
};

export const LayoutExamples: Story = {
  name: 'Layout Examples',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Dashboard Layout</h4>
        <p>Header, sidebar, main content, footer</p>
        <Grid
          templateColumns="200px 1fr"
          templateRows="auto 1fr auto"
          gap="16px"
          style={{ height: '400px' }}
        >
          <GridItem as={SBDemoBox} gridColumn="1 / -1">
            Header
          </GridItem>
          <GridItem as={SBDemoBox}>Sidebar</GridItem>
          <GridItem as={SBDemoBox}>Main Content</GridItem>
          <GridItem as={SBDemoBox} gridColumn="1 / -1">
            Footer
          </GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Magazine Layout</h4>
        <p>Featured article with smaller articles</p>
        <Grid
          templateColumns="repeat(4, 1fr)"
          templateRows="repeat(2, 150px)"
          gap="16px"
        >
          <GridItem as={SBDemoBox} gridColumn="span 2" gridRow="span 2">
            Featured Article
          </GridItem>
          <GridItem as={SBDemoBox}>Article 2</GridItem>
          <GridItem as={SBDemoBox}>Article 3</GridItem>
          <GridItem as={SBDemoBox}>Article 4</GridItem>
          <GridItem as={SBDemoBox}>Article 5</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const ResponsiveGrid: Story = {
  name: 'Responsive Breakpoints',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Responsive Columns</h4>
        <p>
          Mobile: 1 column | Tablet (768px): 2 columns | Desktop (1024px): 3
          columns
        </p>
        <p style={{ fontSize: '12px', color: '#666' }}>
          Resize your browser to see the layout change
        </p>
        <Grid
          templateColumns="1fr"
          templateColumnsMd="repeat(2, 1fr)"
          templateColumnsLg="repeat(3, 1fr)"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>Item 1</GridItem>
          <GridItem as={SBDemoBox}>Item 2</GridItem>
          <GridItem as={SBDemoBox}>Item 3</GridItem>
          <GridItem as={SBDemoBox}>Item 4</GridItem>
          <GridItem as={SBDemoBox}>Item 5</GridItem>
          <GridItem as={SBDemoBox}>Item 6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Gap</h4>
        <p>Mobile: 8px | Tablet: 16px | Desktop: 24px</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          gap="8px"
          gapMd="16px"
          gapLg="24px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
          <GridItem as={SBDemoBox}>6</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Flow Direction</h4>
        <p>Mobile: row flow | Tablet: column flow | Desktop: row flow</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="repeat(2, 100px)"
          autoFlow="row"
          autoFlowMd="column"
          autoFlowLg="row"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
          <GridItem as={SBDemoBox}>4</GridItem>
          <GridItem as={SBDemoBox}>5</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Alignment</h4>
        <p>Mobile: stretch | Tablet: center | Desktop: start</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="100px"
          alignItems="stretch"
          alignItemsMd="center"
          alignItemsLg="start"
          gap="16px"
        >
          <GridItem as={SBDemoBox}>1</GridItem>
          <GridItem as={SBDemoBox}>2</GridItem>
          <GridItem as={SBDemoBox}>3</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Dashboard with Responsive Layout</h4>
        <p>
          Mobile: stacked | Tablet: sidebar + content | Desktop: wider layout
        </p>
        <Grid
          templateColumns="1fr"
          templateColumnsMd="200px 1fr"
          templateColumnsLg="250px 1fr"
          templateRows="auto auto auto auto"
          templateRowsMd="auto 1fr auto"
          gap="12px"
          gapMd="16px"
          gapLg="24px"
          style={{ height: '400px' }}
        >
          <GridItem as={SBDemoBox} gridColumn="1 / -1">
            Header
          </GridItem>
          <GridItem as={SBDemoBox}>Sidebar</GridItem>
          <GridItem as={SBDemoBox} style={{ paddingBottom: '32px' }}>
            Main Content
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="1 / -1">
            Footer
          </GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const GridItemPlacement: Story = {
  name: 'GridItem - Column & Row Placement',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Column Spanning</h4>
        <p>Use gridColumn prop to span multiple columns</p>
        <Grid templateColumns="repeat(4, 1fr)" gap="16px">
          <GridItem as={SBDemoBox} gridColumn="span 2">
            Spans 2 columns
          </GridItem>
          <GridItem as={SBDemoBox}>Auto</GridItem>
          <GridItem as={SBDemoBox}>Auto</GridItem>
          <GridItem as={SBDemoBox} gridColumn="span 3">
            Spans 3 columns
          </GridItem>
          <GridItem as={SBDemoBox}>Auto</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Explicit Placement</h4>
        <p>Use gridColumn and gridRow to place items at specific positions</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="repeat(3, 100px)"
          gap="16px"
        >
          <GridItem as={SBDemoBox} gridColumn="1" gridRow="1">
            1,1
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="3" gridRow="1">
            3,1
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="2" gridRow="2">
            2,2 (center)
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="1" gridRow="3">
            1,3
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="3" gridRow="3">
            3,3
          </GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Line-Based Placement</h4>
        <p>Use line numbers for precise control</p>
        <Grid
          templateColumns="repeat(4, 1fr)"
          templateRows="repeat(2, 100px)"
          gap="16px"
        >
          <GridItem as={SBDemoBox} gridColumn="1 / 3" gridRow="1">
            Columns 1-3
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="3 / 5" gridRow="1 / 3">
            Columns 3-5, Rows 1-3
          </GridItem>
          <GridItem as={SBDemoBox} gridColumn="1 / 3" gridRow="2">
            Columns 1-3, Row 2
          </GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const GridItemAlignment: Story = {
  name: 'GridItem - Individual Alignment',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Align Self</h4>
        <p>Override grid-level alignment for individual items</p>
        <Grid
          templateColumns="repeat(3, 1fr)"
          templateRows="150px"
          alignItems="stretch"
          gap="16px"
        >
          <GridItem as={SBDemoBox} alignSelf="start">
            Start
          </GridItem>
          <GridItem as={SBDemoBox} alignSelf="center">
            Center
          </GridItem>
          <GridItem as={SBDemoBox} alignSelf="end">
            End
          </GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Justify Self</h4>
        <p>Control horizontal alignment within grid cell</p>
        <Grid templateColumns="repeat(3, 200px)" gap="16px">
          <GridItem as={SBDemoBox} justifySelf="start">
            Start
          </GridItem>
          <GridItem as={SBDemoBox} justifySelf="center">
            Center
          </GridItem>
          <GridItem as={SBDemoBox} justifySelf="end">
            End
          </GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Combined Alignment</h4>
        <p>Use both alignSelf and justifySelf together</p>
        <Grid templateColumns="repeat(3, 1fr)" templateRows="150px" gap="16px">
          <GridItem as={SBDemoBox} alignSelf="start" justifySelf="start">
            Top Left
          </GridItem>
          <GridItem as={SBDemoBox} alignSelf="center" justifySelf="center">
            Center
          </GridItem>
          <GridItem as={SBDemoBox} alignSelf="end" justifySelf="end">
            Bottom Right
          </GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const GridItemResponsive: Story = {
  name: 'GridItem - Responsive Positioning',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>Responsive Spanning</h4>
        <p>
          Mobile: full width | Tablet: spans 2 cols | Desktop: single column
        </p>
        <p style={{ fontSize: '12px', color: '#666' }}>
          Resize browser to see changes
        </p>
        <Grid
          templateColumns="1fr"
          templateColumnsMd="repeat(3, 1fr)"
          templateColumnsLg="repeat(4, 1fr)"
          gap="16px"
        >
          <GridItem
            as={SBDemoBox}
            gridColumn="1"
            gridColumnMd="span 2"
            gridColumnLg="span 1"
          >
            Responsive Span
          </GridItem>
          <GridItem as={SBDemoBox}>Item 2</GridItem>
          <GridItem as={SBDemoBox}>Item 3</GridItem>
          <GridItem as={SBDemoBox}>Item 4</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Position Changes</h4>
        <p>Items change position at different breakpoints</p>
        <Grid
          templateColumns="1fr"
          templateColumnsMd="repeat(2, 1fr)"
          templateColumnsLg="repeat(3, 1fr)"
          gap="16px"
        >
          <GridItem
            as={SBDemoBox}
            gridColumn="1"
            gridColumnMd="2"
            gridColumnLg="1"
          >
            Position changes
          </GridItem>
          <GridItem
            as={SBDemoBox}
            gridColumn="1"
            gridColumnMd="1"
            gridColumnLg="3"
          >
            Also repositions
          </GridItem>
          <GridItem as={SBDemoBox}>Auto placed</GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Responsive Alignment</h4>
        <p>Alignment changes at different breakpoints</p>
        <Grid templateColumns="repeat(3, 1fr)" templateRows="120px" gap="16px">
          <GridItem
            as={SBDemoBox}
            alignSelf="start"
            alignSelfMd="center"
            alignSelfLg="end"
          >
            Changes alignment
          </GridItem>
          <GridItem
            as={SBDemoBox}
            justifySelf="start"
            justifySelfMd="center"
            justifySelfLg="end"
          >
            Shifts horizontally
          </GridItem>
          <GridItem as={SBDemoBox}>Regular item</GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};

export const GridItemWithComponents: Story = {
  name: 'GridItem - With Components (as prop)',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge" minWidth="600px">
      <SBContainer addBackground>
        <h4>GridItem as Semantic Elements</h4>
        <p>Use the `as` prop to render GridItem as different HTML elements</p>
        <Grid as="section" templateColumns="repeat(2, 1fr)" gap="16px">
          <GridItem as="article">
            <div
              style={{
                padding: '16px',
                background: '#f0f0f0',
                borderRadius: '4px',
              }}
            >
              Article element
            </div>
          </GridItem>
          <GridItem as="aside">
            <div
              style={{
                padding: '16px',
                background: '#f0f0f0',
                borderRadius: '4px',
              }}
            >
              Aside element
            </div>
          </GridItem>
          <GridItem as="header" gridColumn="1 / -1">
            <div
              style={{
                padding: '16px',
                background: '#f0f0f0',
                borderRadius: '4px',
              }}
            >
              Header element (full width)
            </div>
          </GridItem>
        </Grid>
      </SBContainer>

      <SBContainer addBackground>
        <h4>GridItem as Component</h4>
        <p>Use GridItem with `as` prop to render as SBDemoBox component</p>
        <Grid templateColumns="repeat(3, 1fr)" gap="16px">
          <GridItem as={SBDemoBox} gridColumn="span 2">
            GridItem as SBDemoBox (spans 2 columns)
          </GridItem>
          <GridItem as={SBDemoBox}>
            GridItem as SBDemoBox (auto-placed)
          </GridItem>
          <GridItem as={SBDemoBox}>GridItem as SBDemoBox</GridItem>
          <GridItem as={SBDemoBox} gridColumn="2 / 4">
            GridItem as SBDemoBox (columns 2-4)
          </GridItem>
        </Grid>
      </SBContainer>
    </SBContainer>
  ),
};
