import { sampleContentPack } from "@/data/sampleContentPack";

const planningDocs = [
  "Planning/PROJECT_PLAN.md",
  "Planning/GAME_SPEC.md",
  "Planning/content-checklist.json",
  "Planning/DATA_MODEL.md",
  "Planning/IMPLEMENTATION_NOTES.md",
];

const nextTargets = [
  "Encode Level 1 foundational tables into structured JSON.",
  "Implement dice utilities for D3, D6, 2D6, and D66.",
  "Create character creation state and validation.",
  "Build deterministic room generation for the Level 1 loop.",
];

function App() {
  return (
    <main className="app-shell">
      <section className="hero">
        <p className="eyebrow">2D6 Dungeon Web</p>
        <h1>Project scaffold is live.</h1>
        <p className="lede">
          The app now has a Vite + React + TypeScript foundation, shared type
          models, and Zod schemas that mirror the planning documents.
        </p>
      </section>

      <section className="panel-grid">
        <article className="panel">
          <h2>Planning Set</h2>
          <ul>
            {planningDocs.map((doc) => (
              <li key={doc}>{doc}</li>
            ))}
          </ul>
        </article>

        <article className="panel">
          <h2>Immediate Build Targets</h2>
          <ol>
            {nextTargets.map((target) => (
              <li key={target}>{target}</li>
            ))}
          </ol>
        </article>

        <article className="panel">
          <h2>Sample Content Pack</h2>
          <dl className="stats">
            <div>
              <dt>Tables</dt>
              <dd>{sampleContentPack.tables.length}</dd>
            </div>
            <div>
              <dt>Weapons</dt>
              <dd>{sampleContentPack.weapons.length}</dd>
            </div>
            <div>
              <dt>Manoeuvres</dt>
              <dd>{sampleContentPack.manoeuvres.length}</dd>
            </div>
            <div>
              <dt>Creatures</dt>
              <dd>{sampleContentPack.creatures.length}</dd>
            </div>
          </dl>
        </article>
      </section>
    </main>
  );
}

export default App;