import Link from 'next/link';
import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';

export default function Home() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-24">
      <nav className="mb-16 flex items-center justify-between">
        <div className="text-lg font-semibold">{{project_name}}</div>
        <div className="flex items-center gap-4">
          <SignedOut>
            <Link href="/sign-in" className="text-sm hover:underline">Sign in</Link>
            <Link
              href="/sign-up"
              className="rounded-md bg-neutral-900 px-4 py-2 text-sm text-white hover:bg-neutral-800"
            >
              Get started
            </Link>
          </SignedOut>
          <SignedIn>
            <Link href="/dashboard" className="text-sm hover:underline">Dashboard</Link>
            <UserButton afterSignOutUrl="/" />
          </SignedIn>
        </div>
      </nav>

      <h1 className="text-4xl font-bold tracking-tight">
        {{project_name}}
      </h1>
      <p className="mt-4 text-lg text-neutral-600">
        {{description}}
      </p>

      <div className="mt-12 grid gap-6 sm:grid-cols-3">
        <Feature title="Clerk auth" body="Sign-in, sign-up, social providers, user management. Wired by middleware.ts." />
        <Feature title="Supabase DB" body="Postgres with RLS. Migrations in supabase/migrations/0001_initial.sql." />
        <Feature title="Stripe billing" body="Subscription checkout + webhooks. Customer portal at /dashboard/billing." />
      </div>

      <footer className="mt-24 border-t pt-8 text-sm text-neutral-500">
        Scaffolded with{' '}
        <a className="underline" href="https://www.npmjs.com/package/@openlife/cli">@openlife/cli</a>
        {' '}using the nextjs-supabase-clerk-stripe template.
      </footer>
    </main>
  );
}

function Feature({ title, body }: { title: string; body: string }) {
  return (
    <div className="rounded-lg border border-neutral-200 p-4">
      <h3 className="font-semibold">{title}</h3>
      <p className="mt-1 text-sm text-neutral-600">{body}</p>
    </div>
  );
}
