import { Ghost, Youtube, Linkedin } from 'lucide-react';
import Link from 'next/link';
import { NewsletterSignup } from './newsletter-signup';
import { getBrand } from '@/lib/white-label';

export default function Footer() {
  const brand = getBrand();
  return (
    <footer className="bg-brand-bg border-t border-white/5">
      <div className="max-w-[1200px] mx-auto px-6 py-12">
        {/* Main Footer Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mb-10">
          {/* Brand Column */}
          <div>
            <div className="flex items-center gap-3 mb-4">
              <Ghost className="w-6 h-6 text-brand" />
              <span className="text-lg font-bold text-white">
                {brand.identity.primaryName}<span className="text-brand">-{brand.identity.secondaryName}</span>
              </span>
            </div>
            <p className="text-sm text-gray-400 leading-relaxed">
              {brand.marketing.footerDescription}
            </p>
          </div>
          
          {/* Nav Column */}
          <div>
            <h4 className="text-sm font-semibold text-white mb-4">Quick Links</h4>
            <nav className="flex flex-col gap-3">
              <Link href="/sales" className="text-gray-400 hover:text-brand transition-colors text-sm">
                How It Works
              </Link>
              <Link href="/docs" className="text-gray-400 hover:text-brand transition-colors text-sm">
                Documentation
              </Link>
              <Link href="/docs/user-manual" className="text-gray-400 hover:text-brand transition-colors text-sm">
                User Manual
              </Link>
              <Link href="/ghost-control" className="text-gray-400 hover:text-brand transition-colors text-sm">
                Hearth Control Login
              </Link>
              <Link href="/roi-calculator" className="text-gray-400 hover:text-brand transition-colors text-sm">
                ROI Calculator
              </Link>
              <Link href="/vs-erp" className="text-gray-400 hover:text-brand transition-colors text-sm">
                {brand.identity.shortName} vs ERP
              </Link>
              <Link href="/#design-partner" className="text-gray-400 hover:text-brand transition-colors text-sm">
                Design Partners
              </Link>
            </nav>
          </div>

          {/* Newsletter Column */}
          <div className="lg:pl-4">
            <NewsletterSignup variant="footer" source="footer" />
          </div>
        </div>
        
        {/* Bottom Bar */}
        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-gray-500 text-sm">
            © {new Date().getFullYear()} {brand.identity.companyName}. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            <Link
              href="https://youtube.com/@ghostfoundrysyndicate"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-red-500 transition-colors"
              aria-label="YouTube"
            >
              <Youtube className="w-5 h-5" />
            </Link>
            <Link
              href="https://www.linkedin.com/company/ghostfoundry-syndicate"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-500 hover:text-blue-400 transition-colors"
              aria-label="LinkedIn"
            >
              <Linkedin className="w-5 h-5" />
            </Link>
            <a 
              href={`mailto:${brand.identity.contactEmail}`}
              className="text-gray-500 hover:text-brand text-sm transition-colors"
            >
              {brand.identity.contactEmail}
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
