import { getAlternativePages } from "~/data/alternative-pages";
import { appStoreUrl, playStoreUrl, webAppUrl } from "~/downloads";

interface SiteFooterProps {
  width?: "default" | "prose";
}

export function SiteFooter({ width = "default" }: SiteFooterProps) {
  const widthClasses =
    width === "prose" ? "max-w-prose p-6 md:p-12 md:pt-0" : "max-w-5xl p-6 md:p-20 md:pt-0";
  const alternatives = getAlternativePages();
  return (
    <footer className={`${widthClasses} mx-auto`}>
      <div className="border-t border-white/10 pt-8 pb-4 grid grid-cols-2 sm:grid-cols-5 gap-8 text-sm">
        <div className="space-y-3">
          <p className="text-white/60 font-medium">Product</p>
          <div className="space-y-2">
            <a
              href="/blog"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Blog
            </a>
            <a
              href="/docs"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Docs
            </a>
            <a
              href="/changelog"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Changelog
            </a>
            <a
              href="/hub"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Hub
            </a>
            <a
              href="/docs/cli"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              CLI
            </a>
            <a
              href="/privacy"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Privacy
            </a>
            <a
              href="/sponsor"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Sponsor
            </a>
          </div>
        </div>
        <div className="space-y-3">
          <p className="text-white/60 font-medium">Agents</p>
          <div className="space-y-2">
            <a
              href="/claude-code"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Claude Code
            </a>
            <a
              href="/codex"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Codex
            </a>
            <a
              href="/opencode"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              OpenCode
            </a>
            <a
              href="/agents"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              All providers
            </a>
          </div>
        </div>
        <div className="space-y-3">
          <p className="text-white/60 font-medium">Alternatives</p>
          <div className="space-y-2">
            {alternatives.map((page) => (
              <a
                key={page.slug}
                href={page.href}
                className="block text-muted-foreground hover:text-foreground transition-colors"
              >
                {page.name}
              </a>
            ))}
          </div>
        </div>
        <div className="space-y-3">
          <p className="text-white/60 font-medium">Community</p>
          <div className="space-y-2">
            <a
              href="https://discord.gg/jz8T2uahpH"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Discord
            </a>
            <a
              href="https://www.reddit.com/r/PaseoAI/"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Reddit
            </a>
            <a
              href="https://github.com/getpaseo/paseo"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              GitHub
            </a>
          </div>
        </div>
        <div className="space-y-3">
          <p className="text-white/60 font-medium">Download</p>
          <div className="space-y-2">
            <a
              href={appStoreUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              App Store
            </a>
            <a
              href={playStoreUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Google Play
            </a>
            <a
              href="https://github.com/getpaseo/paseo/releases"
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Desktop
            </a>
            <a
              href={webAppUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="block text-muted-foreground hover:text-foreground transition-colors"
            >
              Web App
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}