import { HomeAuthControls } from "../home-auth-controls";

export default function HomePage(): React.ReactElement {
  return (
    <main className="mx-auto max-w-2xl p-8 font-sans">
      <h1 className="text-3xl font-bold">RareDays</h1>
      <p className="mt-4 text-neutral-600">
        Scaffolded with <code>create-raredays-app</code>. Identity is wired through{" "}
        <code>app/lib/runtime.ts</code> using the in-memory provider — swap it for{" "}
        <code>@raredays/identity-better-auth</code> in production.
      </p>
      <HomeAuthControls />
      <h2 className="mt-10 text-lg font-semibold">Next steps</h2>
      <ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-700">
        <li>
          Edit <code>site.spec.ts</code> to brand your site; <code>pnpm theme:build</code>{" "}
          regenerates the override CSS.
        </li>
        <li>
          Edit <code>app/lib/runtime.ts</code> to wire billing, jobs, notifications, email, or
          telemetry. The composition root holds every port; modules read from it.
        </li>
        <li>
          Run <code>pnpm test</code> to execute the sample test that exercises the protected page
          using the in-memory provider.
        </li>
        <li>
          Visit{" "}
          <a className="underline" href="/demo/widgets">
            /demo/widgets
          </a>{" "}
          for a <code>defineAsyncLoad</code> example — run <code>pnpm dev:mocks</code> to see it
          backed by canned MSW data.
        </li>
      </ul>
    </main>
  );
}