Stop_smoking_website_ver2/src/components/landing/LandingFooter.tsx

'use client';

import Link from 'next/link';

const footerLinks = {
  product: [
    { label: 'Features', href: '#features' },
    { label: 'Demo', href: '#demo' },
    { label: 'Get Started', href: '#cta' },
  ],
  legal: [
    { label: 'Privacy Policy', href: '/privacy' },
    { label: 'Terms of Service', href: '/terms' },
  ],
};

export function LandingFooter() {
  const currentYear = new Date().getFullYear();

  const handleAnchorClick = (href: string) => {
    if (href.startsWith('#')) {
      const element = document.querySelector(href);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  };

  return (
    <footer role="contentinfo" className="border-t border-white/10 bg-background/50 backdrop-blur-sm">
      <div className="container mx-auto max-w-6xl px-4 py-12">
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {/* Brand */}
          <div className="sm:col-span-2 lg:col-span-2">
            <Link href="/home" className="flex items-center gap-2 mb-4">
              <div className="w-9 h-9 bg-gradient-to-br from-primary to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
                <span className="text-lg font-black text-white">Q</span>
              </div>
              <span className="text-xl font-black tracking-tight">QuitTraq</span>
            </Link>
            <p className="text-sm text-muted-foreground max-w-sm mb-4">
              Your companion to a healthier life. Track your progress, celebrate milestones, and take
              control of your journey.
            </p>
          </div>

          {/* Product Links */}
          <div>
            <h3 className="font-semibold mb-4">Product</h3>
            <ul className="space-y-2">
              {footerLinks.product.map((link) => (
                <li key={link.href}>
                  {link.href.startsWith('#') ? (
                    <button
                      onClick={() => handleAnchorClick(link.href)}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </button>
                  ) : (
                    <Link
                      href={link.href}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </Link>
                  )}
                </li>
              ))}
            </ul>
          </div>

          {/* Legal Links */}
          <div>
            <h3 className="font-semibold mb-4">Legal</h3>
            <ul className="space-y-2">
              {footerLinks.legal.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Affiliate Disclosure */}
        <div className="mt-12 pt-8 border-t border-white/10">
          <p className="text-xs text-muted-foreground text-center max-w-2xl mx-auto mb-6">
            QuitTraq may contain affiliate links. We may earn a small commission when you purchase
            products through our links, at no extra cost to you. This helps support the free features
            of the app.
          </p>

          {/* Copyright */}
          <p className="text-xs text-muted-foreground text-center">
            &copy; {currentYear} QuitTraq. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}