@extends('layouts.app')

@section('content')

    @php
        $preselected = request()->query('subject', 'Allgemein');
        $topics = [
            'Webdesign' => 'Webdesign & Web-Apps',
            'Hosting' => 'vServer & Cloud Hosting',
            'Windows' => 'Windows Software Tools',
            'Android' => 'Android App Entwicklung',
            'Hardware' => 'Hardware & Electric Tools',
            'Allgemein' => 'Allgemeine Anfrage'
        ];
        $topicAliases = [
            'Webdesign' => ['webdesign', 'css', 'studio', 'template'],
            'Hosting' => ['hosting', 'server', 'vserver', 'vm', 'beratung', 'bot', 'gameserver', 'web hosting'],
            'Windows' => ['windows', 'lizenz', 'desktop', 'software'],
            'Android' => ['android', 'app'],
            'Hardware' => ['hardware', 'tool', 'esp32', 'meter', 'werkzeug'],
            'Allgemein' => ['allgemein'],
        ];
        $selectedKey = 'Allgemein';

        $normalizedSubject = strtolower(str_replace(['_', '-'], ' ', $preselected));

        foreach($topicAliases as $key => $aliases) {
            foreach($aliases as $alias) {
                if(str_contains($normalizedSubject, $alias)) {
                    $selectedKey = $key;
                    break 2;
                }
            }
        }
    @endphp

    <!-- HERO HEADER -->
    <header style="padding: 160px 8% 80px; text-align: center; background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span class="badge-status">
                <span class="pulse-dot"></span> Verfügbar für neue Projekte
            </span>
            <h1 style="font-size: clamp(3rem, 8vw, 5rem); font-weight: 900; line-height: 1.1; letter-spacing: -2px; margin: 25px 0; color: #0f172a;">
                Lass uns etwas <span style="color: #2563eb;">Großes</span> bauen.
            </h1>
            <p style="font-size: 1.2rem; color: #64748b; max-width: 650px; margin: 0 auto; line-height: 1.6;">
                Egal ob technisches Problem oder eine neue Produktidee – ich unterstütze dich bei der Umsetzung.
            </p>
        </div>
    </header>

    <!-- MAIN CONTACT SECTION -->
    <section style="padding: 40px 8% 120px;">
        <div class="container">
            <div class="contact-grid-system reveal">
                
                <!-- LINKER BEREICH: FORMULAR -->
                <div class="glass-card form-container">
                    <h3 class="section-title">Anfrage senden</h3>
                    
                    <form action="https://formspree.io/f/mgolownw" method="POST" class="premium-form">
                        <div class="input-row">
                            <div class="input-stack">
                                <label>Dein Name</label>
                                <input type="text" name="name" placeholder="Max Mustermann" required>
                            </div>
                            <div class="input-stack">
                                <label>E-Mail Adresse</label>
                                <input type="email" name="email" placeholder="max@beispiel.de" required>
                            </div>
                        </div>

                        <div class="input-stack">
                            <label>Themenbereich</label>
                            <div class="select-wrap">
                                <select name="subject" required>
                                    @foreach($topics as $key => $label)
                                        <option value="{{ $label }}" {{ $selectedKey === $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>

                        <div class="input-stack">
                            <label>Deine Nachricht</label>
                            <textarea name="message" rows="6" placeholder="Beschreibe kurz dein Vorhaben..." required></textarea>
                        </div>

                        <!-- Formspree Hidden Fields -->
                        <input type="hidden" name="_language" value="de">

                        <button type="submit" class="submit-btn-black">
                            NACHRICHT JETZT ABSENDEN <i class="fas fa-paper-plane"></i>
                        </button>
                        
                        <div class="security-note">
                            <i class="fas fa-shield-check"></i> Ende-zu-Ende verschlüsselt & DSGVO konform
                        </div>
                    </form>
                </div>

                <!-- RECHTER BEREICH: DAS NEUE SERVICE PANEL -->
                <div class="service-panel">
                    
                    <!-- Kontakt Box -->
                    <div class="panel-card">
                        <h4>Direkt-Kontakt</h4>
                        <a href="mailto:kotsch.tech@icloud.com" class="panel-item">
                            <div class="panel-icon"><i class="fas fa-envelope-open-text"></i></div>
                            <div class="panel-text">
                                <small>E-Mail</small>
                                <strong>kotsch.tech@icloud.com</strong>
                            </div>
                        </a>
                        <a href="#" class="panel-item">
                            <div class="panel-icon" style="background: #eef2ff; color: #5865f2;"><i class="fab fa-discord"></i></div>
                            <div class="panel-text">
                                <small>Discord Community</small>
                                <strong>kotsch_dev</strong>
                            </div>
                        </a>
                    </div>

                    <!-- Expertise & Versprechen Box -->
                    <div class="panel-card secondary">
                        <h4>Warum kotsch.tech?</h4>
                        <div class="mini-feature">
                            <i class="fas fa-bolt"></i>
                            <div>
                                <strong>Reaktionszeit</strong>
                                <p>Antwort garantiert innerhalb von 24h.</p>
                            </div>
                        </div>
                        <div class="mini-feature">
                            <i class="fas fa-code"></i>
                            <div>
                                <strong>Custom Code</strong>
                                <p>Keine Standard-Templates. 100% Individuell.</p>
                            </div>
                        </div>
                        <img src="{{ asset('img/logo-mark.png') }}" alt="Kotsch.tech Logo" style="width: 48px; height: auto; margin-left: auto; margin-top: 12px; opacity: 0.2; display: block;">
                    </div>

                </div>

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

    <style>
        /* GRID SYSTEM */
        .contact-grid-system { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }

        /* BADGE PULSE */
        .badge-status { 
            display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; 
            background: #ffffff; border: 1px solid #e2e8f0; border-radius: 50px; 
            font-size: 0.8rem; font-weight: 700; color: #64748b; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        }
        .pulse-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; position: relative; }
        .pulse-dot::after { 
            content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10b981; 
            animation: pulse-ring 1.5s infinite; 
        }
        @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }

        /* FORM SIDE */
        .glass-card { background: white; padding: 50px; border-radius: 35px; border: 1px solid #f1f5f9; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.05); }
        .section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 35px; color: #0f172a; }
        .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .input-stack { margin-bottom: 25px; }
        .input-stack label { display: block; font-size: 0.75rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        
        input, select, textarea { 
            width: 100%; padding: 16px 20px; border-radius: 15px; border: 2px solid #f1f5f9; 
            background: #f8fafc; font-size: 1rem; color: #0f172a; font-weight: 500; transition: 0.3s; outline: none;
        }
        input:focus, select:focus, textarea:focus { border-color: #2563eb; background: white; box-shadow: 0 0 0 5px rgba(37,99,235,0.05); }

        .select-wrap { position: relative; }
        .select-wrap select { appearance: none; cursor: pointer; }
        .select-wrap i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; }

        /* SUBMIT BUTTON (DEINE BRECHEISEN-METHODE) */
        .submit-btn-black {
            width: 100% !important; background-color: #0f172a !important; color: #ffffff !important; 
            padding: 20px !important; border: none !important; border-radius: 15px !important; 
            font-weight: 800 !important; font-size: 1.1rem !important; cursor: pointer !important; 
            transition: 0.3s !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
            display: flex !important; align-items: center; justify-content: center; gap: 12px;
        }
        .submit-btn-black:hover { background-color: #2563eb !important; transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(37,99,235,0.2) !important; }

        .security-note { text-align: center; margin-top: 20px; font-size: 0.75rem; color: #94a3b8; font-weight: 500; }
        .security-note i { color: #10b981; margin-right: 5px; }

        /* SERVICE PANEL (RECHTE SEITE) */
        .service-panel { display: flex; flex-direction: column; gap: 25px; }
        .panel-card { background: white; padding: 40px; border-radius: 35px; border: 1px solid #f1f5f9; box-shadow: 0 15px 35px rgba(0,0,0,0.03); }
        .panel-card h4 { font-size: 1rem; font-weight: 800; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; color: #0f172a; }
        
        .panel-item { display: flex; align-items: center; gap: 20px; text-decoration: none; margin-bottom: 20px; padding: 15px; border-radius: 15px; transition: 0.3s; border: 1px solid transparent; }
        .panel-item:hover { background: #f8fafc; border-color: #e2e8f0; transform: translateX(5px); }
        
        .panel-icon { width: 45px; height: 45px; background: #eff6ff; color: #2563eb; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .panel-text small { display: block; font-size: 0.7rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
        .panel-text strong { color: #0f172a; font-size: 1rem; }

        /* Expertise Box */
        .panel-card.secondary { background: #f8fafc; border: none; }
        .mini-feature { display: flex; gap: 15px; margin-bottom: 25px; }
        .mini-feature i { color: #2563eb; font-size: 1rem; margin-top: 4px; }
        .mini-feature strong { display: block; font-size: 0.9rem; color: #0f172a; }
        .mini-feature p { font-size: 0.85rem; color: #64748b; line-height: 1.4; }
        
        .watermark-text { text-align: right; font-size: 0.6rem; font-weight: 900; color: #cbd5e1; letter-spacing: 2px; margin-top: 10px; }

        @media (max-width: 1100px) {
            .contact-grid-system { grid-template-columns: 1fr; }
            .input-row { grid-template-columns: 1fr; }
            .service-panel { flex-direction: column; }
        }
    </style>

@endsection