Bento Grid — 4 Cell

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * BentoGrid4 — Four equal cells in a responsive bento grid.
 *
 * 1 column on phone, 2×2 on tablet/desktop. Every cell is the same size —
 * use BentoCard (or any markup) inside each slot. Gap is configurable via
 * the `gap` prop (Tailwind gap scale number, e.g. 4, 6, 8).
 *
 * Usage:
 *   <BentoGrid4>
 *     <BentoCard slot="cell-1" variant="icon" title="Fast" />
 *     <BentoCard slot="cell-2" variant="stat" value="99.9%" label="Uptime" />
 *     <BentoCard slot="cell-3" variant="icon" title="Secure" />
 *     <BentoCard slot="cell-4" variant="icon" title="Scalable" />
 *   </BentoGrid4>
 */
export interface Props {
  as?: 'div' | 'section';
  gap?: 4 | 5 | 6 | 8;
  className?: string;
}

const { as: As = 'div', gap = 6, className = '' } = Astro.props;

const GAP: Record<number, string> = {
  4: 'gap-4',
  5: 'gap-5',
  6: 'gap-6',
  8: 'gap-8',
};
---

<As class:list={['grid grid-cols-1 sm:grid-cols-2', GAP[gap], className]}>
  <div class="min-w-0"><slot name="cell-1" /></div>
  <div class="min-w-0"><slot name="cell-2" /></div>
  <div class="min-w-0"><slot name="cell-3" /></div>
  <div class="min-w-0"><slot name="cell-4" /></div>
</As>