// app/page.tsx
//
// CORE MVP PAGE
// Purpose:
// 1. Explain the automation
// 2. Point the user to the next action
//
// Everything else lives elsewhere.

export default function Home() {
  return (
    <main className="max-w-2xl mx-auto p-8 space-y-10">

      {/* --------------------------------------------------
          What this is
      -------------------------------------------------- */}
      <section>
        <h1 className="text-2xl font-semibold">
          Stripe → Xero automation
        </h1>

        <p className="mt-3 text-gray-700">
          When a Stripe payment succeeds, a Xero invoice is
          automatically created and marked as paid.
        </p>
      </section>

      {/* --------------------------------------------------
          What the user does
      -------------------------------------------------- */}
      <section>
        <h2 className="text-lg font-medium">
          How it works
        </h2>

        <ol className="mt-3 space-y-2 list-decimal list-inside text-gray-700">
          <li>Log in with your email</li>
          <li>Connect Stripe</li>
          <li>Connect Xero</li>
          <li>Invoices handle themselves. You focus on the business.</li>
        </ol>
      </section>

      {/* --------------------------------------------------
          Next action
      -------------------------------------------------- */}
      <section className="pt-4 border-t">
        <p className="text-gray-700">
          Start by logging in.
        </p>

        <a
          href="/login"
          className="inline-block mt-4 px-6 py-3 bg-black text-white rounded text-sm"
        >
          Log in →
        </a>
      </section>

    </main>
  )
}