export function AboutPanel() {
  return (
    <div className="max-w-2xl space-y-6">
      <div>
        <h2 className="font-bold text-slate-100 text-xl tracking-tight">About Idlegame</h2>
        <p className="text-slate-400 text-sm">A text-fantasy RPG incremental experience.</p>
      </div>

      <div className="space-y-6 text-slate-300">
        <section className="space-y-2">
          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
            How to Play
          </h3>
          <p className="text-sm leading-relaxed text-slate-400">
            Idlegame is driven by actions and choices. Select actions from the{' '}
            <strong className="text-amber-400">Play</strong> screen to execute them. Some actions
            are timed and can be queued. Once completed, they reward you with resources, unlock new
            deeds, or advance the chronicle.
          </p>
        </section>

        <section className="space-y-2">
          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
            The Chronicle
          </h3>
          <p className="text-sm leading-relaxed text-slate-400">
            As you perform actions, you will unlock narrative points of interest. Head to the{' '}
            <strong className="text-amber-400">Story</strong> tab to make crucial choices and read
            the history of your journey.
          </p>
        </section>

        <section className="space-y-2">
          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
            Technical Specs
          </h3>
          <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
            <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
              <dt className="text-slate-500">Version</dt>
              <dd className="font-mono text-slate-300">0.1.0 (M1 Milestone)</dd>
              <dt className="text-slate-500">Engine</dt>
              <dd className="text-slate-300">Pure TypeScript State Machine</dd>
              <dt className="text-slate-500">Framework</dt>
              <dd className="text-slate-300">React + Zustand + Tailwind CSS</dd>
              <dt className="text-slate-500">Target Platform</dt>
              <dd className="text-slate-300">Responsive Web & PWA</dd>
            </dl>
          </div>
        </section>
      </div>
    </div>
  );
}