@extends('layouts.app')

@section('content')
    <header style="padding: 160px 5% 100px; text-align: center; background: radial-gradient(circle at 50% 0%, #f3e8ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span class="label" style="color: #7c3aed;">Managed Hosting</span>
            <h1 style="font-size: clamp(3rem, 8vw, 5rem); font-weight: 900; margin-bottom: 20px;">Einfach nur online.</h1>
            <p class="lead" style="margin: 0 auto;">
                Du brauchst eine Webseite für dein Business oder Hobby? Ich übernehme das Hosting, die Technik und die Wartung komplett für dich.
            </p>
        </div>
    </header>

    <section style="padding: 80px 5%;">
        <div class="container">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;">
                
                <div style="background: white; padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0; text-align: center;">
                    <i class="fas fa-magic" style="font-size: 2.5rem; color: #7c3aed; margin-bottom: 20px;"></i>
                    <h4>Full-Service Setup</h4>
                    <p style="color: var(--text-gray); font-size: 0.95rem;">Ich richte deine Domain, E-Mails und SSL-Zertifikate ein. Du musst keinen Finger rühren.</p>
                </div>

                <div style="background: white; padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0; text-align: center;">
                    <i class="fas fa-hdd" style="font-size: 2.5rem; color: #7c3aed; margin-bottom: 20px;"></i>
                    <h4>Viel HDD Speicher</h4>
                    <p style="color: var(--text-gray); font-size: 0.95rem;">Große Mengen an Speicherplatz für deine Bilder und Dateien. Sicher gelagert in Sachsen.</p>
                </div>

                <div style="background: white; padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0; text-align: center;">
                    <i class="fas fa-shield-alt" style="font-size: 2.5rem; color: #7c3aed; margin-bottom: 20px;"></i>
                    <h4>Wartung & Backup</h4>
                    <p style="color: var(--text-gray); font-size: 0.95rem;">Regelmäßige Backups und Sicherheits-Updates deiner Seite nach individueller Vereinbarung.</p>
                </div>

            </div>

            <!-- ANFRAGE BOX -->
            <div style="margin-top: 80px; background: #0f172a; border-radius: 30px; padding: 60px; color: white; text-align: center; position: relative; overflow: hidden;">
                <h2 style="color: white; margin-bottom: 20px;">Interesse am Web-Hosting?</h2>
                <p style="opacity: 0.8; margin-bottom: 40px;">Schreib mir kurz, was du planst, und ich mache dir ein faires Angebot.</p>
                <a href="/kontakt?subject=Web-Hosting" class="btn-nav" style="background: var(--primary); color: white; padding: 15px 40px; border-radius: 50px; font-weight: 800;">JETZT ANFRAGEN</a>
                
                <!-- Subtle Branding -->
                <div style="position: absolute; bottom: 20px; right: 30px; opacity: 0.2; font-size: 0.7rem; letter-spacing: 2px;">BY KOTSCH.TECH</div>
            </div>
        </div>
    </section>
@endsection