import Link from "next/link";
import { Background } from "../../../components/background";
import { SiteFooter } from "../../../components/site-footer";
import { SiteHeader } from "../../../components/site-header";
import { PageSchema } from "../../../components/page-schema";
import { siteInfo } from "../../../data/site";

export const metadata = {
  title: "LedgerOne vs Monarch Money",
  description:
    "Compare LedgerOne's export-first ledger workflow with Monarch Money's household finance platform.",
  keywords: siteInfo.keywords
};

export default function CompareMonarchPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "LedgerOne vs Monarch Money",
      description: "Comparison of LedgerOne and Monarch Money.",
      url: `${siteInfo.url}/compare/vs-monarch`
    }
  ];

  const rows = [
    { feature: "Primary Focus", l1: "Export-ready ledgers and audit workflow", sheet: "Household budgeting and net worth" },
    { feature: "Exports", l1: "CSV, JSON, XLSX, PDF, and Google Sheets", sheet: "Consumer finance exports" },
    { feature: "Rules", l1: "Transparent rules with regex and DSL mode", sheet: "Consumer categorization rules" },
    { feature: "Data Ownership", l1: "User-owned Google Sheets mirror plus secured exports", sheet: "App-managed financial workspace" },
    { feature: "Developer Access", l1: "Public API key flow for power users", sheet: "No public API-first workflow" },
    { feature: "Tax Workflow", l1: "Tax intake, package export, and sandbox e-file flow", sheet: "Personal finance reporting" },
  ];

  return (
    <div className="page-soft-bg min-h-screen font-sans text-foreground flex flex-col relative overflow-hidden">
      <Background />
      <SiteHeader />
      <main className="relative z-10 flex-1 pt-24 pb-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/50 border border-border text-xs font-medium text-muted-foreground mb-6">
              Comparison
            </div>
            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6">
              Built for ledger control, not just household tracking.
            </h1>
            <p className="text-lg text-muted-foreground">
              Monarch Money is built around household financial visibility. LedgerOne is built for users who need structured transactions, export control, rules, audit trails, and tax-ready handoff.
            </p>
          </div>

          <div className="glass-panel rounded-3xl overflow-hidden shadow-sm border border-border">
            <div className="grid grid-cols-3 bg-secondary/30 border-b border-border p-6 text-sm font-bold text-muted-foreground uppercase tracking-wider">
              <div className="col-span-1">Feature</div>
              <div className="col-span-1 text-center text-foreground">LedgerOne</div>
              <div className="col-span-1 text-center">Monarch Money</div>
            </div>

            {rows.map((row, index) => (
              <div key={row.feature} className={`grid grid-cols-3 p-6 items-center border-b border-border last:border-0 ${index % 2 === 0 ? "bg-background/50" : "bg-secondary/10"}`}>
                <div className="col-span-1 font-medium text-foreground">{row.feature}</div>
                <div className="col-span-1 text-center font-bold text-primary flex justify-center items-center gap-2">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {row.l1}
                </div>
                <div className="col-span-1 text-center text-muted-foreground">
                  {row.sheet}
                </div>
              </div>
            ))}
          </div>

          <div className="mt-16 text-center">
            <h2 className="text-2xl font-bold text-foreground mb-6">Need export-first financial control?</h2>
            <Link href="/register" className="btn-primary">
              Start your free trial
            </Link>
          </div>
        </div>
      </main>

      <div className="relative z-10">
        <SiteFooter />
      </div>
      <PageSchema schema={schema} />
    </div>
  );
}