import { define } from '../src'
import { Layout } from './helpers'

const P = define('P', {
  color: '#6b7280',
  fontSize: 18,
  marginBottom: 48,
})

const ExamplesGrid = define('ExamplesGrid', {
  display: 'grid',
  gap: 20,
  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
})

const ExampleCard = define('ExampleCard', {
  base: 'a',

  background: 'white',
  padding: 24,
  borderRadius: 12,
  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
  textDecoration: 'none',
  transition: 'all 0.2s ease',
  display: 'block',

  states: {
    hover: {
      transform: 'translateY(-2px)',
      boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
    }
  },

  parts: {
    H2: {
      color: '#111827',
      margin: '0 0 8px 0',
      fontSize: 20,
    },
    P: {
      color: '#6b7280',
      margin: 0,
      fontSize: 14,
    }
  },

  render({ props: { title, desc }, parts: { Root, H2, P } }) {
    return (
      <Root>
        <H2>{title}</H2>
        <P>{desc}</P>
      </Root>
    )
  }
})

export const IndexPage = () => (
  <Layout title="Forge Examples">
    <P>Explore component examples built with Forge</P>

    <ExamplesGrid>
      <ExampleCard href="/profile"
        title="Profile Card"
        desc="User profile component with variants for size, theme, and verified status"
      />

      <ExampleCard href="/buttons"
        title="Buttons"
        desc="Button component with intent, size, and disabled variants"
      />

      <ExampleCard href="/navigation"
        title="Navigation"
        desc="Navigation patterns including tabs, pills, vertical nav, and breadcrumbs"
      />
    </ExamplesGrid>
  </Layout>
)