<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $page->meta_title ?: $page->title }} - {{ $siteName }}</title>
    <meta name="description" content="{{ $page->meta_description ?: 'Servicii profesionale de găzduire DNS Standard. Zone DNS nelimitate, propagare rapidă și suport tehnic 24/7.' }}">
    <meta name="keywords" content="{{ $page->meta_keywords ?: 'DNS, gazduire DNS, zone DNS, nameserver, hosting DNS, domenii' }}">

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800&display=swap" rel="stylesheet" />

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        }
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>

    <style>
        /* Gradiente și efecte custom */
        .gradient-text {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4c1d95 100%);
        }

        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Animații hover pentru carduri */
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .pricing-card {
            transition: all 0.3s ease;
        }
        .pricing-card:hover {
            transform: scale(1.02);
        }
        .pricing-card.popular {
            transform: scale(1.05);
            border-color: #3b82f6;
        }
        .pricing-card.popular:hover {
            transform: scale(1.07);
        }

        /* Pattern background */
        .pattern-grid {
            background-image:
                linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
        }
    </style>
</head>
<body class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">

    <!-- Navbar -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-globe text-white text-lg"></i>
                    </div>
                    <span class="text-xl font-bold text-gray-900 dark:text-white">{{ $siteName }}</span>
                </a>

                <!-- Desktop Navigation -->
                <div class="hidden lg:flex items-center gap-1">
                    @foreach($menus as $menu)
                        @if($menu->menu_type === 'dropdown' && $menu->children->count() > 0)
                            <div class="relative group">
                                <button class="px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition font-medium flex items-center gap-1">
                                    {{ $menu->title }}
                                    <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                                </button>
                                <div class="absolute top-full {{ $loop->last ? 'right-0' : 'left-0' }} pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 py-2 min-w-[200px]">
                                        @foreach($menu->children as $child)
                                            @php
                                                $href = match($child->menu_type) {
                                                    'page' => $child->page ? route('landing.page', $child->page->slug) : '#',
                                                    'external' => $child->external_url,
                                                    'anchor' => $child->anchor,
                                                    default => '#'
                                                };
                                            @endphp
                                            <a href="{{ $href }}" target="{{ $child->target }}" class="flex items-center gap-3 px-4 py-2.5 text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-gray-700 hover:text-blue-600 dark:hover:text-blue-400 transition">
                                                @if($child->icon)
                                                    <i class="{{ $child->icon }} {{ $child->icon_color ?? 'text-blue-500' }} w-5"></i>
                                                @endif
                                                {{ $child->title }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @elseif($menu->menu_type !== 'dropdown')
                            @php
                                $href = match($menu->menu_type) {
                                    'page' => $menu->page ? route('landing.page', $menu->page->slug) : '#',
                                    'external' => $menu->external_url,
                                    'anchor' => $menu->anchor,
                                    default => '#'
                                };
                            @endphp
                            <a href="{{ $href }}" target="{{ $menu->target }}" class="px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition font-medium">
                                {{ $menu->title }}
                            </a>
                        @endif
                    @endforeach
                </div>

                <!-- Auth Buttons -->
                <div class="flex items-center gap-3">
                    <button id="darkModeToggle" class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition flex items-center justify-center">
                        <i class="fas fa-moon text-lg dark:hidden"></i>
                        <i class="fas fa-sun text-lg hidden dark:inline text-yellow-400"></i>
                    </button>

                    @auth
                        <a href="{{ route('dashboard') }}" class="hidden sm:flex items-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition">
                            <i class="fas fa-tachometer-alt"></i>
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('login') }}" class="hidden sm:inline-flex px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition font-medium">
                            Autentificare
                        </a>
                        <a href="{{ route('register') }}" class="hidden sm:flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg font-medium shadow-lg shadow-blue-500/25 transition-all">
                            <i class="fas fa-rocket"></i>
                            Începe Gratuit
                        </a>
                    @endauth

                    <!-- Mobile menu button -->
                    <button id="mobileMenuBtn" class="lg:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient pt-32 pb-20 relative overflow-hidden">
        <!-- Elemente decorative -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-20 left-10 w-72 h-72 bg-blue-400 rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-400 rounded-full blur-3xl"></div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div class="text-center">
                <!-- Badge -->
                <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2 mb-6">
                    <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                    <span class="text-white/90 text-sm font-medium">Serviciu Activ 24/7</span>
                </div>

                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
                    Găzduire <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300">DNS Standard</span>
                </h1>
                <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
                    Servicii profesionale de găzduire DNS pentru domeniile tale.
                    Propagare rapidă, uptime 99.9% și suport tehnic dedicat.
                </p>

                <!-- Statistici rapide -->
                <div class="flex flex-wrap justify-center gap-8 mt-12">
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">99.9%</div>
                        <div class="text-blue-200 text-sm">Uptime Garantat</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">&lt;5 min</div>
                        <div class="text-blue-200 text-sm">Propagare DNS</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">4</div>
                        <div class="text-blue-200 text-sm">Nameservere</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">24/7</div>
                        <div class="text-blue-200 text-sm">Suport Tehnic</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wave separator -->
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" class="fill-gray-50 dark:fill-gray-900"/>
            </svg>
        </div>
    </section>

    <!-- Secțiunea Funcționalități - 6 Carduri -->
    <section class="py-20 pattern-grid">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Titlu secțiune -->
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-sm font-semibold mb-4">
                    FUNCȚIONALITĂȚI
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    Ce include serviciul DNS Standard?
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    Tot ce ai nevoie pentru gestionarea profesională a zonelor DNS pentru domeniile tale
                </p>
            </div>

            <!-- Grid 6 carduri -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Card 1: Zone DNS -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-globe text-2xl text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Zone DNS Nelimitate</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Creează și gestionează multiple zone DNS pentru toate domeniile tale. Fiecare zonă cu setări independente.
                    </p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Import/Export zone
                        </li>
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Backup automat
                        </li>
                    </ul>
                </div>

                <!-- Card 2: Tipuri Înregistrări -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-list-alt text-2xl text-green-600 dark:text-green-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Toate Tipurile de Înregistrări</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Suport complet pentru toate tipurile de înregistrări DNS standard și avansate.
                    </p>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">A</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">AAAA</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">CNAME</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">MX</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">TXT</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">SRV</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">NS</span>
                        <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs font-medium">CAA</span>
                    </div>
                </div>

                <!-- Card 3: Propagare Rapidă -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-bolt text-2xl text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Propagare Rapidă</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Modificările DNS se propagă în mai puțin de 5 minute pe toată rețeaua noastră de nameservere.
                    </p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> TTL configurabil
                        </li>
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Propagare instant
                        </li>
                    </ul>
                </div>

                <!-- Card 4: Panel Modern -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-desktop text-2xl text-orange-600 dark:text-orange-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Panel Intuitiv</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Interfață modernă și ușor de utilizat. Gestionează zonele DNS fără cunoștințe tehnice avansate.
                    </p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Dark/Light mode
                        </li>
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Responsive design
                        </li>
                    </ul>
                </div>

                <!-- Card 5: Statistici -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-cyan-100 dark:bg-cyan-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-chart-line text-2xl text-cyan-600 dark:text-cyan-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Statistici în Timp Real</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Monitorizează query-urile DNS, vezi statistici detaliate și grafice pentru fiecare zonă.
                    </p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Grafice interactive
                        </li>
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Export rapoarte
                        </li>
                    </ul>
                </div>

                <!-- Card 6: Securitate -->
                <div class="feature-card bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="w-14 h-14 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-shield-alt text-2xl text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Securitate Avansată</h3>
                    <p class="text-gray-600 dark:text-gray-400">
                        Protecție completă cu DNSSEC, 2FA și monitorizare automată pentru orice modificări suspecte.
                    </p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> DNSSEC suportat
                        </li>
                        <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i> Audit log complet
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Secțiunea Pachete/Prețuri - 4 Carduri -->
    <section class="py-20 bg-gradient-to-b from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Titlu secțiune -->
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-1 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full text-sm font-semibold mb-4">
                    PACHETE & PREȚURI
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    Alege pachetul potrivit pentru tine
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    De la utilizatori individuali la afaceri mari, avem soluția perfectă
                </p>
            </div>

            <!-- Grid 4 pachete -->
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Pachet 1: Free -->
                <div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="text-center mb-6">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Free</h3>
                        <div class="text-4xl font-bold text-gray-900 dark:text-white">
                            0 <span class="text-lg font-normal text-gray-500">RON</span>
                        </div>
                        <p class="text-gray-500 text-sm mt-1">pentru totdeauna</p>
                    </div>

                    <ul class="space-y-3 mb-6">
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>1 Zonă DNS</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>10 Înregistrări/zonă</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>1.000 Query-uri/zi</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>Suport Email</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-400">
                            <i class="fas fa-times text-gray-400"></i>
                            <span>DNSSEC</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-400">
                            <i class="fas fa-times text-gray-400"></i>
                            <span>API Access</span>
                        </li>
                    </ul>

                    <a href="{{ route('register') }}" class="block w-full py-3 text-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-xl font-medium transition">
                        Începe Gratuit
                    </a>
                </div>

                <!-- Pachet 2: Personal -->
                <div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="text-center mb-6">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Personal</h3>
                        <div class="text-4xl font-bold text-gray-900 dark:text-white">
                            19 <span class="text-lg font-normal text-gray-500">RON/lună</span>
                        </div>
                        <p class="text-gray-500 text-sm mt-1">facturat anual</p>
                    </div>

                    <ul class="space-y-3 mb-6">
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>5 Zone DNS</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>50 Înregistrări/zonă</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>50.000 Query-uri/zi</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>Suport Email + Chat</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>DNSSEC</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-400">
                            <i class="fas fa-times text-gray-400"></i>
                            <span>API Access</span>
                        </li>
                    </ul>

                    <a href="{{ route('register') }}" class="block w-full py-3 text-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-xl font-medium transition">
                        Alege Personal
                    </a>
                </div>

                <!-- Pachet 3: Pro (Popular) -->
                <div class="pricing-card popular bg-white dark:bg-gray-800 rounded-2xl p-6 border-2 border-blue-500 shadow-xl relative">
                    <!-- Badge Popular -->
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2">
                        <span class="bg-gradient-to-r from-blue-600 to-purple-600 text-white text-sm font-bold px-4 py-1 rounded-full shadow-lg">
                            POPULAR
                        </span>
                    </div>

                    <div class="text-center mb-6 mt-2">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Pro</h3>
                        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400">
                            49 <span class="text-lg font-normal text-gray-500">RON/lună</span>
                        </div>
                        <p class="text-gray-500 text-sm mt-1">facturat anual</p>
                    </div>

                    <ul class="space-y-3 mb-6">
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>25</strong> Zone DNS</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>200</strong> Înregistrări/zonă</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>500.000</strong> Query-uri/zi</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>Suport Prioritar</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>DNSSEC</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>API Access</span>
                        </li>
                    </ul>

                    <a href="{{ route('register') }}" class="block w-full py-3 text-center bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-xl font-medium transition shadow-lg">
                        Alege Pro
                    </a>
                </div>

                <!-- Pachet 4: Business -->
                <div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <div class="text-center mb-6">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Business</h3>
                        <div class="text-4xl font-bold text-gray-900 dark:text-white">
                            149 <span class="text-lg font-normal text-gray-500">RON/lună</span>
                        </div>
                        <p class="text-gray-500 text-sm mt-1">facturat anual</p>
                    </div>

                    <ul class="space-y-3 mb-6">
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>Nelimitat</strong> Zone DNS</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>1000</strong> Înregistrări/zonă</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span><strong>Nelimitat</strong> Query-uri</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>Suport 24/7</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>DNSSEC + White Label</span>
                        </li>
                        <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                            <i class="fas fa-check text-green-500"></i>
                            <span>API Access Nelimitat</span>
                        </li>
                    </ul>

                    <a href="{{ route('register') }}" class="block w-full py-3 text-center bg-gray-900 dark:bg-white hover:bg-gray-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 rounded-xl font-medium transition">
                        Alege Business
                    </a>
                </div>
            </div>

            <!-- Notă prețuri -->
            <p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-8">
                Toate prețurile sunt exprimate în RON și nu includ TVA. Plata se poate face cu cardul sau transfer bancar.
            </p>
        </div>
    </section>

    <!-- Secțiunea De ce să alegi DNS Standard -->
    <section class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <!-- Text -->
                <div>
                    <span class="inline-block px-4 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full text-sm font-semibold mb-4">
                        DE CE NOI?
                    </span>
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
                        Infrastructură DNS de încredere
                    </h2>
                    <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
                        Cu peste 5 ani de experiență în găzduire DNS, oferim servicii stabile și performante
                        pentru mii de domenii din România și Europa.
                    </p>

                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-server text-green-600 dark:text-green-400"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Nameservere în România</h4>
                                <p class="text-gray-600 dark:text-gray-400">Servere DNS amplasate în datacenteruri din România pentru latență minimă.</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-sync-alt text-blue-600 dark:text-blue-400"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Redundanță Completă</h4>
                                <p class="text-gray-600 dark:text-gray-400">4 nameservere independente asigură disponibilitatea 99.9% a serviciului.</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-headset text-orange-600 dark:text-orange-400"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">Suport Tehnic în Română</h4>
                                <p class="text-gray-600 dark:text-gray-400">Echipă de suport dedicată, disponibilă în limba română pentru asistență rapidă.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ilustrație/Stats -->
                <div class="bg-gradient-to-br from-blue-600 to-purple-700 rounded-3xl p-8 text-white">
                    <div class="text-center mb-8">
                        <i class="fas fa-network-wired text-6xl opacity-50 mb-4"></i>
                        <h3 class="text-2xl font-bold">Statistici Platform</h3>
                    </div>

                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold">2.100+</div>
                            <div class="text-blue-200 text-sm">Zone DNS Active</div>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold">500+</div>
                            <div class="text-blue-200 text-sm">Clienți Fericiți</div>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold">12.500+</div>
                            <div class="text-blue-200 text-sm">Înregistrări DNS</div>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center">
                            <div class="text-3xl font-bold">99.9%</div>
                            <div class="text-blue-200 text-sm">Uptime Anual</div>
                        </div>
                    </div>

                    <div class="mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-xl">
                        <div class="flex items-center gap-3">
                            <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                            <span class="text-sm">Toate sistemele operaționale</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Secțiunea FAQ -->
    <section class="py-20 bg-gray-100 dark:bg-gray-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 rounded-full text-sm font-semibold mb-4">
                    FAQ
                </span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    Întrebări Frecvente
                </h2>
            </div>

            <div class="space-y-4">
                <!-- FAQ 1 -->
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between" onclick="toggleFaq(this)">
                        <span class="font-semibold text-gray-900 dark:text-white">Ce este găzduirea DNS Standard?</span>
                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-4">
                        <p class="text-gray-600 dark:text-gray-400">
                            Găzduirea DNS Standard este un serviciu care permite stocarea și gestionarea înregistrărilor DNS pentru domeniile tale
                            pe serverele noastre. Când cineva accesează site-ul tău, nameserverele noastre răspund cu informațiile necesare
                            pentru a direcționa vizitatorii către serverul corect.
                        </p>
                    </div>
                </div>

                <!-- FAQ 2 -->
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between" onclick="toggleFaq(this)">
                        <span class="font-semibold text-gray-900 dark:text-white">Cât durează propagarea DNS?</span>
                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-4">
                        <p class="text-gray-600 dark:text-gray-400">
                            Pe serverele noastre, modificările se aplică instant. Propagarea globală durează de obicei între câteva minute
                            și 24 de ore, în funcție de setările TTL și cache-ul DNS al diferiților provideri de internet.
                        </p>
                    </div>
                </div>

                <!-- FAQ 3 -->
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between" onclick="toggleFaq(this)">
                        <span class="font-semibold text-gray-900 dark:text-white">Pot migra zonele DNS de la alt provider?</span>
                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-4">
                        <p class="text-gray-600 dark:text-gray-400">
                            Da, oferim funcționalitate de import pentru zone DNS. Poți importa fișiere de zonă în format BIND sau
                            poți crea manual înregistrările. Echipa noastră de suport te poate ajuta gratuit cu migrarea.
                        </p>
                    </div>
                </div>

                <!-- FAQ 4 -->
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between" onclick="toggleFaq(this)">
                        <span class="font-semibold text-gray-900 dark:text-white">Ce este DNSSEC și am nevoie de el?</span>
                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-4">
                        <p class="text-gray-600 dark:text-gray-400">
                            DNSSEC (DNS Security Extensions) adaugă un nivel suplimentar de securitate prin semnarea criptografică
                            a înregistrărilor DNS. Previne atacurile de tip DNS spoofing. Este recomandat pentru site-uri cu date
                            sensibile sau tranzacții online.
                        </p>
                    </div>
                </div>

                <!-- FAQ 5 -->
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
                    <button class="faq-toggle w-full px-6 py-4 text-left flex items-center justify-between" onclick="toggleFaq(this)">
                        <span class="font-semibold text-gray-900 dark:text-white">Pot schimba pachetul ulterior?</span>
                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
                    </button>
                    <div class="faq-content hidden px-6 pb-4">
                        <p class="text-gray-600 dark:text-gray-400">
                            Da, poți face upgrade sau downgrade oricând din panelul de control. Modificările se aplică imediat,
                            iar diferența de preț se calculează proporțional pentru perioada rămasă.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-20">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-r from-blue-600 to-purple-700 rounded-3xl p-12 text-center text-white relative overflow-hidden">
                <!-- Decorații -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>

                <div class="relative">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                        Gata să începi?
                    </h2>
                    <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
                        Creează un cont gratuit și configurează-ți prima zonă DNS în mai puțin de 2 minute.
                    </p>

                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <a href="{{ route('register') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-blue-600 rounded-xl font-bold text-lg hover:bg-gray-100 transition shadow-xl">
                            <i class="fas fa-rocket"></i>
                            Începe Gratuit
                        </a>
                        <a href="{{ route('home') }}#contact" class="inline-flex items-center gap-2 px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/30 text-white rounded-xl font-medium text-lg hover:bg-white/20 transition">
                            <i class="fas fa-envelope"></i>
                            Contactează-ne
                        </a>
                    </div>

                    <p class="text-blue-200 text-sm mt-6">
                        <i class="fas fa-check-circle mr-1"></i> Nu este necesar card de credit
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-8 mb-12">
                <!-- Logo și descriere -->
                <div class="md:col-span-2">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                            <i class="fas fa-globe text-white"></i>
                        </div>
                        <span class="text-xl font-bold text-white">{{ $siteName }}</span>
                    </div>
                    <p class="text-gray-400 max-w-md">
                        Servicii profesionale de găzduire DNS pentru domenii din România și Europa.
                        Uptime garantat 99.9% și suport tehnic în limba română.
                    </p>
                </div>

                <!-- Linkuri rapide -->
                <div>
                    <h4 class="text-white font-semibold mb-4">Servicii</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">DNS Standard</a></li>
                        <li><a href="#" class="hover:text-white transition">Dynamic DNS</a></li>
                        <li><a href="#" class="hover:text-white transition">DNSSEC</a></li>
                        <li><a href="#" class="hover:text-white transition">API Access</a></li>
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h4 class="text-white font-semibold mb-4">Contact</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center gap-2">
                            <i class="fas fa-envelope text-blue-400"></i>
                            <a href="mailto:support@gazduiredns.ro" class="hover:text-white transition">support@gazduiredns.ro</a>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fas fa-globe text-blue-400"></i>
                            <a href="https://gazduiredns.ro" class="hover:text-white transition">gazduiredns.ro</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 text-center">
                <p class="text-sm">© {{ date('Y') }} {{ $siteName }}. Toate drepturile rezervate. Operat de ITDATA TELECOM SRL.</p>
            </div>
        </div>
    </footer>

    <script>
        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const html = document.documentElement;

        if (localStorage.getItem('darkMode') === 'true' ||
            (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        }

        darkModeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('darkMode', html.classList.contains('dark'));
        });

        // FAQ Toggle
        function toggleFaq(button) {
            const content = button.nextElementSibling;
            const icon = button.querySelector('i');

            content.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        }
    </script>
</body>
</html>
