@extends('web.layouts.web-master')

@section('title', 'Newsrooms - Business Portal 24')

@section('content')

    <main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
        <!-- Burger Menu Component -->
        <livewire:web.burger-menu />

        <!-- Header Component -->
        <livewire:web.header />

        <!-- Hero Section -->
        <section class="relative overflow-hidden text-white py-20 animate-fade-in"
            style="background: var(--gradient-hero);">
            <div class="container mx-auto px-4">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 animate-fade-in-up">
                        Newsrooms
                    </h1>
                    <p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
                        Ihr professioneller Unternehmens-Newsroom – Alle Pressemitteilungen zentral an einem Ort
                    </p>
                </div>
            </div>
            <!-- Decorative Pattern -->
            <div class="absolute top-0 right-0 opacity-10">
                <svg width="404" height="384" fill="none" viewBox="0 0 404 384">
                    <defs>
                        <pattern id="pattern-hero-newsrooms" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                            <rect x="0" y="0" width="4" height="4" fill="currentColor"/>
                        </pattern>
                    </defs>
                    <rect width="404" height="384" fill="url(#pattern-hero-newsrooms)"/>
                </svg>
            </div>
        </section>

        <!-- What is a Newsroom Section -->
        <section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
                            Was ist ein Newsroom?
                        </h2>
                        <p class="text-lg text-zinc-600 dark:text-zinc-400">
                            Ihre digitale Pressezentrale für professionelle Unternehmenskommunikation
                        </p>
                    </div>

                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
                        <p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
                            Ein Newsroom ist Ihre dedizierte Unternehmensseite auf Business Portal, wo alle Ihre Pressemitteilungen gebündelt und professionell präsentiert werden. Journalisten, Partner und Interessenten finden hier alle relevanten Informationen zu Ihrem Unternehmen auf einen Blick.
                        </p>
                        <p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed">
                            Mit Ihrem individuellen Newsroom bauen Sie Vertrauen auf und schaffen eine zentrale Anlaufstelle für alle, die sich über Ihr Unternehmen informieren möchten.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="py-16 bg-zinc-50/50 dark:bg-zinc-900/50 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
                        Newsroom Features
                    </h2>
                    <p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
                        Professionelle Features für Ihre Unternehmenskommunikation
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                    <!-- Feature 1 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            Individuelles Branding
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Gestalten Sie Ihren Newsroom mit Ihrem Logo, Unternehmensfarben und individuellen Inhalten.
                        </p>
                    </div>

                    <!-- Feature 2 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            Zentrale Verwaltung
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Alle Pressemitteilungen chronologisch sortiert und nach Kategorien filterbar an einem Ort.
                        </p>
                    </div>

                    <!-- Feature 3 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            SEO-Optimiert
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Ihr Newsroom wird von Suchmaschinen indexiert und verbessert Ihre Online-Sichtbarkeit.
                        </p>
                    </div>

                    <!-- Feature 4 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            Analytics & Insights
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Detaillierte Statistiken zu Besuchern, Views und Engagement Ihrer Pressemitteilungen.
                        </p>
                    </div>

                    <!-- Feature 5 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            Medien-Kontakte
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Hinterlegen Sie Pressekontakte und ermöglichen Sie direkte Anfragen von Journalisten.
                        </p>
                    </div>

                    <!-- Feature 6 -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
                        <div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
                            <svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
                            RSS-Feeds
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400">
                            Automatische RSS-Feeds ermöglichen einfaches Abonnieren Ihrer Neuigkeiten.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Pricing Tiers Section -->
        <section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
                        Newsroom Pakete
                    </h2>
                    <p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
                        Wählen Sie das passende Paket für Ihre Anforderungen
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    <!-- Basic Newsroom -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 hover:shadow-lg transition-all">
                        <h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
                            Basic Newsroom
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                            Inklusive im Free-Tarif
                        </p>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Standard-Design</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Alle Pressemitteilungen</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">RSS-Feed</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Professional Newsroom -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border-2 border-[var(--color-primary)] p-8 hover:shadow-lg transition-all relative">
                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] text-white text-sm font-medium rounded-full">
                            Beliebt
                        </div>
                        <h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
                            Professional Newsroom
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                            Professional-Tarif
                        </p>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Individuelles Branding</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Custom Domain</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Erweiterte Analytics</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Medien-Bibliothek</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Enterprise Newsroom -->
                    <div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 hover:shadow-lg transition-all">
                        <h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
                            Enterprise Newsroom
                        </h3>
                        <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                            Enterprise-Tarif
                        </p>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">White Label Lösung</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">API-Zugang</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Prioritäts-Support</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-sm text-zinc-600 dark:text-zinc-400">Individuelle Features</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="py-16 text-white" style="background: var(--gradient-hero);">
            <div class="container mx-auto px-4 text-center">
                <div class="flex justify-center mb-6">
                    <svg class="h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                </div>
                <h2 class="text-3xl font-bold mb-4">
                    Starten Sie Ihren eigenen Newsroom
                </h2>
                <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
                    Erstellen Sie in wenigen Minuten Ihren professionellen Unternehmens-Newsroom
                </p>
                <a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
                    Jetzt kostenlos starten
                </a>
            </div>
        </section>

        <!-- Footer Component -->
        <livewire:web.footer />
    </main>

@endsection

@push('styles')
    <style>
        /* Domain-spezifische Color-Variablen für Inline-Styles */
        :root {
            --color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
            --color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
        }

        /* Alpine.js Cloak */
        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush