// FeatureBento — Linear/Vercel-style mixed-size feature grid. Cells
// support three sizes (`wide`, `tall`, `square`) and arrange into a
// 4-column grid on desktop, single column on mobile.
//
// Each cell has its own hover treatment: a soft glow plus a subtle
// border lift. Pass an `accent` ReactNode to render a custom
// illustration / mini-demo as the cell's hero area.

import type { ReactNode } from 'react'
import { cn } from '../cn'

export interface BentoCellProps {
  readonly title: ReactNode
  readonly description: ReactNode
  /** Icon shown in the top-left chip. */
  readonly icon?: ReactNode
  /** Custom hero/illustration on the cell. */
  readonly accent?: ReactNode
  /** Cell size: 'wide' (cols 1-2 on desktop), 'tall' (rows 1-2),
   *  'square' (1×1). Default 'square'. */
  readonly size?: 'wide' | 'tall' | 'square'
  /** Optional extra content rendered below the description in the text
   *  column — e.g. a "Learn more" link. */
  readonly children?: ReactNode
  readonly className?: string
}

interface BentoProps {
  readonly children: ReactNode
  readonly className?: string
}

const sizeClass: Record<NonNullable<BentoCellProps['size']>, string> = {
  wide:   'md:col-span-2',
  tall:   'md:row-span-2',
  square: '',
}

export const Bento = ({ children, className }: BentoProps): ReactNode => (
  <div
    className={cn(
      // Rows are at least 240px tall but expand to fit content — so
      // a long-copy cell never has its text mashed against the
      // bottom edge, and short-copy cells keep visual rhythm.
      'not-prose grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-[minmax(240px,auto)]',
      className,
    )}
  >
    {children}
  </div>
)

export const BentoCell = ({
  title, description, icon, accent, size = 'square', className, children,
}: BentoCellProps): ReactNode => (
  <div
    className={cn(
      'group relative overflow-hidden rounded-xl border border-border',
      'bg-gradient-to-br from-card/60 to-card/20 backdrop-blur-sm',
      'p-6 flex flex-col',
      // Inner highlight stroke for the lit-from-above feel
      'before:absolute before:inset-x-6 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/40 before:to-transparent',
      // Hover treatment
      'hover:border-primary/40 hover:shadow-[0_8px_32px_-12px_oklch(0.55_0.25_290_/_0.4)]',
      'transition-[border-color,box-shadow] duration-300',
      sizeClass[size],
      className,
    )}
  >
    {/* Hero illustration slot — pinned to the cell's right edge, full
     * height, ~50% wide. Accents inside can use `top-1/2
     * -translate-y-1/2` to vertically centre on the cell. Text on the
     * left stays clear because it has its own constrained max-width
     * below. */}
    {accent ? (
      <div
        aria-hidden="true"
        className="absolute right-0 inset-y-0 w-1/2 overflow-hidden pointer-events-none opacity-70 group-hover:opacity-100 transition-opacity duration-500"
      >
        {accent}
      </div>
    ) : null}

    {/* Content column — explicit max-width so text always stays clear
     * of the right-half accent slot. ~32ch reads as roughly 280px at
     * text-sm, which leaves comfortable breathing room next to any
     * w-28 / w-32 accent in the right half of the cell. */}
    <div className="relative max-w-[32ch]">
      {icon ? (
        <div className="inline-flex items-center justify-center w-9 h-9 rounded-md bg-primary/10 text-primary mb-4 [&_svg]:w-5 [&_svg]:h-5">
          {icon}
        </div>
      ) : null}
      <h3 className="text-lg font-semibold text-foreground tracking-tight">
        {title}
      </h3>
      <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
        {description}
      </p>
      {children}
    </div>
  </div>
)