import Head from 'next/head';

import { AdminLayout } from '../../components/AdminLayout';

const cards = [
  {
    title: 'Menu builder',
    body: 'Create offerings, upload photos, and set inventory caps without leaving the page.',
  },
  {
    title: 'Orders & pick tickets',
    body: 'Review today’s bake list, tap through stages, and open iPad-friendly pick tickets.',
  },
  {
    title: 'Inventory & ingredients',
    body: 'Track flour, butter, and fillings with automatic depletion and restock alerts.',
  },
  {
    title: 'Analytics',
    body: 'See weekly order trends, best sellers, and forecast upcoming bake volumes.',
  },
];

export default function AdminHome() {
  return (
    <>
      <Head>
        <title>Full Moon Bakehouse · Admin</title>
      </Head>
      <AdminLayout title="Operations dashboard">
        <div className="admin-section">
          <p className="admin-muted" style={{ maxWidth: '540px' }}>
            Built for a one-woman bakehouse: fast edits, real-time inventory, and workflows that
            translate beautifully to an iPad on the counter.
          </p>

          <div className="admin-products-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}>
            {cards.map((card) => (
              <article key={card.title} className="admin-product-card">
                <header>
                  <h3>{card.title}</h3>
                </header>
                <p>{card.body}</p>
              </article>
            ))}
          </div>

          <p className="empty-state" style={{ textAlign: 'left' }}>
            Authentication and role-aware dashboards land alongside the order board—this page is a
            stub until those pieces go live.
          </p>
        </div>
      </AdminLayout>
    </>
  );
}
