@extends('layouts.app')

@section('content')

    <!-- =============================================
         1. HERO: INFRASTRUKTUR
         ============================================= -->
    <header style="padding: 160px 5% 100px; text-align: center; background: radial-gradient(circle at 50% 0%, #f3f4f6 0%, #ffffff 70%); position: relative; overflow: hidden;">
        <!-- Hintergrund Server-Grid -->
        <div style="position: absolute; inset: 0; background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 50px 50px; opacity: 0.5; z-index: 0;"></div>

        <div class="container reveal active" style="position: relative; z-index: 1;">
            <span style="background: #1e293b; color: white; padding: 8px 20px; border-radius: 50px; font-weight: 800; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 25px;">
                German Cloud Location
            </span>
            <h1 style="font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -2px; margin-bottom: 30px; color: var(--text-dark);">
                Dein Projekt.<br>
                <span style="color: var(--primary);">Unser Server.</span>
            </h1>
            <p style="font-size: 1.3rem; color: var(--text-gray); max-width: 800px; margin: 0 auto 50px; line-height: 1.6;">
                Egal ob du volle Root-Rechte brauchst oder einfach nur willst, dass deine Webseite läuft. Ich biete dir die passende Heimat für deine Daten.
            </p>
        </div>
    </header>

    <!-- =============================================
         2. DIE ENTSCHEIDUNG (2 WEGE)
         ============================================= -->
    <section style="padding: 80px 5%;">
        <div class="container">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;">
                
                <!-- OPTION A: MANAGED WEB HOSTING (Das Full-Service Ding) -->
                <div class="host-card reveal" style="border-top: 5px solid var(--accent);">
                    <div class="host-icon" style="color: var(--accent); background: #fdf4ff;"><i class="fas fa-gem"></i></div>
                    <h3>Managed Web Hosting</h3>
                    <p class="host-desc">Du hast keine Lust auf Technik? Ich übernehme das komplette Hosting deiner Webseite. Updates, Sicherheit, Backups – alles inklusive.</p>
                    
                    <ul class="host-features">
                        <li><i class="fas fa-check"></i> <strong>Rundum-Sorglos:</strong> Ich richte alles ein</li>
                        <li><i class="fas fa-check"></i> <strong>Inklusive:</strong> SSL-Zertifikat & Domain</li>
                        <li><i class="fas fa-check"></i> <strong>Wartung:</strong> Tägliche Backups & Updates</li>
                        <li><i class="fas fa-check"></i> <strong>Speed:</strong> Caching & NVMe Performance</li>
                    </ul>

                    <a href="/kontakt?subject=Managed-Hosting-Anfrage" class="btn-host-action" style="background: var(--accent); color: white;">Voll-Service anfragen</a>
                </div>

                <!-- OPTION B: vSERVER (Für Bastler) -->
                <div class="host-card reveal" style="border-top: 5px solid var(--text-dark); background: #f8fafc;">
                    <div class="host-icon" style="color: var(--text-dark); background: #e2e8f0;"><i class="fas fa-terminal"></i></div>
                    <h3>Root vServer (VPS)</h3>
                    <p class="host-desc">Für Entwickler und Admins. Du bekommst eine leere Linux-VM (Debian/Ubuntu) und hast die volle Kontrolle.</p>
                    
                    <ul class="host-features">
                        <li><i class="fas fa-check"></i> <strong>Root-Zugriff:</strong> Volle Kontrolle via SSH</li>
                        <li><i class="fas fa-check"></i> <strong>Ressourcen:</strong> Garantierte CPU & RAM</li>
                        <li><i class="fas fa-check"></i> <strong>Netzwerk:</strong> 1 GBit/s Anbindung</li>
                        <li><i class="fas fa-check"></i> <strong>Freiheit:</strong> Docker, Node.js, Python, PHP...</li>
                    </ul>

                    <a href="/kontakt?subject=vServer-Anfrage" class="btn-host-action" style="background: var(--text-dark); color: white;">VM konfigurieren</a>
                </div>

            </div>
        </div>
    </section>

    <!-- =============================================
         3. TECH SPECS (Hardware Details)
         ============================================= -->
    <section class="bg-gray" style="padding: 120px 5%;">
        <div class="container reveal">
            <div style="text-align: center; margin-bottom: 60px;">
                <h2>Die Hardware dahinter.</h2>
                <p class="lead" style="margin: 0 auto;">Kein billiges Reselling. Echte Performance.</p>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
                <div class="spec-card">
                    <i class="fas fa-microchip"></i>
                    <h4>AMD EPYC™ Power</h4>
                    <p>Moderne CPUs für schnelle Ladezeiten und PHP-Verarbeitung.</p>
                </div>
                <div class="spec-card">
                    <i class="fas fa-hdd"></i>
                    <h4>NVMe Datacenter SSDs</h4>
                    <p>Lese- und Schreibgeschwindigkeiten, die normale SSDs alt aussehen lassen.</p>
                </div>
                <div class="spec-card">
                    <i class="fas fa-shield-alt"></i>
                    <h4>DDoS Protection</h4>
                    <p>Permanenter Schutz vor Angriffen bis 1 TBit/s.</p>
                </div>
                <div class="spec-card">
                    <i class="fas fa-network-wired"></i>
                    <h4>Frankfurt am Main</h4>
                    <p>Serverstandort Deutschland für besten Ping und Datenschutz.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- =============================================
         4. INDIVIDUELLE ANFRAGE
         ============================================= -->
    <section style="padding: 100px 5%;">
        <div class="container reveal">
            <div style="background: var(--primary); border-radius: 30px; padding: 80px 40px; text-align: center; color: white; position: relative; overflow: hidden;">
                <div style="position: relative; z-index: 2;">
                    <h2 style="font-size: 3rem; color: white; margin-bottom: 20px;">Nicht sicher was du brauchst?</h2>
                    <p style="font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9;">
                        Erzähl mir von deinem Projekt. Ich sage dir, ob ein kleiner Webspace reicht oder ob du einen Power-Server brauchst.
                    </p>
                    <a href="/kontakt?subject=Beratung" class="btn-nav" style="background: white; color: var(--primary); padding: 18px 40px; font-size: 1.1rem;">Kostenlos beraten lassen</a>
                </div>
                <i class="fas fa-server" style="position: absolute; left: -50px; bottom: -50px; font-size: 20rem; opacity: 0.1; transform: rotate(15deg);"></i>
            </div>
        </div>
    </section>

    <!-- STYLES -->
    <style>
        .host-card {
            background: white; padding: 50px 40px; border-radius: 20px;
            box-shadow: 0 20px 40px -5px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;
            display: flex; flex-direction: column; transition: 0.3s;
        }
        .host-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -10px rgba(0,0,0,0.1); }
        
        .host-icon { width: 70px; height: 70px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 25px; }
        .host-card h3 { font-size: 2rem; margin-bottom: 15px; font-weight: 800; }
        .host-desc { font-size: 1.05rem; color: var(--text-gray); margin-bottom: 30px; line-height: 1.6; }
        
        .host-features { list-style: none; margin-bottom: 40px; flex-grow: 1; }
        .host-features li { margin-bottom: 15px; display: flex; gap: 15px; align-items: center; font-size: 1rem; color: var(--text-dark); }
        .host-features i { color: var(--success); }

        .btn-host-action { display: block; width: 100%; text-align: center; padding: 15px; border-radius: 10px; font-weight: 800; text-decoration: none; transition: 0.3s; }
        .btn-host-action:hover { opacity: 0.9; transform: scale(1.02); }

        .spec-card { text-align: center; padding: 30px; background: white; border-radius: 15px; }
        .spec-card i { font-size: 2.5rem; color: var(--text-dark); margin-bottom: 20px; }
        .spec-card h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
        .spec-card p { font-size: 0.9rem; color: var(--text-gray); }
    </style>

@endsection