"use client";

import { Activity, ShieldCheck, Twitter, Linkedin, Github, Mail, Phone, MapPin, Award, Lock, FileCheck, Heart, CheckCircle2 } from "lucide-react";
import { motion } from "framer-motion";

export default function Footer() {
    return (
        <footer className="relative z-10 mt-20 sm:mt-32 bg-gradient-to-b from-black via-zinc-950 to-black border-t border-white/5">
            {/* Top decorative line */}
            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />

            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                {/* Main Footer Content */}
                <div className="pt-16 sm:pt-20 lg:pt-24 pb-12">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-12">
                        {/* Brand Section - Takes more space */}
                        <div className="lg:col-span-4 space-y-6">
                            <div className="space-y-6">
                                {/* Logo */}
                                <a href="/" className="inline-flex items-center gap-3 group">
                                    <div className="relative">
                                        <div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
                                        <Activity className="w-9 h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
                                    </div>
                                    <span className="text-2xl sm:text-3xl font-bold tracking-tight text-white">
                                        Skyheal
                                    </span>
                                </a>

                                {/* Description */}
                                <p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-sm">
                                    Advanced healthcare technology platform providing AI-powered diagnostics, secure patient monitoring, and enterprise-grade clinical solutions.
                                </p>

                                {/* Trust Badges */}
                                <div className="space-y-3">
                                    <p className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Certified & Compliant</p>
                                    <div className="flex flex-wrap gap-2">
                                        {[
                                            { icon: ShieldCheck, text: "HIPAA" },
                                            { icon: Lock, text: "SOC 2" },
                                            { icon: FileCheck, text: "FDA" },
                                            { icon: Award, text: "ISO 27001" }
                                        ].map((badge, i) => (
                                            <motion.div
                                                key={i}
                                                whileHover={{ y: -2 }}
                                                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/10 hover:border-white/20 transition-all cursor-pointer"
                                            >
                                                <badge.icon className="w-3 h-3 text-green-400" />
                                                <span className="text-[10px] font-semibold text-zinc-400">{badge.text}</span>
                                            </motion.div>
                                        ))}
                                    </div>
                                </div>

                                {/* Social Links */}
                                <div className="flex gap-3">
                                    {[
                                        { icon: Twitter, label: "Twitter" },
                                        { icon: Linkedin, label: "LinkedIn" },
                                        { icon: Github, label: "GitHub" }
                                    ].map((social, i) => (
                                        <motion.button
                                            key={i}
                                            whileHover={{ y: -2 }}
                                            whileTap={{ scale: 0.95 }}
                                            className="w-10 h-10 rounded-lg bg-white/[0.03] flex items-center justify-center hover:bg-white/[0.08] transition-colors border border-white/10 hover:border-white/20 group"
                                            aria-label={social.label}
                                        >
                                            <social.icon className="w-4 h-4 text-zinc-400 group-hover:text-white transition-colors" />
                                        </motion.button>
                                    ))}
                                </div>
                            </div>
                        </div>

                        {/* Products */}
                        <div className="lg:col-span-2 space-y-5">
                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Products</h4>
                            <ul className="space-y-3">
                                {[
                                    { name: "Medical Devices", href: "/devices" },
                                    { name: "Voice-to-SOAP", href: "/#voice-soap" },
                                    { name: "AI Diagnosis", href: "/#diagnosis" },
                                    { name: "Mobile Apps", href: "/apps" },
                                    { name: "Clinical Dashboard", href: "#" },
                                    { name: "Analytics Platform", href: "#" }
                                ].map((item, i) => (
                                    <li key={i}>
                                        <a
                                            href={item.href}
                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
                                        >
                                            <span className="w-1 h-1 rounded-full bg-blue-400/50 group-hover:bg-blue-400 transition-colors" />
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Solutions */}
                        <div className="lg:col-span-2 space-y-5">
                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Solutions</h4>
                            <ul className="space-y-3">
                                {[
                                    "Hospital Systems",
                                    "Private Practices",
                                    "Telehealth",
                                    "Remote Monitoring",
                                    "Clinical Research",
                                    "Health Insurance"
                                ].map((item, i) => (
                                    <li key={i}>
                                        <a
                                            href="#"
                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
                                        >
                                            <span className="w-1 h-1 rounded-full bg-purple-400/50 group-hover:bg-purple-400 transition-colors" />
                                            {item}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Resources */}
                        <div className="lg:col-span-2 space-y-5">
                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Resources</h4>
                            <ul className="space-y-3">
                                {[
                                    "Documentation",
                                    "API Reference",
                                    "Developer Guide",
                                    "Security & Compliance",
                                    "Case Studies",
                                    "Support Center"
                                ].map((item, i) => (
                                    <li key={i}>
                                        <a
                                            href="#"
                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
                                        >
                                            <span className="w-1 h-1 rounded-full bg-green-400/50 group-hover:bg-green-400 transition-colors" />
                                            {item}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Contact Card */}
                        <div className="lg:col-span-2 space-y-5">
                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Contact</h4>
                            <div className="space-y-4">
                                {[
                                    { icon: Mail, text: "support@skyheal.ai", href: "mailto:support@skyheal.ai" },
                                    { icon: Phone, text: "+1 (555) 123-4567", href: "tel:+15551234567" },
                                    { icon: MapPin, text: "San Francisco, CA", href: "#" }
                                ].map((contact, i) => (
                                    <a
                                        key={i}
                                        href={contact.href}
                                        className="flex items-center gap-3 text-sm text-zinc-400 hover:text-white transition-colors group"
                                    >
                                        <div className="w-8 h-8 rounded-lg bg-white/[0.03] border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
                                            <contact.icon className="w-4 h-4" />
                                        </div>
                                        {contact.text}
                                    </a>
                                ))}
                            </div>

                            {/* CTA Card */}
                            <div className="mt-6 p-5 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 space-y-3">
                                <div className="flex items-center gap-2">
                                    <Heart className="w-5 h-5 text-red-400" />
                                    <h5 className="text-sm font-bold text-white">24/7 Support</h5>
                                </div>
                                {/* <p className="text-xs text-zinc-400 leading-relaxed">
                                    Our healthcare experts are available round the clock to assist you.
                                </p> */}
                                {/* <motion.button
                                    whileHover={{ scale: 1.02 }}
                                    whileTap={{ scale: 0.98 }}
                                    className="w-full px-4 py-2.5 bg-white text-black rounded-lg text-xs font-bold hover:bg-zinc-100 transition-colors"
                                >
                                    Get Started
                                </motion.button> */}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Divider */}
                <div className="border-t border-white/5" />

                {/* Bottom Section */}
                <div className="py-8">
                    <div className="flex flex-col lg:flex-row justify-between items-center gap-6">
                        {/* Copyright */}
                        <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-xs text-zinc-500">
                            <p>© 2026 Skyheal. All rights reserved.</p>
                            <div className="flex items-center gap-2">
                                <CheckCircle2 className="w-3 h-3 text-green-400" />
                                <span>HIPAA Compliant Healthcare Platform</span>
                            </div>
                        </div>

                        {/* Legal Links */}
                        <div className="flex flex-wrap justify-center gap-6 text-xs">
                            {[
                                "Privacy Policy",
                                "Terms of Service",
                                "Cookie Policy",
                                "Accessibility"
                            ].map((item, i) => (
                                <a
                                    key={i}
                                    href="#"
                                    className="text-zinc-500 hover:text-white transition-colors"
                                >
                                    {item}
                                </a>
                            ))}
                        </div>
                    </div>

                    {/* Additional Info */}
                    <div className="mt-6 pt-6 border-t border-white/5">
                        <p className="text-center text-xs text-zinc-600 leading-relaxed max-w-4xl mx-auto">
                            Skyheal is a healthcare technology platform designed to assist medical professionals. Our AI-powered tools are intended to support,
                            not replace, the relationship between healthcare providers and patients. All medical decisions should be made by licensed healthcare professionals.
                        </p>
                    </div>
                </div>
            </div>

            {/* Gradient Overlay at bottom */}
            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
        </footer>
    );
}