import Link from 'next/link'
import Image from 'next/image'
import { Globe } from 'lucide-react'

export function Footer() {
  return (
    <footer className="border-t border-border bg-background py-12 text-sm">
      <div className="mx-auto max-w-7xl px-6">
        <div className="grid gap-12 md:grid-cols-4 lg:grid-cols-5">
          <div className="md:col-span-2">
            <div className="mb-6 flex items-center gap-2">
              <div className="relative h-8 w-8">
                <Image src="/logo.png" alt="SiteChangeMonitor Logo" fill className="object-contain" />
              </div>
              <span className="text-lg font-bold text-foreground">SiteChangeMonitor</span>
            </div>
            <p className="mb-6 max-w-xs text-muted-foreground">
              The modern platform for uptime monitoring, change detection, and performance tracking.
            </p>
            <div className="flex gap-4">
              {/* Social icons placeholders */}
              <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-secondary text-muted-foreground transition-colors hover:bg-border hover:text-foreground">
                <Globe className="h-4 w-4" />
              </div>
            </div>
          </div>

          <div>
            <h4 className="mb-4 font-semibold text-foreground">Product</h4>
            <ul className="space-y-3 text-muted-foreground">
              <li><Link href="/features" className="transition-colors hover:text-primary">Features</Link></li>
              <li><Link href="/use-cases" className="transition-colors hover:text-primary">Use Cases</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="mb-4 font-semibold text-foreground">Company</h4>
            <ul className="space-y-3 text-muted-foreground">
              <li><Link href="/blog" className="transition-colors hover:text-primary">Blog</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="mb-4 font-semibold text-foreground">Legal</h4>
            <ul className="space-y-3 text-muted-foreground">
              <li><Link href="/privacy" className="transition-colors hover:text-primary">Privacy</Link></li>
              <li><Link href="/admin" className="text-xs opacity-50 transition-colors hover:text-primary">Admin</Link></li>
            </ul>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground sm:flex-row">
          <p>(c) 2026 SiteChangeMonitor. All rights reserved.</p>
          <div className="flex items-center gap-2">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
              <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
            </span>
            System Operational
          </div>
        </div>
      </div>
    </footer>
  )
}
