import { Server, Shield } from 'lucide-react';
import React from 'react';

export const Footer: React.FC = () => {
    return (
        <footer className="border-t border-[#260f14] bg-[#070405] text-slate-400 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
                {/* Brand Info */}
                <div className="space-y-4 md:col-span-1">
                    <div className="flex items-center gap-2.5">
                        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-red-600 to-rose-700 shadow-md shadow-red-600/25">
                            <Server className="h-5 w-5 text-white stroke-[2.5]" />
                        </div>
                        <span className="text-lg font-bold text-white tracking-tight">
                            ROSE<span className="text-rose-500">HOSTING</span>
                        </span>
                    </div>
                    <p className="text-xs text-slate-400 leading-relaxed">
                        High-Performance Cloud & VPS Server Hosting mit ISO-27001 zertifizierter Infrastruktur und 100% Ökostrom.
                    </p>
                    <div className="flex items-center gap-2 text-xs text-emerald-400 font-mono">
                        <span className="h-2 w-2 rounded-full bg-emerald-500 animate-ping inline-block" />
                        Alle Rechenzentren 100% Operativ
                    </div>
                </div>

                {/* Products */}
                <div>
                    <h4 className="text-xs font-bold text-white uppercase tracking-wider mb-3">Hosting Produkte</h4>
                    <ul className="space-y-2 text-xs">
                        <li><a href="#vps-calculator" className="hover:text-rose-400 transition-colors">Cloud VPS Hosting</a></li>
                        <li><a href="#products" className="hover:text-rose-400 transition-colors">Gameserver (Minecraft/CS2)</a></li>
                        <li><a href="#products" className="hover:text-rose-400 transition-colors">Bare Metal Dedicated</a></li>
                        <li><a href="#vps-calculator" className="hover:text-rose-400 transition-colors">Domain & SSL-Zertifikate</a></li>
                    </ul>
                </div>

                {/* Infrastructure */}
                <div>
                    <h4 className="text-xs font-bold text-white uppercase tracking-wider mb-3">Infrastruktur</h4>
                    <ul className="space-y-2 text-xs">
                        <li><a href="#network" className="hover:text-rose-400 transition-colors">Rechenzentrum Frankfurt (DE)</a></li>
                        <li><a href="#network" className="hover:text-rose-400 transition-colors">Rechenzentrum London (UK)</a></li>
                        <li><a href="#network" className="hover:text-rose-400 transition-colors">DDoS Protection (Voxility)</a></li>
                        <li><a href="#panel-preview" className="hover:text-rose-400 transition-colors">Control Panel Status</a></li>
                    </ul>
                </div>

                {/* Legal & Certifications */}
                <div>
                    <h4 className="text-xs font-bold text-white uppercase tracking-wider mb-3">Rechtliches & Sicherheit</h4>
                    <ul className="space-y-2 text-xs">
                        <li><a href="#" className="hover:text-rose-400 transition-colors">Impressum</a></li>
                        <li><a href="#" className="hover:text-rose-400 transition-colors">Datenschutzerklärung (DSGVO)</a></li>
                        <li><a href="#" className="hover:text-rose-400 transition-colors">AGB & Widerrufsrecht</a></li>
                        <li className="pt-2 flex items-center gap-1.5 text-[11px] text-slate-500">
                            <Shield className="h-3.5 w-3.5 text-rose-500" />
                            ISO 27001 Certified DC
                        </li>
                    </ul>
                </div>
            </div>

            <div className="max-w-7xl mx-auto mt-12 pt-6 border-t border-[#1a090c] flex flex-col sm:flex-row items-center justify-between text-[11px] text-slate-500 gap-4">
                <span>© {new Date().getFullYear()} RoseHosting GmbH. Alle Rechte vorbehalten.</span>
                <span className="font-mono">Ultra-Lightweight & Fast Frontend Core</span>
            </div>
        </footer>
    );
};