import Link from "next/link";
import { ScanLine } from "lucide-react";

export function MarketingFooter() {
  return (
    <footer className="border-t border-border/40 py-12">
      <div className="mx-auto max-w-6xl px-6">
        <div className="grid sm:grid-cols-4 gap-8">
          <div className="sm:col-span-2">
            <Link href="/welcome" className="flex items-center gap-2.5 mb-4">
              <div className="h-7 w-7 rounded-lg bg-primary flex items-center justify-center">
                <ScanLine className="h-3.5 w-3.5 text-primary-foreground" />
              </div>
              <span className="text-base font-semibold tracking-tight">Echo</span>
            </Link>
            <p className="text-sm text-muted-foreground max-w-xs leading-relaxed">
              AI-powered response card scanning for churches, ministries, and
              nonprofits. Turn paper into people &mdash; faster.
            </p>
          </div>
          <div>
            <h4 className="text-sm font-semibold mb-4">Product</h4>
            <ul className="space-y-2.5 text-sm text-muted-foreground">
              <li><Link href="/features/ai-ocr" className="hover:text-foreground transition-colors">AI-Powered OCR</Link></li>
              <li><Link href="/features/integrations" className="hover:text-foreground transition-colors">Integrations</Link></li>
              <li><Link href="/features/scanner-integration" className="hover:text-foreground transition-colors">Scanner Integration</Link></li>
              <li><Link href="/pricing" className="hover:text-foreground transition-colors">Pricing</Link></li>
              <li><Link href="/welcome#faq" className="hover:text-foreground transition-colors">FAQ</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold mb-4">Company</h4>
            <ul className="space-y-2.5 text-sm text-muted-foreground">
              <li><a href="mailto:support@echoocr.com" className="hover:text-foreground transition-colors">Support</a></li>
              <li><a href="mailto:sales@echoocr.com" className="hover:text-foreground transition-colors">Sales</a></li>
              <li><a href="#" className="hover:text-foreground transition-colors">Privacy Policy</a></li>
              <li><a href="#" className="hover:text-foreground transition-colors">Terms of Service</a></li>
            </ul>
          </div>
        </div>
        <div className="mt-10 pt-6 border-t border-border/30 text-center text-xs text-muted-foreground">
          &copy; {new Date().getFullYear()} Echo. All rights reserved.
        </div>
      </div>
    </footer>
  );
}