'use client'

import { ProductCapabilitiesCard } from './_components/product-capabilities-card'
import { GrnTaxCard } from './_components/grn-tax-card'

export default function ConfigurationPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-semibold text-foreground">Configuration</h1>
        <p className="text-sm text-muted-foreground mt-0.5">System-wide settings, grouped by area</p>
      </div>

      {/* 12-column grid: each card takes 6 columns so the two sit side by side; they stack on narrow screens. */}
      <div className="grid grid-cols-12 items-stretch gap-6">
        <div className="col-span-12 flex lg:col-span-6 [&>*]:w-full">
          <ProductCapabilitiesCard />
        </div>
        <div className="col-span-12 flex lg:col-span-6 [&>*]:w-full">
          <GrnTaxCard />
        </div>
      </div>
    </div>
  )
}