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>
  );
}