src/app/components/Footer.tsx

import { Shield, Github, BookOpen } from 'lucide-react';

export function Footer() {
  return (
    <footer className="bg-slate-950/40 border-t border-border mt-16 py-8">
      <div className="container mx-auto px-6 max-w-7xl">
        <div className="grid md:grid-cols-3 gap-8">
          {/* Brand */}
          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <Shield className="w-5 h-5 text-indigo-400" />
              <span className="font-extrabold text-slate-200">Dark Pattern Detector</span>
            </div>
            <p className="text-xs text-slate-400 leading-relaxed">
              An AI-powered XAI compliance auditor designed to scan, parse, and flag deceptive design patterns 
              in fintech applications, aligned with CFPB guidelines.
            </p>
          </div>

          {/* Technology */}
          <div className="space-y-3">
            <h3 className="font-bold text-xs uppercase tracking-wider text-slate-300">Auditing Stack</h3>
            <ul className="space-y-2 text-xs text-slate-400">
              <li>Pytesseract OCR Engine</li>
              <li>TF-IDF Feature Extractors</li>
              <li>Scikit-Learn Logistic Regression</li>
              <li>CFPB Compliance Heuristics</li>
              <li>Explainable AI (XAI) Diagnostics</li>
            </ul>
          </div>

          {/* Resources */}
          <div className="space-y-3">
            <h3 className="font-bold text-xs uppercase tracking-wider text-slate-300">Regulatory Resources</h3>
            <ul className="space-y-2 text-xs">
              <li>
                <a href="https://www.consumerfinance.gov/" target="_blank" rel="noreferrer" className="text-indigo-400 hover:text-indigo-300 flex items-center gap-2 transition-colors">
                  <BookOpen className="w-4 h-4" />
                  CFPB Regulatory Guidelines
                </a>
              </li>
              <li>
                <a href="#" className="text-indigo-400 hover:text-indigo-300 flex items-center gap-2 transition-colors">
                  <Github className="w-4 h-4" />
                  Codebase Repository
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-white/5 mt-8 pt-6 text-center text-[10px] text-slate-500 uppercase tracking-widest font-semibold">
          <p>© 2026 Dark Pattern Detector. Built for Consumer Protection & Ethical Fintech.</p>
        </div>
      </div>
    </footer>
  );
}