// app/page.tsx

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

      {/* Hero */}
      <section>
        <h1 className="text-3xl font-semibold tracking-tight">
          Stripe → Xero, done properly
        </h1>
        <p className="mt-4 text-lg text-gray-700">
          Automatically turn Stripe payments into paid Xero invoices —
          with VAT correctness and accountant sign-off in mind.
        </p>
        <p className="mt-2 text-gray-600">
          No journals. No spreadsheets. No month-end fixing.
        </p>
      </section>

      {/* Who it's for */}
      <section>
        <h2 className="text-xl font-medium">Who this is for</h2>
        <ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
          <li>UK businesses</li>
          <li>VAT registered</li>
          <li>Using Stripe Checkout or Payment Links</li>
          <li>Using Xero</li>
          <li>Billing is one-off, annual, or fixed recurring</li>
        </ul>
        <p className="mt-2 text-gray-600">
          If you rely on usage billing or proration, this is not a fit.
        </p>
      </section>

      {/* Problem */}
      <section>
        <h2 className="text-xl font-medium">The problem</h2>
        <p className="mt-2 text-gray-700">
          Stripe is excellent at taking payments.
          Xero is required for accounting and VAT.
        </p>
        <p className="mt-2 text-gray-700">
          The gap between them is usually filled with manual journals,
          spreadsheets, and “we’ll fix it at month-end”.
        </p>
        <p className="mt-2 text-gray-600">
          That works — until it doesn’t.
        </p>
      </section>

      {/* Solution */}
      <section>
        <h2 className="text-xl font-medium">The solution</h2>
        <p className="mt-2 text-gray-700">
          This system makes Xero the invoice-of-record and treats Stripe
          purely as payment execution.
        </p>
        <p className="mt-2 text-gray-700">
          When a Stripe payment succeeds, a matching invoice appears in Xero
          and is automatically marked as paid.
        </p>
        <p className="mt-2 text-gray-600">
          Refunds become credit notes. Fees are handled separately.
          Everything is explainable.
        </p>
      </section>

      {/* How it works */}
      <section>
        <h2 className="text-xl font-medium">How it works</h2>
        <ol className="mt-4 space-y-2 list-decimal list-inside text-gray-700">
          <li>Connect Stripe</li>
          <li>Connect Xero</li>
          <li>A real payment is made</li>
          <li>An invoice appears in Xero as paid</li>
          <li>Month-end reconciliation just works</li>
        </ol>
      </section>

      {/* Why it's different */}
      <section>
        <h2 className="text-xl font-medium">Why this is different</h2>
        <ul className="mt-4 space-y-1 list-disc list-inside text-gray-700">
          <li>Xero remains the legal source of truth</li>
          <li>Invoices are immutable once issued</li>
          <li>Edge cases are logged, not hidden</li>
          <li>Humans approve exceptions and month-end</li>
        </ul>
        <p className="mt-2 text-gray-600">
          This is a financial control, not a data sync.
        </p>
      </section>

      {/* Pricing */}
      <section>
        <h2 className="text-xl font-medium">Pricing</h2>
        <p className="mt-2 text-gray-700">
          £200 per month.
        </p>
        <p className="mt-1 text-gray-600">
          Unlimited invoices. No per-transaction fees.
        </p>
        <p className="mt-2 text-gray-600">
          Costs less than fixing Stripe in Xero manually.
        </p>
      </section>

      {/* CTA */}
      <section className="pt-8 border-t">
        <p className="text-gray-700">
          If Stripe and Xero already match perfectly for you,
          you don’t need this.
        </p>
        <p className="mt-2 text-gray-700">
          If someone fixes them every month, you probably do.
        </p>
        <p className="mt-4 text-sm text-gray-500">
          This page is intentionally simple. The proof is your next payment.
        </p>
      </section>

    </main>
  )
}