Socrates/apps/web/app/page.tsx

// Landing page — list existing projects + entry point to start a new one.

import Link from "next/link";
import { listProjects } from "../lib/db/repo";

export default async function HomePage() {
  const projects = await listProjects();

  return (
    <div style={{ padding: "60px 80px", maxWidth: 720, margin: "0 auto", lineHeight: 1.55 }}>
      <h1 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 600, marginBottom: 8 }}>
        Socrata
      </h1>
      <p style={{ color: "var(--muted)", marginBottom: 32 }}>
        Structured thinking and validation platform for product managers.
      </p>

      <div style={{ marginBottom: 32 }}>
        <Link
          href="/seed"
          style={{
            display: "inline-block",
            padding: "12px 18px",
            border: "1px solid var(--accent)",
            background: "var(--accent)",
            color: "var(--accent-on)",
            borderRadius: 6,
            fontFamily: "var(--font-mono)",
            fontSize: 13,
            textDecoration: "none",
          }}
        >
          → Start a new idea
        </Link>
      </div>

      <div>
        <h2 style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          textTransform: "uppercase",
          letterSpacing: "0.10em",
          color: "var(--muted)",
          marginBottom: 12,
        }}>
          {projects.length === 0 ? "no projects yet" : `${projects.length} project${projects.length === 1 ? "" : "s"}`}
        </h2>

        {projects.length === 0 ? (
          <p style={{ color: "var(--muted)", fontStyle: "italic" }}>
            Click "Start a new idea" above to begin a Socratic interview that bootstraps a fresh project.
          </p>
        ) : (
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
            {projects.map(p => (
              <li key={p.id}>
                <Link
                  href={`/editor/${encodeURIComponent(p.id)}`}
                  style={{
                    display: "block",
                    padding: "12px 14px",
                    border: "1px solid var(--border)",
                    borderRadius: 6,
                    color: "var(--fg)",
                    textDecoration: "none",
                    background: "var(--surface)",
                  }}
                >
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                    <span style={{
                      fontFamily: "var(--font-display)",
                      fontWeight: 600,
                      fontSize: 14,
                      color: "var(--accent-strong)",
                    }}>{p.name}</span>
                    <span style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 10.5,
                      color: "var(--muted)",
                    }}>
                      {p.scope} · v{p.latestVersion}
                    </span>
                    <span style={{
                      marginLeft: "auto",
                      fontFamily: "var(--font-mono)",
                      fontSize: 10.5,
                      color: "var(--muted)",
                    }}>
                      {timeAgo(new Date(p.updatedAt))}
                    </span>
                  </div>
                  {p.tagline && (
                    <div style={{
                      fontSize: 12.5,
                      color: "var(--muted-strong)",
                      marginTop: 4,
                      lineHeight: 1.45,
                    }}>
                      {p.tagline}
                    </div>
                  )}
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

function timeAgo(d: Date): string {
  const sec = Math.floor((Date.now() - d.getTime()) / 1000);
  if (sec < 60) return `${sec}s ago`;
  const min = Math.floor(sec / 60);
  if (min < 60) return `${min}m ago`;
  const hr = Math.floor(min / 60);
  if (hr < 24) return `${hr}h ago`;
  const day = Math.floor(hr / 24);
  return `${day}d ago`;
}