import { StatCard } from "@aidoit/ui";

const navigation = [
  "Overview",
  "Projects",
  "Runs",
  "Tasks",
  "Teams",
  "Tools",
  "Deployments",
  "Servers",
];

export default function HomePage() {
  return (
    <main className="app-shell">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">A</div>
          <div>
            <strong>Aidoit</strong>
            <span>Personal AI OS</span>
          </div>
        </div>

        <nav>
          {navigation.map((item, index) => (
            <a className={index === 0 ? "active" : ""} href="#" key={item}>
              {item}
            </a>
          ))}
        </nav>

        <div className="api-status">
          <span />
          Development environment
        </div>
      </aside>

      <section className="workspace">
        <header className="hero">
          <div>
            <p className="eyebrow">AIDOIT CONTROL CENTER</p>
            <h1>Good evening, Pavel.</h1>
            <p>
              Build applications, orchestrate AI teams, and manage infrastructure
              from one workspace.
            </p>
          </div>
          <button type="button">New project</button>
        </header>

        <section className="stats-grid" aria-label="Workspace statistics">
          <StatCard label="Projects" value="0" detail="Web, desktop and MSP" />
          <StatCard label="Active runs" value="0" detail="Harness executions" />
          <StatCard label="Pending tasks" value="0" detail="Waiting for a team" />
          <StatCard label="Deployments" value="0" detail="Preview and production" />
        </section>

        <section className="content-grid">
          <article className="panel">
            <div className="panel-heading">
              <div>
                <p className="eyebrow">WORKSPACE</p>
                <h2>Recent projects</h2>
              </div>
              <a href="#">View all</a>
            </div>
            <div className="empty-state">
              <div>+</div>
              <h3>No projects yet</h3>
              <p>Create the first project and assign it to an AI team.</p>
            </div>
          </article>

          <article className="panel">
            <p className="eyebrow">ACTIVITY</p>
            <h2>Harness feed</h2>
            <div className="feed-item">
              <span />
              <div>
                <strong>Platform initialized</strong>
                <p>Professional monorepo foundation is ready.</p>
              </div>
            </div>
          </article>
        </section>
      </section>
    </main>
  );
}