@extends('layouts.app')

@section('content')
    <header style="padding: 160px 8% 80px; text-align: center; background: #ffffff;">
        <div class="container reveal active">
            <span class="label" style="color: #007aff;">Hilfe für Apple User</span>
            <h1 style="font-size: 4rem; font-weight: 800; letter-spacing: -2px;">DE-Companion <span style="color: #007aff;">Support.</span></h1>
            <p class="lead" style="max-width: 600px; margin: 0 auto;">Wir sind hier, um dir bei Fragen zu deiner iOS oder Mac App zu helfen.</p>
        </div>
    </header>

    <section style="padding: 80px 8%;">
        <div class="container">
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;">
                <!-- Card 1 -->
                <div style="background: #f5f5f7; padding: 40px; border-radius: 24px; text-align: center;">
                    <i class="fas fa-cloud" style="font-size: 2rem; color: #007aff; margin-bottom: 20px;"></i>
                    <h4>iCloud Sync Probleme</h4>
                    <p style="font-size: 0.9rem; color: #64748b;">Erfahre, wie du den Sync zwischen Macbook und iPhone neu startest.</p>
                </div>
                <!-- Card 2 -->
                <div style="background: #f5f5f7; padding: 40px; border-radius: 24px; text-align: center;">
                    <i class="fas fa-key" style="font-size: 2rem; color: #007aff; margin-bottom: 20px;"></i>
                    <h4>Lizenzen</h4>
                    <p style="font-size: 0.9rem; color: #64748b;">Informationen zu In-App Käufen und Familienfreigabe.</p>
                </div>
                <!-- Card 3 -->
                <div style="background: #f5f5f7; padding: 40px; border-radius: 24px; text-align: center;">
                    <i class="fas fa-envelope" style="font-size: 2rem; color: #007aff; margin-bottom: 20px;"></i>
                    <h4>Support-Ticket</h4>
                    <p style="font-size: 0.9rem; color: #64748b;">Schreibe mir direkt eine Mail bei technischen Fehlern.</p>
                </div>
            </div>

            <div style="margin-top: 80px; text-align: center;">
                <a href="/kontakt?subject=Apple-Support" class="btn-nav" style="background: #000; color: white; padding: 20px 60px; border-radius: 50px; font-weight: 800;">TICKET ÖFFNEN</a>
            </div>
        </div>
    </section>
@endsection