import Link from "next/link";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-background mt-auto">
      <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
        <div className="flex flex-col items-start justify-between gap-8 sm:flex-row">
          <div className="max-w-xs">
            <div className="flex items-center gap-2 mb-4">
              <div className="h-8 w-8 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm shadow-glow-teal">
                L1
              </div>
              <span className="text-lg font-bold tracking-tight text-foreground">
                LedgerOne
              </span>
            </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-12 border-t border-border pt-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <p className="text-xs text-muted-foreground">
            &copy; {new Date().getFullYear()} LedgerOne Inc. All rights reserved.
          </p>
          <div className="flex gap-4">
            {/* Social placeholders */}
            <div className="w-5 h-5 bg-muted rounded-full opacity-50 hover:opacity-100 transition-opacity cursor-pointer"></div>
            <div className="w-5 h-5 bg-muted rounded-full opacity-50 hover:opacity-100 transition-opacity cursor-pointer"></div>
            <div className="w-5 h-5 bg-muted rounded-full opacity-50 hover:opacity-100 transition-opacity cursor-pointer"></div>
          </div>
        </div>
      </div>
    </footer>
  );
}
