'use client';

import Link from 'next/link';

const SHORTCUTS = [
  {
    title: 'Manage Users',
    href: '/super-admin/users',
    description: 'Add or edit staff accounts',
    icon: '👥',
  },
  {
    title: 'View Deliveries',
    href: '/super-admin/deliveries',
    description: 'Real-time delivery feed',
    icon: '🚚',
  },
  {
    title: 'Supply Plans',
    href: '/super-admin/supply-plans',
    description: 'Upload and track allocations',
    icon: '📊',
  },
  {
    title: 'Master Data',
    href: '/super-admin/masters',
    description: 'Schools, commodities, suppliers',
    icon: '🗄️',
  },
  {
    title: 'Plan Periods',
    href: '/super-admin/plan-periods',
    description: 'Configure academic terms',
    icon: '📅',
  },
  {
    title: 'System Settings',
    href: '/super-admin/settings',
    description: 'Global configuration',
    icon: '⚙️',
  },
];

export function FeatureGallery() {
  return (
    <section className="mt-10 rounded-3xl border border-slate-100 bg-white p-6 shadow-sm">
      <header className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div>
          <p className="text-xs uppercase tracking-widest text-brand">Quick Navigation</p>
          <h3 className="text-2xl font-semibold text-slate-900">Shortcuts</h3>
          <p className="text-sm text-slate-500">Fast access to frequently used admin tools.</p>
        </div>
      </header>
      <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {SHORTCUTS.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="group flex items-start gap-4 rounded-2xl border border-slate-100 p-4 transition hover:border-brand/20 hover:bg-brand/5 hover:shadow-md"
          >
            <span className="text-2xl">{item.icon}</span>
            <div>
              <p className="font-semibold text-slate-900 group-hover:text-brand">{item.title}</p>
              <p className="text-xs text-slate-500">{item.description}</p>
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
}