// app/page.tsx

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

      {/* What this is */}
      <section>
        <h1 className="text-2xl font-semibold">
          Stripe → Xero automation
        </h1>
        <p className="mt-2 text-gray-600">
          Automatically create and mark Xero invoices as paid when a Stripe payment succeeds.
          
          Built for people who value time more than pressing buttons.
        </p>
      </section>

      {/* Steps */}
      <section>
        <h2 className="text-xl font-medium">How it works</h2>
        <ol className="mt-4 space-y-3 list-decimal list-inside text-gray-700">
          <li>Log in ( Set up magic link, db has been set up)</li>
          <li>Connect Stripe</li>
          <li>Connect Xero</li>
          <li>Make a payment</li>
          <li>Invoice appears in Xero as paid</li>
        </ol>
      </section>

      {/* Proof */}
      <section>
        <h2 className="text-xl font-medium">Proof, not promises</h2>
        <p className="mt-2 text-gray-600">
          Your next Stripe payment will automatically reconcile in Xero.
          No manual matching. No “awaiting payment”.
        </p>
      </section>

      {/* Pricing */}
      <section>
        <h2 className="text-xl font-medium">Pricing</h2>
        <p className="mt-2 text-gray-700">
          £200 / month — unlimited invoices.
        </p>
      </section>

      {/* CTA */}
      <section className="pt-8 border-t">
        <p className="text-gray-500 text-sm">
          This page is a placeholder. The product is the automation.
        </p>
      </section>

    </main>
  )
}