import Link from "next/link";
import { Logo } from "./logo";

export function SiteFooter() {
  return (
    <footer className="bg-transparent mt-auto">
      <div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
        <div className="flex flex-col items-start justify-between gap-8 sm:flex-row">
          <div className="max-w-xs">
            <div className="mb-4">
              <Logo />
            </div>
            <p className="text-sm text-muted-foreground leading-relaxed">
              The financial control desk built for audit-ready teams. Unifying US and Canadian banking with immutable ledgers.
            </p>
          </div>

          <div className="grid grid-cols-2 gap-8 sm:gap-16">
            <div className="flex flex-col gap-3">
              <h3 className="text-sm font-semibold text-foreground">Product</h3>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/features/cash-flow">
                Cash Flow
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/features/reports">
                Reports
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/compare/vs-spreadsheets">
                Vs Spreadsheets
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/compare/vs-ynab">
                Vs YNAB
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/compare/vs-quicken">
                Vs Quicken
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/compare/vs-copilot">
                Vs Copilot
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/pricing">
                Pricing
              </Link>
            </div>
            <div className="flex flex-col gap-3">
              <h3 className="text-sm font-semibold text-foreground">Legal</h3>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/terms">
                Terms
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/privacy-policy">
                Privacy
              </Link>
              <Link className="text-sm text-muted-foreground hover:text-primary transition-colors" href="/contact">
                Contact
              </Link>
            </div>
          </div>
        </div>

        <div className="mt-8 pt-6 flex flex-col sm:flex-row items-center gap-4">
          <p className="text-xs text-muted-foreground">
            &copy; {new Date().getFullYear()} LedgerOne Inc. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}