'use client'

import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { MapPin, Building2, Users, Calculator } from 'lucide-react';

export default function Footer() {
  const [year, setYear] = useState('');

  useEffect(() => {
    setYear(new Date().getFullYear().toString());
  }, []);

  return (
    <footer className="bg-blue-900 text-white">
      <div className="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Brand Section */}
          <div className="space-y-4">
            <Link href="/" className="-m-1.5 p-1.5">
              <span className="text-xl font-bold text-white">FINLION</span>
            </Link>
            <p className="text-sm">
              A business & financial consulting firm since 1978
            </p>
            <div className="flex items-center gap-2 pt-2">
              <MapPin size={18} />
              <p>Nationwide Services | Based in <br /> Santa Fe, NM</p>
            </div>
          </div>

          {/* Expertise Section */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Areas of Expertise</h3>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Calculator size={18} />
                <span>QuickBooks & Xero</span>
              </div>
              <div className="flex items-center gap-2">
                <Building2 size={18} />
                <span>Business & Financial Analysis</span>
              </div>
            </div>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Services</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/services#accounting" className="hover:text-gold-400">
                  Accounting & Bookkeeping
                </Link>
              </li>
              <li>
                <Link href="/services#tax" className="hover:text-gold-400">
                  Income Tax Services
                </Link>
              </li>
              <li>
                <Link href="/services#consulting" className="hover:text-gold-400">
                  Business Consulting
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Copyright */}
        <div className="mt-8 pt-8 border-t border-blue-800 text-center text-sm">
          <p>© {year} FINLION. All rights reserved.</p>
          <p className="mt-2">
            Designed and Maintained by{' '}
            <Link 
              href="http://deafgain.org" 
              className="text-gold-400 hover:text-gold-300 transition-colors"
              target="_blank"
              rel="noopener noreferrer"
            >
              DeafGain LLC
            </Link>
          </p>
        </div>
      </div>
    </footer>
  );
}
