"use client";

import { Activity, ShieldCheck, Twitter, Linkedin } from "lucide-react";
import Link from "next/link";

export default function Footer() {
    return (
        <footer className="relative z-10 glass border-t-0 mt-32 py-24">
            <div className="container mx-auto px-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                    <div className="space-y-6 col-span-1 md:col-span-1">
                        <Link href="/" className="flex items-center gap-2 group">
                            <Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
                            <span className="text-2xl font-bold tracking-tighter text-gradient">
                                Skyheal
                            </span>
                        </Link>
                        <p className="text-foreground/50 text-sm leading-relaxed">
                            Pioneering the future of AI-driven healthcare. Precision hardware, intelligent software, and absolute security.
                        </p>
                        <div className="flex gap-4">
                            <button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
                                <Twitter className="w-4 h-4 text-foreground/60" />
                            </button>
                            <button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
                                <Linkedin className="w-4 h-4 text-foreground/60" />
                            </button>
                        </div>
                    </div>

                    <div className="space-y-6">
                        <h4 className="font-bold uppercase tracking-widest text-xs text-primary">Products</h4>
                        <ul className="space-y-4 text-sm text-foreground/50">
                            <li><Link href="/devices" className="hover:text-primary transition-colors">Medical Devices</Link></li>
                            <li><Link href="/#voice-soap" className="hover:text-primary transition-colors">AI Voice-to-SOAP</Link></li>
                            <li><Link href="/#diagnosis" className="hover:text-primary transition-colors">AI Diagnosis</Link></li>
                            <li><Link href="/apps" className="hover:text-primary transition-colors">Mobile Apps</Link></li>
                        </ul>
                    </div>

                    <div className="space-y-6">
                        <h4 className="font-bold uppercase tracking-widest text-xs text-primary">Company</h4>
                        <ul className="space-y-4 text-sm text-foreground/50">
                            <li><Link href="#" className="hover:text-primary transition-colors">About Us</Link></li>
                            <li><Link href="#" className="hover:text-primary transition-colors">Security</Link></li>
                            <li><Link href="#" className="hover:text-primary transition-colors">Contact</Link></li>
                        </ul>
                    </div>

                    <div className="space-y-6">
                        <div className="p-6 glass rounded-2xl border-accent/20 bg-accent/5 space-y-4">
                            <div className="flex items-center gap-3">
                                <ShieldCheck className="w-6 h-6 text-accent" />
                                <span className="font-bold text-accent">HIPAA Compliant</span>
                            </div>
                            <p className="text-[10px] text-foreground/40 leading-tight">
                                Skyheal is fully certified for PHI handling and follows rigorous HIPAA/GDPR security standards.
                            </p>
                        </div>
                    </div>
                </div>

                <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
                    <p className="text-foreground/30 text-xs">
                        © 2026 Skyheal AI. Built with precision and care.
                    </p>
                    <div className="flex gap-8 text-foreground/30 text-xs uppercase tracking-widest">
                        <Link href="#" className="hover:text-primary">Privacy Policy</Link>
                        <Link href="#" className="hover:text-primary">Terms of Service</Link>
                    </div>
                </div>
            </div>
        </footer>
    );
}