import { Link } from "react-router-dom";

export function DashboardPage() {
  return (
    <div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel backdrop-blur">
        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Foundation Status</p>
        <h3 className="mt-3 text-3xl font-bold text-text">Platform primitives are online.</h3>
        <p className="mt-4 max-w-2xl text-sm leading-7 text-muted">
          Authentication, RBAC, runtime branding, attachment storage, Docker deployment, and a planning visualization wrapper are now structured for future domain expansion.
        </p>
        <div className="mt-8 flex flex-wrap gap-3">
          <Link className="rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white" to="/settings/company">
            Manage company profile
          </Link>
          <Link className="rounded-2xl border border-line/70 px-5 py-3 text-sm font-semibold text-text" to="/planning/gantt">
            Open gantt preview
          </Link>
        </div>
      </section>
      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel backdrop-blur">
        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Roadmap</p>
        <div className="mt-5 space-y-4">
          {[
            "CRM reference entities are seeded and available via protected APIs.",
            "Company Settings drives runtime brand tokens and PDF identity.",
            "The next module phase can add BOMs, orders, and shipping documents without app-shell refactors.",
          ].map((item) => (
            <div key={item} className="rounded-2xl border border-line/70 bg-page/70 px-4 py-4 text-sm text-text">
              {item}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}