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 Spreadsheets",
    description: "See why modern businesses are switching from manual spreadsheets to LedgerOne's automated financial platform.",
    keywords: siteInfo.keywords
};

export default function CompareSpreadsheetsPage() {
    const schema = [
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            name: "LedgerOne vs Spreadsheets",
            description: "Comparison of LedgerOne automated platform versus manual spreadsheets.",
            url: `${siteInfo.url}/compare/vs-spreadsheets`
        }
    ];

    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">
                            Stop breaking your spreadsheets.
                        </h1>
                        <p className="text-lg text-muted-foreground">
                            Spreadsheets are great for scratchpads, but terrible for financial systems. See why LedgerOne is the upgrade your business needs.
                        </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">Spreadsheets</div>
                        </div>

                        {[
                            { feature: "Bank Connections", l1: "Automatic (11,000+ banks)", sheet: "Manual CSV imports" },
                            { feature: "Transaction Categorization", l1: "AI-powered & Rules", sheet: "Manual entry" },
                            { feature: "Security", l1: "Bank-level encryption (SOC2)", sheet: "Password protected file" },
                            { feature: "Mobile Access", l1: "Native iOS & Android apps", sheet: "Clunky mobile view" },
                            { feature: "Collaboration", l1: "Multi-user with permissions", sheet: "Version control nightmares" },
                            { feature: "Reporting", l1: "Instant, interactive charts", sheet: "Manual chart building" },
                            { feature: "Audit Trail", l1: "Immutable change logs", sheet: "None" },
                        ].map((row, i) => (
                            <div key={row.feature} className={`grid grid-cols-3 p-6 items-center border-b border-border last:border-0 ${i % 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"></path></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">Ready to upgrade?</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>
    );
}