import { Github, Package } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export function Footer() {
  return (
    <footer className="bg-black px-5 py-12">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-10 border-b border-zinc-900 pb-10 md:grid-cols-[1fr_auto_auto] md:gap-16">
          <div className="max-w-sm">
            <div className="flex items-center gap-3">
              <Image
                src="/marketing/premiere-pro-mcp-mark-v1.png"
                alt=""
                width={32}
                height={32}
                className="h-8 w-8 object-contain"
              />
              <span className="text-sm font-semibold text-white">premiere-pro-mcp</span>
            </div>
            <p className="mt-4 text-sm leading-6 text-zinc-500">Open-source, local-first structured AI control for supported Adobe Premiere Pro workflows.</p>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-600">Product</p>
            <div className="mt-4 flex flex-col gap-3 text-sm text-zinc-400">
              <Link href="/#demo" className="hover:text-white">Demo</Link>
              <Link href="/#features" className="hover:text-white">Features</Link>
              <Link href="/#how-it-works" className="hover:text-white">How it works</Link>
              <Link href="/#install" className="hover:text-white">Install</Link>
              <Link href="/#faq" className="hover:text-white">FAQ</Link>
              <Link href="/premiere-pro-collaboration-workflow/" className="hover:text-white">Workflow fit guide</Link>
              <Link href="/project-intake/" className="hover:text-white">Project Intake</Link>
              <Link href="/facts/" className="hover:text-white">Canonical facts</Link>
              <Link href="/blog/" className="hover:text-white">Guides</Link>
              <a href="/docs/" className="hover:text-white">Documentation</a>
              <a href="/changelog/" className="hover:text-white">Changelog</a>
            </div>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-600">Resources</p>
            <div className="mt-4 flex flex-col gap-3 text-sm text-zinc-400">
              <a href="https://github.com/leancoderkavy/premiere-pro-mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 hover:text-white"><Github className="h-4 w-4" /> GitHub</a>
              <a href="https://www.npmjs.com/package/premiere-pro-mcp" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 hover:text-white"><Package className="h-4 w-4" /> npm package</a>
              <a href="https://github.com/leancoderkavy/premiere-pro-mcp/blob/main/SECURITY.md" target="_blank" rel="noopener noreferrer" className="hover:text-white">Security</a>
              <a href="/privacy/" className="hover:text-white">Privacy</a>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-2 pt-6 text-xs text-zinc-600 sm:flex-row sm:items-center sm:justify-between">
          <p>© 2026 premiere-pro-mcp contributors. MIT licensed.</p>
          <p>Not affiliated with Adobe Inc. Adobe Premiere Pro is a trademark of Adobe Inc.</p>
        </div>
      </div>
    </footer>
  )
}