import { Link } from 'react-router-dom';
import { useBranding } from '@/hooks/useBranding';

export function Footer() {
  const branding = useBranding();
  const brandName = branding.brand_name || 'LearnHub';
  const currentYear = new Date().getFullYear();

  return (
    <footer className="border-t-2 border-border bg-muted/50 mt-auto">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="md:col-span-2">
            <h3 className="font-bold text-lg mb-2">{brandName}</h3>
            <p className="text-sm text-muted-foreground max-w-md">
              {branding.brand_tagline || 'Platform pembelajaran online untuk mengembangkan skill dan karir Anda.'}
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-semibold mb-3">Tautan</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <Link to="/products" className="text-muted-foreground hover:text-foreground transition-colors">
                  Produk
                </Link>
              </li>
              <li>
                <Link to="/calendar" className="text-muted-foreground hover:text-foreground transition-colors">
                  Kalender Event
                </Link>
              </li>
              <li>
                <Link to="/consulting" className="text-muted-foreground hover:text-foreground transition-colors">
                  Konsultasi
                </Link>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="font-semibold mb-3">Legal</h4>
            <ul className="space-y-2 text-sm">
              <li>
                <Link to="/privacy" className="text-muted-foreground hover:text-foreground transition-colors">
                  Kebijakan Privasi
                </Link>
              </li>
              <li>
                <Link to="/terms" className="text-muted-foreground hover:text-foreground transition-colors">
                  Syarat & Ketentuan
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-border mt-8 pt-6 text-center text-sm text-muted-foreground">
          © {currentYear} {brandName}. All rights reserved.
        </div>
      </div>
    </footer>
  );
}