import Link from "next/link";
import { ExternalLink, Mail } from "lucide-react";
import { Logo } from "@/components/brand/logo";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDER_ORDER } from "@/lib/client/providers";
import { PROVIDER_LABEL } from "./mock-data";
import { InstallHint } from "./install-hint";

const COLUMNS: { title: string; links: { label: string; href: string; external?: boolean }[] }[] = [
  {
    title: "Product",
    links: [
      { label: "Features", href: "/#features" },
      { label: "Arena", href: "/#arena" },
      { label: "Interactive demo", href: "/#demo" },
      { label: "Security", href: "/security" },
      { label: "FAQ", href: "/#faq" },
    ],
  },
  {
    title: "Models",
    links: [
      { label: "Model catalog", href: "/models" },
      { label: "Live model API (JSON)", href: "/api/public/models" },
      { label: "Try the Arena", href: "/app/arena" },
    ],
  },
  {
    title: "Account",
    links: [
      { label: "Sign in", href: "/login" },
      { label: "Create account", href: "/signup" },
      { label: "Forgot password", href: "/forgot-password" },
      { label: "Open the app", href: "/app/chat" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Privacy", href: "/privacy" },
      { label: "Terms", href: "/terms" },
      { label: "Contact", href: "/contact" },
    ],
  },
];

export function MarketingFooter() {
  return (
    <footer className="border-t border-border bg-bg-subtle/60">
      <div className="mx-auto w-full max-w-6xl px-5 py-12 sm:px-8 sm:py-16">
        <div className="grid gap-10 lg:grid-cols-[1.5fr_repeat(4,1fr)]">
          <div className="max-w-xs">
            <Logo size={24} />
            <p className="mt-3 text-sm leading-6 text-fg-muted">One interface. Every model. Bring your own keys.</p>
            <ul className="mt-5 flex flex-wrap gap-x-3.5 gap-y-2" aria-label="Supported providers">
              {PROVIDER_ORDER.map((p) => (
                <li key={p} className="inline-flex items-center gap-1.5 text-xs text-fg-subtle">
                  <ProviderIcon provider={p} size={13} />
                  {PROVIDER_LABEL[p]}
                </li>
              ))}
            </ul>
            <InstallHint className="mt-6" compact />
          </div>
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-4">
            {COLUMNS.map((col) => (
              <div key={col.title}>
                <h3 className="text-[13px] font-semibold text-fg">{col.title}</h3>
                <ul className="mt-3 space-y-2">
                  {col.links.map((l) => (
                    <li key={l.href}>
                      <Link href={l.href} className="inline-flex min-h-[28px] items-center text-sm text-fg-muted transition-colors hover:text-fg">
                        {l.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Made by */}
        <div className="mt-12 grid gap-6 border-t border-border pt-8 sm:grid-cols-3">
          <div>
            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Made by</p>
            <p className="mt-1.5 text-sm font-medium text-fg">Simon-Pierre Boucher</p>
            <a href="mailto:contact@spboucher.ai" className="mt-1 inline-flex items-center gap-1.5 text-sm text-fg-muted transition-colors hover:text-fg">
              <Mail className="size-3.5" aria-hidden /> contact@spboucher.ai
            </a>
          </div>
          <div>
            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Hosted on</p>
            <a href="https://www.maclustr.io" target="_blank" rel="noreferrer noopener" className="mt-1.5 inline-flex items-center gap-1.5 text-sm font-medium text-fg transition-colors hover:text-accent">
              MacLustr — www.maclustr.io <ExternalLink className="size-3.5 text-fg-subtle" aria-hidden />
            </a>
            <p className="mt-1 text-sm text-fg-muted">A private cluster of Apple silicon Macs in Québec.</p>
          </div>
          <div>
            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Contact</p>
            <p className="mt-1.5 text-sm text-fg-muted">
              Questions, bugs, security reports:{" "}
              <Link href="/contact" className="font-medium text-fg underline-offset-4 hover:underline">
                contact page
              </Link>
              .
            </p>
          </div>
        </div>

        <div className="mt-8 flex flex-col gap-3 border-t border-border pt-6 text-xs text-fg-subtle sm:flex-row sm:items-start sm:justify-between">
          <p>© {new Date().getFullYear()} PolyLLM · Simon-Pierre Boucher. All rights reserved.</p>
          <p className="max-w-lg leading-5 sm:text-right">
            OpenAI, Anthropic, Google Gemini, xAI, Mistral AI, DeepSeek, Moonshot AI (Kimi), OpenRouter and Cerebras are trademarks of their respective owners. PolyLLM is an independent product and is not affiliated with or endorsed by any provider.
          </p>
        </div>
      </div>
    </footer>
  );
}