import { SharedData } from '@/types';
import { Head, Link, usePage } from '@inertiajs/react';
import { ArrowRight, Check, Cpu, Gamepad2, Globe, Server, ShieldCheck, Sparkles, Star, Terminal, Zap } from 'lucide-react';
import { FaqSection } from '../components/hosting/FaqSection';
import { FeaturesGrid } from '../components/hosting/FeaturesGrid';
import { Footer } from '../components/hosting/Footer';
import { Navbar } from '../components/hosting/Navbar';
import { PanelPreview } from '../components/hosting/PanelPreview';
import { PingTester } from '../components/hosting/PingTester';

export default function Welcome() {
    const { auth } = usePage<SharedData>().props;

    return (
        <>
            <Head title="Rose Hosting - Next-Gen Cloud VPS & Gameserver Hosting">
                <meta
                    name="description"
                    content="High-Performance Cloud VPS, Gameserver und Bare Metal Dedicated Hosting mit AMD EPYC™ 9004 Gen4 Hardware, 10Gbps Uplink & Instant Deployment in 30 Sekunden."
                />
            </Head>

            <div className="min-h-screen bg-[#070405] text-slate-100 font-sans selection:bg-rose-600 selection:text-white">
                {/* Navbar */}
                <Navbar auth={auth} />

                {/* Main Hero Section */}
                <section className="relative pt-16 pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
                    {/* Ambient Background Glow */}
                    <div className="absolute top-12 left-1/2 -translate-x-1/2 w-full max-w-5xl h-[380px] bg-gradient-to-r from-red-600/20 via-rose-600/15 to-red-950/15 blur-[140px] rounded-full pointer-events-none -z-10" />

                    <div className="text-center max-w-4xl mx-auto space-y-6">
                        {/* Top Trustpilot Rating & Hardware Pill */}
                        <div className="flex flex-wrap items-center justify-center gap-3">
                            <div className="inline-flex items-center gap-2 rounded-full border border-[#3b121a] bg-[#14070a] px-4 py-1.5 text-xs font-semibold text-rose-300 shadow-lg shadow-red-950/40">
                                <span className="relative flex h-2 w-2">
                                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-rose-400 opacity-75"></span>
                                    <span className="relative inline-flex h-2 w-2 rounded-full bg-rose-500"></span>
                                </span>
                                <span>AMD EPYC™ 9004 Zen 4 & NVMe PCIe 4.0 Hardware Live</span>
                                <span className="text-rose-600">|</span>
                                <span className="text-emerald-400 font-mono text-[11px]">0 ms Paketverlust</span>
                            </div>

                            <div className="inline-flex items-center gap-1.5 rounded-full border border-emerald-900/60 bg-emerald-950/40 px-3.5 py-1 text-xs font-semibold text-emerald-400">
                                <div className="flex text-amber-400">
                                    <Star className="h-3.5 w-3.5 fill-amber-400" />
                                    <Star className="h-3.5 w-3.5 fill-amber-400" />
                                    <Star className="h-3.5 w-3.5 fill-amber-400" />
                                    <Star className="h-3.5 w-3.5 fill-amber-400" />
                                    <Star className="h-3.5 w-3.5 fill-amber-400" />
                                </div>
                                <span className="font-bold">4.9 / 5</span>
                                <span className="text-slate-400 text-[10px]">(500+ Bewertungen)</span>
                            </div>
                        </div>

                        {/* Main Headline */}
                        <h1 className="text-4xl sm:text-6xl font-black tracking-tight text-white leading-[1.15]">
                            Server-Hosting mit{' '}
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-rose-400 to-red-400">
                                maximaler Leistung
                            </span>{' '}
                            & geringer Latenz
                        </h1>

                        <p className="text-slate-400 text-base sm:text-lg max-w-2xl mx-auto leading-relaxed">
                            High-Performance Cloud VPS, Gameserver & Bare-Metal Nodes. KVM-Root Zugriff, 2.4 Tbps Voxility Anti-DDoS und blitzschnelle Bereitstellung in unter 30 Sekunden.
                        </p>

                        {/* CTA Buttons */}
                        <div className="pt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
                            <Link
                                href="/dashboard"
                                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-xl bg-red-600 hover:bg-red-700 px-8 py-4 text-base font-bold text-white shadow-xl shadow-red-600/25 active:scale-98 transition-all"
                            >
                                <Zap className="h-5 w-5 fill-white" />
                                Zum Kundenportal (Dashboard)
                            </Link>
                            <a
                                href="#panel-preview"
                                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-xl border border-[#36131b] bg-[#14070a] px-8 py-4 text-base font-semibold text-slate-200 hover:bg-[#1f0a0e] hover:border-rose-500/50 transition-all shadow-md"
                            >
                                Control Panel Vorschau
                                <ArrowRight className="h-4 w-4 text-slate-400" />
                            </a>
                        </div>

                        {/* Quick Stats Grid */}
                        <div className="pt-12 grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-4xl mx-auto">
                            <div className="rounded-2xl border border-[#36131b] bg-[#120709] p-4 text-center shadow-lg">
                                <div className="text-2xl font-mono font-black text-rose-400">&lt; 30 Sek.</div>
                                <div className="text-xs text-slate-400 mt-1">Instant Provisioning</div>
                            </div>
                            <div className="rounded-2xl border border-[#36131b] bg-[#120709] p-4 text-center shadow-lg">
                                <div className="text-2xl font-mono font-black text-emerald-400">99.99%</div>
                                <div className="text-xs text-slate-400 mt-1">SLA Uptime-Garantie</div>
                            </div>
                            <div className="rounded-2xl border border-[#36131b] bg-[#120709] p-4 text-center shadow-lg">
                                <div className="text-2xl font-mono font-black text-rose-500">2.4 Tbps</div>
                                <div className="text-xs text-slate-400 mt-1">Voxility DDoS Protection</div>
                            </div>
                            <div className="rounded-2xl border border-[#36131b] bg-[#120709] p-4 text-center shadow-lg">
                                <div className="text-2xl font-mono font-black text-red-400">0% Overbook</div>
                                <div className="text-xs text-slate-400 mt-1">Garantierte Hardware</div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Web Control Panel Live Preview (Our actual ROSE HOST control panel) */}
                <PanelPreview />

                {/* Network Ping Tester */}
                <PingTester />

                {/* Infrastructure Features Grid */}
                <FeaturesGrid />

                {/* FAQ Accordion */}
                <FaqSection />

                {/* Footer */}
                <Footer />
            </div>
        </>
    );
}
