@extends('layouts.app')

@section('content')

    <!-- =============================================
         1. HERO SECTION (Freundlich & Einladend)
         ============================================= -->
    <header style="padding: 160px 8% 100px; text-align: center; background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span class="label" style="color: var(--primary);">Persönlicher IT-Service</span>
            <h1 style="font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 25px; letter-spacing: -2px;">
                Technik-Stress?<br><span style="color: var(--primary);">Ich helfe Ihnen weiter.</span>
            </h1>
            <p class="lead" style="margin: 0 auto 50px; max-width: 800px;">
                Egal ob der Computer streikt, das Handy keine E-Mails mehr empfängt oder der Drucker mal wieder nicht will: Ich biete Ihnen schnelle und verständliche Hilfe direkt bei Ihnen vor Ort oder per Fernwartung.
            </p>
            <div style="display: flex; justify-content: center; gap: 20px;">
                <a href="#leistungen" class="btn-nav" style="background: var(--text-dark); color: white; padding: 18px 40px; border-radius: 50px; text-decoration: none; font-weight: 800;">WAS ICH TUE</a>
                <a href="#kontakt-anfrage" class="btn-nav" style="background: var(--primary); color: white; padding: 18px 40px; border-radius: 50px; text-decoration: none; font-weight: 800; box-shadow: 0 10px 20px rgba(37,99,235,0.2);">TERMIN VEREINBAREN</a>
            </div>
        </div>
    </header>

    <!-- =============================================
         2. LEISTUNGEN IM DETAIL
         ============================================= -->
    <section id="leistungen" style="padding: 100px 8%;">
        <div class="container">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px;">
                
                <!-- Computer -->
                <div class="service-detail-card reveal">
                    <i class="fas fa-desktop"></i>
                    <h3>Computer & Laptop</h3>
                    <p>Ich mache Ihren PC wieder schnell. Entfernung von Viren, Installation von Programmen oder Windows-Updates – ich kümmere mich darum.</p>
                    <ul class="check-list">
                        <li><i class="fas fa-check"></i> System-Reinigung</li>
                        <li><i class="fas fa-check"></i> Daten-Sicherung</li>
                        <li><i class="fas fa-check"></i> Fehlerdiagnose</li>
                    </ul>
                </div>

                <!-- Handy -->
                <div class="service-detail-card reveal">
                    <i class="fas fa-mobile-screen"></i>
                    <h3>Handy & Tablet</h3>
                    <p>WhatsApp funktioniert nicht? Die Fotos sind weg? Ich zeige Ihnen, wie Sie Ihr Gerät sicher nutzen und helfe bei der Einrichtung.</p>
                    <ul class="check-list">
                        <li><i class="fas fa-check"></i> WhatsApp Einrichtung</li>
                        <li><i class="fas fa-check"></i> Cloud-Speicher Setup</li>
                        <li><i class="fas fa-check"></i> Android & iPhone Hilfe</li>
                    </ul>
                </div>

                <!-- Internet -->
                <div class="service-detail-card reveal">
                    <i class="fas fa-wifi"></i>
                    <h3>WLAN & Internet</h3>
                    <p>Langsames Internet oder kein Empfang im Schlafzimmer? Ich optimiere Ihr Netzwerk und schließe neue Router für Sie an.</p>
                    <ul class="check-list">
                        <li><i class="fas fa-check"></i> WLAN-Optimierung</li>
                        <li><i class="fas fa-check"></i> Router-Installation</li>
                        <li><i class="fas fa-check"></i> Smart-TV Anbindung</li>
                    </ul>
                </div>

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

    <!-- =============================================
         3. DER ABLAUF (Ganz wichtig für die Zielgruppe)
         ============================================= -->
    <section class="bg-gray" style="padding: 120px 8%;">
        <div class="container reveal">
            <div style="text-align: center; margin-bottom: 80px;">
                <h2>So einfach funktioniert es</h2>
                <p class="lead" style="margin: 0 auto;">In drei Schritten ist Ihr Problem gelöst.</p>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; text-align: center;">
                <div class="step-card">
                    <div class="step-num">1</div>
                    <h4>Anrufen oder Schreiben</h4>
                    <p>Schildern Sie mir kurz Ihr Problem per Telefon oder über das Formular.</p>
                </div>
                <div class="step-card">
                    <div class="step-num">2</div>
                    <h4>Termin vereinbaren</h4>
                    <p>Wir finden einen passenden Zeitpunkt. Ich komme zu Ihnen nach Hause.</p>
                </div>
                <div class="step-card">
                    <div class="step-num">3</div>
                    <h4>Problem gelöst</h4>
                    <p>Ich behebe den Fehler und erkläre Ihnen auf Wunsch, wie es dazu kam.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- =============================================
         4. PREISE & FAIRNESS
         ============================================= -->
    <section style="padding: 120px 8%;">
        <div class="container reveal">
            <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center;">
                <div>
                    <span class="label">Transparenz</span>
                    <h2>Faire Preise für<br>Nachbarschaftshilfe.</h2>
                    <p class="lead">Als dualer Student biete ich Ihnen meine Hilfe zu fairen Konditionen an. Keine versteckten Kosten, keine teuren Anfahrtspauschalen in der Region Lichtenstein/Sachsen.</p>
                </div>
                <div style="background: white; border: 1px solid #e2e8f0; padding: 50px; border-radius: 30px; box-shadow: var(--shadow-soft);">
                    <h3 style="margin-bottom: 20px;">Mein Versprechen</h3>
                    <ul style="list-style: none; padding: 0; margin-bottom: 30px;">
                        <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: #10b981; margin-right: 10px;"></i> <strong>Keine Lösung, keine Kosten:</strong> Wenn ich nicht helfen kann, zahlen Sie nichts.</li>
                        <li style="margin-bottom: 15px;"><i class="fas fa-check" style="color: #10b981; margin-right: 10px;"></i> <strong>Geduld inklusive:</strong> Ich erkläre alles so oft, wie nötig.</li>
                    </ul>
                    <p style="font-size: 0.9rem; color: var(--text-gray);">Preis pro angefangene 30 Min: <strong>Nach Absprache / Fair</strong></p>
                </div>
            </div>
        </div>
    </section>

    <!-- =============================================
         5. KONTAKT (Anfrage-Box)
         ============================================= -->
    <section id="kontakt-anfrage" class="bg-gray" style="padding-bottom: 140px;">
        <div class="container reveal">
            <div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 40px; padding: 80px 40px; text-align: center; box-shadow: var(--shadow-soft);">
                <h2 style="font-size: 3rem;">Soll ich vorbeikommen?</h2>
                <p class="lead" style="margin: 20px auto 50px;">Einfach das Formular ausfüllen. Ich rufe Sie zurück.</p>
                
                <!-- DER GARANTIERT SICHTBARE BUTTON -->
                <a href="/kontakt?subject=Hilfe-Anfrage" 
                   style="background-color: #0f172a !important; color: white !important; padding: 22px 60px !important; border-radius: 50px !important; text-decoration: none !important; font-weight: 800 !important; font-size: 1.2rem !important; display: inline-block !important; box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important; border: none !important;">
                    HILFE JETZT ANFORDERN <i class="fas fa-phone-flip" style="margin-left: 10px; color: var(--primary);"></i>
                </a>

                <div style="margin-top: 30px; color: var(--text-gray); font-size: 0.9rem;">
                    Oder direkt anrufen: <strong>[DEINE NUMMER HIER]</strong>
                </div>
            </div>
        </div>
    </section>

    <style>
        .service-detail-card {
            background: white; padding: 50px 40px; border-radius: 30px; border: 1px solid #e2e8f0; transition: 0.3s;
        }
        .service-detail-card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
        .service-detail-card i { font-size: 3rem; color: var(--primary); margin-bottom: 30px; display: block; }
        .service-detail-card h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }

        .check-list { list-style: none; padding: 0; margin-top: 30px; }
        .check-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #334155; margin-bottom: 12px; font-size: 0.9rem; }
        .check-list i { color: #10b981; }

        .step-card { position: relative; padding: 40px; }
        .step-num { 
            width: 60px; height: 60px; background: var(--primary); color: white; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; 
            margin: 0 auto 20px; box-shadow: 0 10px 20px rgba(37,99,235,0.3);
        }
    </style>

@endsection