'use client';

import Link from 'next/link';
import { Logo } from '@/components/icons';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { useFirestore, useDoc, useMemoFirebase } from '@/firebase';
import { doc } from 'firebase/firestore';
import type { AppSettings } from '@/lib/types';

const footerLinks = [
  {
    title: 'Explore',
    links: [
      { label: 'Home', href: '/' },
      { label: 'Categories', href: '/categories' },
      { label: 'Featured', href: '#' },
    ],
  },
  {
    title: 'About',
    links: [
      { label: 'About Us', href: '/about-us' },
      { label: 'Contact Us', href: '/contact-us' },
      { label: 'For Businesses', href: '#' },
    ],
  },
  {
    title: 'Legal',
    links: [
      { label: 'Privacy Policy', href: '#' },
      { label: 'Terms of Service', href: '#' },
    ],
  },
];

export default function Footer() {
  const firestore = useFirestore();
  const settingsDocRef = useMemoFirebase(() => firestore ? doc(firestore, 'settings', 'app') : null, [firestore]);
  const { data: appSettings } = useDoc<AppSettings>(settingsDocRef);

  return (
    <footer className="border-t bg-card pb-20 md:pb-0">
      <div className="container mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
          {/* Brand and Newsletter */}
          <div className="space-y-4">
            <Link href="/" className="flex items-center gap-2">
              <Logo className="h-8 w-8" />
              <span className="text-xl font-bold text-primary">{appSettings?.appName || 'BizAround'}</span>
            </Link>
            <p className="text-muted-foreground">
              Your guide to the best local services.
            </p>
            <div>
                <p className='font-semibold text-primary mb-2'>Stay Updated</p>
                <form className="flex gap-2">
                    <Input type="email" placeholder="Enter your email" />
                    <Button type="submit" className='bg-accent hover:bg-accent/90'>Subscribe</Button>
                </form>
            </div>
          </div>

          {/* Links */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-2">
            {footerLinks.map((section) => (
              <div key={section.title}>
                <h3 className="font-semibold text-primary">{section.title}</h3>
                <ul className="mt-4 space-y-2">
                  {section.links.map((link) => (
                    <li key={link.label}>
                      <Link
                        href={link.href}
                        className="text-muted-foreground hover:text-accent"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="mt-12 border-t pt-8 text-center text-sm text-muted-foreground">
          <p>&copy; {new Date().getFullYear()} {appSettings?.appName || 'BizAround'} v{appSettings?.appVersion || '1.0.0'}. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}