import "./App.css"

const cards = [
  {
    title: "Assets",
    description: "Каталог исходных изображений и связанной metadata.",
  },
  {
    title: "Variants",
    description: "Будущие AVIF/WebP/JPEG variants, presets и статусы генерации.",
  },
  {
    title: "Storage",
    description: "PostgreSQL как source of truth, S3/MinIO как хранилище bytes.",
  },
]

export function App() {
  return (
    <main className="app-shell">
      <section className="hero">
        <p className="eyebrow">Image Platform Admin</p>
        <h1>чистый Vite React TS app</h1>
        <p className="lead">
          Это стартовая админка без UI-фреймворков. Дальше сюда добавим управление allowed hosts,
          assets, variants и presets.
        </p>
      </section>

      <section className="cards" aria-label="Будущие разделы">
        {cards.map((card) => (
          <article className="card" key={card.title}>
            <h2>{card.title}</h2>
            <p>{card.description}</p>
          </article>
        ))}
      </section>
    </main>
  )
}