'use client'

import Link from 'next/link'
import { Twitter, Mail, Linkedin } from 'lucide-react'
import { useStore } from '@/lib/store'

export function Footer() {
  const { isAuthenticated } = useStore()

  return (
    <footer className="relative border-t border-border bg-background-secondary/30 backdrop-blur-sm mt-auto">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
          {/* Brand */}
          <div className="col-span-2 md:col-span-1">
            <div className="mb-4">
              <Link href="/" className="inline-block">
                <span 
                  className="text-xl font-bold tracking-[0.1em] text-foreground"
                  style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
                >
                  POUNCE
                </span>
              </Link>
            </div>
            <p className="text-body-sm text-foreground-muted mb-2">
              Don&apos;t guess. Know.
            </p>
            <p className="text-body-xs text-foreground-subtle mb-4">
              Domain intelligence for serious investors and founders.
            </p>
            <div className="flex items-center gap-3">
              <a
                href="https://twitter.com/pounce_domains"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 flex items-center justify-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-colors"
                aria-label="Twitter"
              >
                <Twitter className="w-4 h-4 text-foreground-muted" />
              </a>
              <a
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 flex items-center justify-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-colors"
                aria-label="LinkedIn"
              >
                <Linkedin className="w-4 h-4 text-foreground-muted" />
              </a>
              <a
                href="mailto:hello@pounce.ch"
                className="w-9 h-9 flex items-center justify-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-colors"
                aria-label="Email"
              >
                <Mail className="w-4 h-4 text-foreground-muted" />
              </a>
            </div>
          </div>

          {/* Product - Matches new navigation */}
          <div>
            <h3 className="text-ui font-semibold text-foreground mb-4">Product</h3>
            <ul className="space-y-3">
              <li>
                <Link href="/auctions" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Auctions
                </Link>
              </li>
              <li>
                <Link href="/tld-pricing" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  TLD Pricing
                </Link>
              </li>
              <li>
                <Link href="/pricing" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Pricing
                </Link>
              </li>
              {isAuthenticated ? (
                <li>
                  <Link href="/terminal/dashboard" className="text-body-sm text-accent hover:text-accent-hover transition-colors">
                    Command Center
                  </Link>
                </li>
              ) : (
                <li>
                  <Link href="/register" className="text-body-sm text-accent hover:text-accent-hover transition-colors">
                    Get Started Free
                  </Link>
                </li>
              )}
            </ul>
          </div>

          {/* Resources */}
          <div>
            <h3 className="text-ui font-semibold text-foreground mb-4">Resources</h3>
            <ul className="space-y-3">
              <li>
                <Link href="/blog" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Briefings
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  About Us
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="text-ui font-semibold text-foreground mb-4">Legal</h3>
            <ul className="space-y-3">
              <li>
                <Link href="/privacy" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link href="/terms" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Terms of Service
                </Link>
              </li>
              <li>
                <Link href="/imprint" className="text-body-sm text-foreground-muted hover:text-foreground transition-colors">
                  Imprint
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
          <p className="text-ui-sm text-foreground-subtle">
            © {new Date().getFullYear()} pounce.ch — All rights reserved.
          </p>
          <div className="flex items-center gap-6">
            <Link href="/privacy" className="text-ui-sm text-foreground-subtle hover:text-foreground transition-colors">
              Privacy
            </Link>
            <Link href="/terms" className="text-ui-sm text-foreground-subtle hover:text-foreground transition-colors">
              Terms
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}