import Link from "next/link";
import { Logo } from "@/components/ui/logo";

const columns = [
  { title: "Product", links: [["Platform", "/#platform"], ["Playground", "/dashboard/playground"], ["Access", "/pricing"], ["Changelog", "/changelog"], ["Status", "/status"]] },
  { title: "Developers", links: [["Documentation", "/docs"], ["Quickstart", "/docs/quickstart"], ["Fetch API", "/docs/fetch"], ["SDKs", "/docs/sdks"], ["Errors", "/docs/errors"]] },
  { title: "Company", links: [["About", "/#about"], ["Support", "mailto:support@fetcha.co"], ["Contact", "mailto:hello@fetcha.co"]] },
  { title: "Legal", links: [["Terms of Service", "/legal/terms"], ["Privacy Policy", "/legal/privacy"], ["Acceptable Use", "/legal/acceptable-use"], ["DPA", "/legal/dpa"], ["Cookies", "/legal/cookies"]] },
];

export function MarketingFooter() {
  return (
    <footer className="border-t border-border bg-bg-subtle/60">
      <div className="container-page grid gap-10 py-14 md:grid-cols-[1.4fr_repeat(4,1fr)]">
        <div className="max-w-xs">
          <Logo />
          <p className="mt-3 text-[13px] leading-relaxed text-fg-muted">Intelligent Web Access Infrastructure. One API. Multiple proxy networks. Reliable web access.</p>
          <p className="mt-4 text-[12px] text-fg-subtle">© {new Date().getFullYear()} Fetcha. All rights reserved.</p>
        </div>
        {columns.map((c) => (
          <div key={c.title}>
            <h3 className="text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">{c.title}</h3>
            <ul className="mt-3 space-y-2">
              {c.links.map(([label, href]) => (
                <li key={href}>
                  <Link href={href} className="text-[13.5px] text-fg-muted transition-colors hover:text-fg">
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </footer>
  );
}