import { AdminShell, EmptyState } from '../../components/admin/admin-page.jsx';

export const runtime = 'nodejs';
export const dynamic = 'force-dynamic';

export default function SettingsAppearancePage() {
  return (
    <AdminShell
      kicker="Settings"
      title="Appearance"
      description="Theme, accent color, and density. These controls land in a later phase — current values are read-only previews."
      hideProjectSwitcher
    >
      <div className="mkt-page" data-page="settings-appearance">
        <section className="mkt-stats">
          <div className="mkt-stat"><b>Light</b><span>Theme</span></div>
          <div className="mkt-stat"><b>Mars 600</b><span>Accent</span></div>
          <div className="mkt-stat"><b>Regular</b><span>Density</span></div>
          <div className="mkt-stat"><b>On</b><span>Animations</span></div>
        </section>
        <section className="mkt-section">
          <div className="mkt-card mkt-card-form">
            <EmptyState title="Coming soon">
              Theme switching (light / dark / system), accent picker, and density controls will appear here in the next Settings phase. For now, the app uses a single tuned palette to keep visual diff small.
            </EmptyState>
          </div>
        </section>
      </div>
    </AdminShell>
  );
}
