hanzo.ai/components/product/Stack.tsx

'use client'

import Link from 'next/link'
import { Text, View } from '@hanzo/ui'
import { LAYERS, href, type Layer } from '@/lib/layers'
import { Line } from '@hanzo/ui/marketing'

/**
 * Hanzo OS, drawn: the layers as rows, the company on top and the machines
 * at the foot, with the Record beside them as the rail — a column from 768px,
 * the last row below it. `current` marks the page a reader is on.
 */

export function Stack({ current }: { current?: string }) {
  const row = (l: Layer) => (
    <Line
      render={<Link href={href(l)} aria-current={l.id === current ? 'page' : undefined} />}
      display="grid"
      gridTemplateColumns="6.5rem minmax(0, 1fr)"
      gap={16}
      items="baseline"
      py={16}
      px={20}
      borderWidth={1}
      borderStyle={l.rail ? 'dashed' : 'solid'}
      borderColor={l.id === current ? 'var(--foreground)' : 'var(--border)'}
      rounded="var(--radius-lg)"
      hoverStyle={{ borderColor: 'var(--foreground)' }}
      $md={l.rail ? { gridColumn: 2, gridRow: '1 / -1', self: 'stretch', gridTemplateColumns: '1fr', content: 'flex-start' } : undefined}
      fontSize="$2"
      color="var(--muted-foreground)"
      lineHeight="var(--leading-relaxed)"
    >
      <Line render="b" color="var(--foreground)" fontWeight="var(--weight-medium)">{l.name}</Line>
      <span>{l.line}</span>
    </Line>
  )
  const rail = LAYERS.find((l) => l.rail)
  return (
    <View render="nav" aria-label="Hanzo OS" display="grid" gap={8} width="100%" $md={{ gridTemplateColumns: 'minmax(0, 1fr) 13rem' }}>
      <View render="ol" display="grid" gap={8} m={0} p={0} $platform-web={{ listStyle: 'none' }}>
        {LAYERS.filter((l) => !l.rail).map((l) => (
          <li key={l.id}>{row(l)}</li>
        ))}
      </View>
      {rail ? row(rail) : null}
    </View>
  )
}