@extends('layouts.app')
@section('title', 'Maintenance')
@section('page-title', 'Maintenance')

@push('styles')
<style>
    /* ===== Hero card ===== */
    .hero {
        background: linear-gradient(135deg, var(--navy) 0%, #1a2e5a 60%, #0f1f3d 100%);
        border-radius: 16px;
        padding: 48px 40px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 40px;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 260px; height: 260px;
        background: rgba(255,255,255,0.04);
        border-radius: 50%;
    }
    .hero::after {
        content: '';
        position: absolute;
        bottom: -80px; left: 30%;
        width: 320px; height: 320px;
        background: rgba(255,200,0,0.05);
        border-radius: 50%;
    }
    .hero-icon {
        flex-shrink: 0;
        width: 90px; height: 90px;
        background: rgba(255,255,255,0.1);
        border-radius: 22px;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid rgba(255,255,255,0.15);
        backdrop-filter: blur(4px);
    }
    .hero-text h1 {
        font-size: 26px; font-weight: 900; margin: 0 0 10px;
        letter-spacing: -0.5px;
    }
    .hero-text p {
        font-size: 14px; font-weight: 500;
        color: rgba(255,255,255,0.75);
        line-height: 1.7; margin: 0;
        max-width: 560px;
    }

    /* ===== Cards grille ===== */
    .cards-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 20px;
    }
    .info-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 22px 24px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .info-icon {
        flex-shrink: 0;
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
    }
    .info-icon.blue  { background: #EEF2FF; }
    .info-icon.green { background: #E6FFFA; }
    .info-icon.orange{ background: #FFF3E0; }
    .info-icon.purple{ background: #F3E8FF; }
    .info-card h3 { font-size: 13px; font-weight: 800; color: var(--navy); margin: 0 0 5px; }
    .info-card p  { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0; line-height: 1.6; }

    /* ===== Download card ===== */
    .dl-card {
        background: #fff;
        border-radius: 16px;
        border: 2px solid var(--yellow);
        padding: 32px 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        flex-wrap: wrap;
        box-shadow: 0 4px 24px rgba(255,200,0,0.12);
    }
    .dl-left { display: flex; align-items: center; gap: 20px; }
    .dl-logo {
        width: 72px; height: 72px;
        background: linear-gradient(135deg, #0E8EE9, #004FA4);
        border-radius: 18px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 20px rgba(14,142,233,0.35);
        flex-shrink: 0;
    }
    .dl-info h2 { font-size: 18px; font-weight: 900; color: var(--navy); margin: 0 0 4px; }
    .dl-info p  { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0 0 10px; }
    .dl-badges  { display: flex; gap: 8px; flex-wrap: wrap; }
    .badge-dl   { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
    .badge-free    { background: #E6FFFA; color: #276749; }
    .badge-windows { background: #EEF2FF; color: var(--navy); }
    .badge-mac     { background: #F3F4F6; color: #374151; }

    .btn-download {
        background: linear-gradient(135deg, #0E8EE9, #004FA4);
        color: #fff;
        border: none;
        border-radius: 14px;
        padding: 14px 30px;
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        transition: transform 0.15s, box-shadow 0.15s;
        box-shadow: 0 6px 20px rgba(14,142,233,0.4);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .btn-download:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(14,142,233,0.5);
        color: #fff;
    }
    .btn-download:active { transform: translateY(0); }

    /* ===== Footer note ===== */
    .note-box {
        background: #F8F9FF;
        border-radius: 10px;
        border: 1px solid var(--border);
        padding: 14px 18px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
    }
    .note-box p { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0; line-height: 1.7; }

    @media(max-width:800px) {
        .hero { flex-direction: column; padding: 32px 24px; }
        .cards-grid { grid-template-columns: 1fr; }
        .dl-card { flex-direction: column; }
    }
</style>
@endpush

@section('content')

{{-- Hero --}}
<div class="hero">
    <div class="hero-icon">
        <svg viewBox="0 0 24 24" style="width:44px;height:44px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;">
            <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
        </svg>
    </div>
    <div class="hero-text">
        <h1>Assistance &amp; Maintenance à distance</h1>
        <p>
            Notre équipe technique peut prendre le contrôle de votre poste à distance pour vous assister,
            diagnostiquer un problème ou effectuer une mise à jour de l'application.<br>
            Pour cela, téléchargez et lancez <strong>TeamViewer</strong>, puis communiquez votre <strong>identifiant</strong>
            et votre <strong>mot de passe temporaire</strong> à notre technicien.
        </p>
    </div>
</div>

{{-- Infos --}}
<div class="cards-grid">
    <div class="info-card">
        <div class="info-icon blue">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#3B5FBF;fill:none;stroke-width:2;stroke-linecap:round;">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
        </div>
        <div>
            <h3>Connexion sécurisée</h3>
            <p>TeamViewer chiffre toutes les sessions avec AES 256 bits. Vous gardez le contrôle à tout moment et pouvez couper la connexion en un clic.</p>
        </div>
    </div>
    <div class="info-card">
        <div class="info-icon green">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#276749;fill:none;stroke-width:2;stroke-linecap:round;">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12 6 12 12 16 14"/>
            </svg>
        </div>
        <div>
            <h3>Assistance rapide</h3>
            <p>Une session de prise en main dure en moyenne 10 à 20 minutes. Pas besoin d'installation définitive — TeamViewer peut être lancé sans installation.</p>
        </div>
    </div>
    <div class="info-card">
        <div class="info-icon orange">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#C05621;fill:none;stroke-width:2;stroke-linecap:round;">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="8" x2="12" y2="12"/>
                <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
        </div>
        <div>
            <h3>Comment ça marche ?</h3>
            <p>1. Téléchargez TeamViewer ci-dessous<br>2. Lancez-le (sans installation)<br>3. Communiquez l'<strong>ID</strong> et le <strong>mot de passe</strong> à votre technicien</p>
        </div>
    </div>
    <div class="info-card">
        <div class="info-icon purple">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:#7C3AED;fill:none;stroke-width:2;stroke-linecap:round;">
                <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.01 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z"/>
            </svg>
        </div>
        <div>
            <h3>Contacter le support</h3>
            <p>Avant de lancer une session, appelez notre support au <strong>05 XX XX XX XX</strong> ou écrivez à <strong>support@taxilog.fr</strong> pour convenir d'un rendez-vous.</p>
        </div>
    </div>
</div>

{{-- Téléchargement TeamViewer --}}
<div class="dl-card">
    <div class="dl-left">
        {{-- Logo TeamViewer --}}
        <div class="dl-logo">
            <svg viewBox="0 0 48 48" style="width:42px;height:42px;">
                <circle cx="24" cy="24" r="22" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
                <text x="24" y="32" text-anchor="middle" font-family="Arial Black,sans-serif" font-size="18" font-weight="900" fill="#fff">TV</text>
            </svg>
        </div>
        <div class="dl-info">
            <h2>TeamViewer QuickSupport</h2>
            <p>Version légère — aucune installation requise, fonctionne immédiatement</p>
            <div class="dl-badges">
                <span class="badge-dl badge-free">Gratuit</span>
                <span class="badge-dl badge-windows">
                    <svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#3B5FBF;vertical-align:middle;margin-right:3px;"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.549H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.949"/></svg>
                    Windows
                </span>
                <span class="badge-dl badge-mac">
                    <svg viewBox="0 0 24 24" style="width:10px;height:10px;fill:#374151;vertical-align:middle;margin-right:3px;"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"/></svg>
                    macOS
                </span>
            </div>
        </div>
    </div>

    <a href="https://download.teamviewer.com/download/TeamViewerQS.exe" target="_blank" class="btn-download">
        <svg viewBox="0 0 24 24" style="width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        Télécharger TeamViewer
    </a>
</div>

{{-- Note bas --}}
<div class="note-box">
    <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#94A3B8;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;margin-top:1px;">
        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
    </svg>
    <p>
        <strong>Votre vie privée est protégée.</strong> Aucun technicien ne peut se connecter à votre poste sans votre accord.
        Le mot de passe affiché dans TeamViewer est <strong>unique et temporaire</strong> — il change à chaque lancement.
        Vous pouvez mettre fin à la session à tout moment en fermant la fenêtre TeamViewer.
    </p>
</div>

@endsection