@extends('layouts.app')
@section('title', 'Bienvenue sur TraçaChef')

@section('styles')
<style>
:root {
    --navy: #2D4A5F;
    --gold: #C8B47A;
    --gold-p: #f7f2e8;
}

.ob-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* ── Header ── */
.ob-header {
    text-align: center;
    padding: 32px 0 28px;
}
.ob-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px; font-weight: 600;
    color: var(--navy); margin: 0 0 8px;
}
.ob-header p {
    font-size: 15px; color: #64748b;
    margin: 0;
}

/* ── Progress ── */
.ob-progress {
    display: flex; align-items: center;
    justify-content: center; gap: 0;
    margin-bottom: 32px;
}
.ob-step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .2s;
    border: 2px solid #e2e8f0;
    background: #fff; color: #94a3b8;
    flex-shrink: 0;
}
.ob-step-dot.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.ob-step-dot.done   { background: #16a34a; color: #fff; border-color: #16a34a; }
.ob-step-line {
    height: 2px; width: 60px;
    background: #e2e8f0; flex-shrink: 0;
    transition: background .3s;
}
.ob-step-line.done { background: #16a34a; }

/* ── Cards ── */
.ob-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    display: none;
    animation: fadeIn .3s ease;
}
.ob-card.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ob-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 600;
    color: var(--navy); margin: 0 0 6px;
}
.ob-card-sub {
    font-size: 14px; color: #64748b;
    margin: 0 0 24px; line-height: 1.6;
}

/* ── Device tabs ── */
.ob-device-tabs {
    display: flex; gap: 8px; margin-bottom: 20px;
    flex-wrap: wrap;
}
.ob-tab {
    padding: 8px 16px; border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    font-size: 13px; font-weight: 500;
    cursor: pointer; background: #fff;
    color: #64748b; transition: all .15s;
}
.ob-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Instructions ── */
.ob-device-panel { display: none; }
.ob-device-panel.active { display: block; }

.ob-steps-list {
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.ob-steps-list li {
    display: flex; gap: 14px; align-items: flex-start;
}
.ob-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gold-p);
    border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--navy);
    flex-shrink: 0; margin-top: 1px;
}
.ob-step-text { font-size: 14px; color: #1e293b; line-height: 1.6; }
.ob-step-text strong { color: var(--navy); }

/* ── Phone mockup ── */
.ob-phone-wrap {
    display: flex; justify-content: center;
    margin: 20px 0;
}
.ob-phone {
    width: 160px;
    background: #0f172a;
    border-radius: 28px;
    padding: 12px 8px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.ob-phone-notch {
    width: 60px; height: 6px;
    background: #1e293b; border-radius: 3px;
    margin: 0 auto 8px;
}
.ob-phone-screen {
    background: #f8fafc;
    border-radius: 18px;
    overflow: hidden;
    min-height: 200px;
}

/* ── Share button animation ── */
.ob-share-anim {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px; gap: 8px;
}
.ob-share-icon {
    width: 44px; height: 44px;
    background: #3b82f6;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.ob-share-label { font-size: 11px; color: #64748b; text-align: center; }

/* ── Scanner animation ── */
.ob-scan-anim {
    padding: 16px;
    position: relative;
}
.ob-scan-viewfinder {
    width: 120px; height: 80px;
    border: 2px solid var(--gold);
    border-radius: 8px;
    margin: 0 auto 8px;
    position: relative;
    overflow: hidden;
}
.ob-scan-line {
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: #ef4444;
    animation: scan 2s linear infinite;
}
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
.ob-scan-corners::before,
.ob-scan-corners::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border-color: var(--navy);
    border-style: solid;
}
.ob-scan-corners::before { top: -1px; left: -1px; border-width: 3px 0 0 3px; }
.ob-scan-corners::after  { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; }

/* ── Temp animation ── */
.ob-temp-anim {
    padding: 12px;
}
.ob-temp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-radius: 8px;
    background: #f0fdf4; margin-bottom: 6px;
    animation: slideIn .5s ease both;
}
.ob-temp-row:nth-child(2) { animation-delay: .3s; background: #fff7ed; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.ob-temp-num {
    width: 24px; height: 24px;
    background: var(--navy); color: #fff;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.ob-temp-val { font-size: 12px; font-weight: 700; color: #16a34a; margin-left: auto; }

/* ── Alert box ── */
.ob-alert {
    background: var(--gold-p);
    border: 1.5px solid var(--gold);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px; color: var(--navy);
    margin-top: 20px;
    display: flex; gap: 10px;
}

/* ── Nav buttons ── */
.ob-nav {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: 24px;
    flex-wrap: wrap; gap: 10px;
}
.ob-btn {
    padding: 12px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: none;
    font-family: 'Jost', sans-serif;
    transition: opacity .15s;
}
.ob-btn:hover { opacity: .85; }
.ob-btn-prev { background: #f1f5f9; color: #334155; }
.ob-btn-next { background: var(--navy); color: var(--gold); }
.ob-btn-finish { background: #16a34a; color: #fff; }

.ob-skip {
    font-size: 12px; color: #94a3b8;
    text-decoration: none;
    display: block; text-align: center;
    margin-top: 16px;
}
.ob-skip:hover { color: var(--navy); }
</style>
@endsection

@section('content')
<div class="ob-wrap">

    <div class="ob-header">
        <h1>🎉 Bienvenue sur TraçaChef !</h1>
        <p>Suivez ces 3 étapes pour démarrer en moins de 5 minutes.</p>
    </div>

    {{-- Progress --}}
    <div class="ob-progress">
        <div class="ob-step-dot active" id="dot-1" onclick="goTo(1)">1</div>
        <div class="ob-step-line" id="line-1"></div>
        <div class="ob-step-dot" id="dot-2" onclick="goTo(2)">2</div>
        <div class="ob-step-line" id="line-2"></div>
        <div class="ob-step-dot" id="dot-3" onclick="goTo(3)">3</div>
    </div>

    {{-- ÉTAPE 1 : Installer l'app ── --}}
    <div class="ob-card active" id="step-1">
        <div class="ob-card-title">📱 Installez l'app sur votre appareil</div>
        <div class="ob-card-sub">TraçaChef fonctionne comme une vraie app sur votre téléphone ou tablette. Choisissez votre appareil :</div>

        <div class="ob-device-tabs">
            <button class="ob-tab active" onclick="showDevice('iphone')">🍎 iPhone / iPad</button>
            <button class="ob-tab" onclick="showDevice('android')">🤖 Android</button>
            <button class="ob-tab" onclick="showDevice('desktop')">💻 Ordinateur</button>
        </div>

        {{-- iPhone --}}
        <div class="ob-device-panel active" id="panel-iphone">
            <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;">
                <div class="ob-phone-wrap" style="margin:0;">
                    <div class="ob-phone">
                        <div class="ob-phone-notch"></div>
                        <div class="ob-phone-screen">
                            <div class="ob-share-anim">
                                <div style="font-size:10px;color:#64748b;text-align:center;margin-bottom:8px;">tracachef.chefdelinstant.com</div>
                                <div class="ob-share-icon">
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                                    </svg>
                                </div>
                                <div class="ob-share-label">Appuyez sur<br><strong style="color:#0f172a;">Partager</strong><br>en bas de Safari</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex:1;min-width:200px;">
                    <ul class="ob-steps-list">
                        <li>
                            <div class="ob-step-num">1</div>
                            <div class="ob-step-text">Ouvrez <strong>Safari</strong> et allez sur <strong>tracachef.chefdelinstant.com</strong></div>
                        </li>
                        <li>
                            <div class="ob-step-num">2</div>
                            <div class="ob-step-text">Appuyez sur l'icône <strong>Partager</strong> ↑ en bas de l'écran</div>
                        </li>
                        <li>
                            <div class="ob-step-num">3</div>
                            <div class="ob-step-text">Faites défiler et choisissez <strong>"Sur l'écran d'accueil"</strong></div>
                        </li>
                        <li>
                            <div class="ob-step-num">4</div>
                            <div class="ob-step-text">Appuyez sur <strong>"Ajouter"</strong> — l'icône TraçaChef apparaît sur votre écran !</div>
                        </li>
                    </ul>
                    <div class="ob-alert">
                        💡 <span>Sur iPad, le bouton Partager ↑ est en haut à droite de Safari.</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Android --}}
        <div class="ob-device-panel" id="panel-android">
            <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;">
                <div class="ob-phone-wrap" style="margin:0;">
                    <div class="ob-phone">
                        <div class="ob-phone-notch"></div>
                        <div class="ob-phone-screen">
                            <div class="ob-share-anim">
                                <div style="font-size:10px;color:#64748b;text-align:center;margin-bottom:8px;">tracachef.chefdelinstant.com</div>
                                <div class="ob-share-icon" style="background:#34a853;">
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                                    </svg>
                                </div>
                                <div class="ob-share-label">Menu <strong style="color:#0f172a;">⋮</strong><br>en haut à droite<br>de Chrome</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex:1;min-width:200px;">
                    <ul class="ob-steps-list">
                        <li>
                            <div class="ob-step-num">1</div>
                            <div class="ob-step-text">Ouvrez <strong>Chrome</strong> et allez sur <strong>tracachef.chefdelinstant.com</strong></div>
                        </li>
                        <li>
                            <div class="ob-step-num">2</div>
                            <div class="ob-step-text">Appuyez sur les <strong>3 points ⋮</strong> en haut à droite</div>
                        </li>
                        <li>
                            <div class="ob-step-num">3</div>
                            <div class="ob-step-text">Choisissez <strong>"Ajouter à l'écran d'accueil"</strong></div>
                        </li>
                        <li>
                            <div class="ob-step-num">4</div>
                            <div class="ob-step-text">Confirmez avec <strong>"Ajouter"</strong> — l'app est installée !</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Desktop --}}
        <div class="ob-device-panel" id="panel-desktop">
            <ul class="ob-steps-list">
                <li>
                    <div class="ob-step-num">1</div>
                    <div class="ob-step-text">Sur <strong>Chrome</strong>, cherchez l'icône d'installation ⊕ dans la barre d'adresse à droite</div>
                </li>
                <li>
                    <div class="ob-step-num">2</div>
                    <div class="ob-step-text">Cliquez dessus et choisissez <strong>"Installer TraçaChef"</strong></div>
                </li>
                <li>
                    <div class="ob-step-num">3</div>
                    <div class="ob-step-text">L'app s'ouvre dans sa propre fenêtre, sans la barre du navigateur</div>
                </li>
            </ul>
            <div class="ob-alert">
                💡 <span>Sur <strong>Edge</strong>, l'icône d'installation est aussi dans la barre d'adresse.</span>
            </div>
        </div>

        <div class="ob-nav">
            <span></span>
            <button class="ob-btn ob-btn-next" onclick="goTo(2)">Suivant →</button>
        </div>
        <a href="{{ route('onboarding.complete') }}" class="ob-skip">Passer cette étape</a>
    </div>

    {{-- ÉTAPE 2 : Premier relevé de température ── --}}
    <div class="ob-card" id="step-2">
        <div class="ob-card-title">🌡️ Configurez vos frigos</div>
        <div class="ob-card-sub">Ajoutez vos enceintes réfrigérées pour commencer vos relevés quotidiens HACCP.</div>

        <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;">
            <div class="ob-phone-wrap" style="margin:0;">
                <div class="ob-phone">
                    <div class="ob-phone-notch"></div>
                    <div class="ob-phone-screen">
                        <div class="ob-temp-anim">
                            <div style="font-size:9px;color:#64748b;margin-bottom:8px;font-weight:600;">TEMPÉRATURES — MATIN</div>
                            <div class="ob-temp-row">
                                <div class="ob-temp-num">1</div>
                                <div style="font-size:11px;color:#0f172a;font-weight:500;">Frigo viandes</div>
                                <div class="ob-temp-val">+3.2°</div>
                            </div>
                            <div class="ob-temp-row">
                                <div class="ob-temp-num" style="background:#d97706;">2</div>
                                <div style="font-size:11px;color:#0f172a;font-weight:500;">Congélateur</div>
                                <div class="ob-temp-val" style="color:#d97706;">-16°</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="flex:1;min-width:200px;">
                <ul class="ob-steps-list">
                    <li>
                        <div class="ob-step-num">1</div>
                        <div class="ob-step-text">Dans le menu, allez dans <strong>Hygiène → Températures</strong></div>
                    </li>
                    <li>
                        <div class="ob-step-num">2</div>
                        <div class="ob-step-text">Cliquez sur <strong>"Ajouter une enceinte"</strong> et nommez chaque frigo/congélateur</div>
                    </li>
                    <li>
                        <div class="ob-step-num">3</div>
                        <div class="ob-step-text">Collez un <strong>autocollant numéroté</strong> sur chaque appareil</div>
                    </li>
                    <li>
                        <div class="ob-step-num">4</div>
                        <div class="ob-step-text">Chaque matin, saisissez les températures en <strong>moins de 30 secondes</strong></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="ob-alert">
            💡 <span>La réglementation impose un relevé quotidien. TraçaChef archive tout automatiquement pendant 12 mois.</span>
        </div>

        <div class="ob-nav">
            <button class="ob-btn ob-btn-prev" onclick="goTo(1)">← Retour</button>
            <button class="ob-btn ob-btn-next" onclick="goTo(3)">Suivant →</button>
        </div>
        <a href="{{ route('onboarding.complete') }}" class="ob-skip">Passer cette étape</a>
    </div>

    {{-- ÉTAPE 3 : Scanner un produit ── --}}
    <div class="ob-card" id="step-3">
        <div class="ob-card-title">📷 Scannez votre premier produit</div>
        <div class="ob-card-sub">Photographiez une étiquette — TraçaChef extrait automatiquement toutes les informations.</div>

        <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;">
            <div class="ob-phone-wrap" style="margin:0;">
                <div class="ob-phone">
                    <div class="ob-phone-notch"></div>
                    <div class="ob-phone-screen">
                        <div class="ob-scan-anim">
                            <div style="font-size:9px;color:#64748b;margin-bottom:8px;font-weight:600;">SCANNER UNE ÉTIQUETTE</div>
                            <div class="ob-scan-viewfinder">
                                <div class="ob-scan-corners"></div>
                                <div class="ob-scan-line"></div>
                            </div>
                            <div style="font-size:10px;color:#64748b;text-align:center;margin-top:6px;">Pointez sur l'étiquette</div>
                            <div style="margin-top:8px;background:#f0fdf4;border-radius:6px;padding:6px;font-size:9px;color:#16a34a;text-align:center;font-weight:600;">
                                ✓ Saumon fumé — DLC 15/08
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="flex:1;min-width:200px;">
                <ul class="ob-steps-list">
                    <li>
                        <div class="ob-step-num">1</div>
                        <div class="ob-step-text">Dans le menu, appuyez sur <strong>Scanner</strong></div>
                    </li>
                    <li>
                        <div class="ob-step-num">2</div>
                        <div class="ob-step-text">Photographiez ou importez une photo de l'<strong>étiquette produit</strong></div>
                    </li>
                    <li>
                        <div class="ob-step-num">3</div>
                        <div class="ob-step-text">L'IA extrait le <strong>nom, lot, DLC et fournisseur</strong> automatiquement</div>
                    </li>
                    <li>
                        <div class="ob-step-num">4</div>
                        <div class="ob-step-text">Vérifiez et <strong>archivez</strong> — le produit est tracé !</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="ob-alert">
            💡 <span>Plus la photo est nette et bien cadrée sur l'étiquette, meilleure sera la reconnaissance.</span>
        </div>

        <div class="ob-nav">
            <button class="ob-btn ob-btn-prev" onclick="goTo(2)">← Retour</button>
            <a href="{{ route('onboarding.complete') }}" class="ob-btn ob-btn-finish">
                C'est parti ! →
            </a>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
let current = 1;

function goTo(step) {
    // Masquer tout
    document.querySelectorAll('.ob-card').forEach(c => c.classList.remove('active'));
    document.querySelectorAll('.ob-step-dot').forEach(d => {
        d.classList.remove('active');
        if (parseInt(d.id.split('-')[1]) < step) d.classList.add('done');
        else d.classList.remove('done');
    });
    document.querySelectorAll('.ob-step-line').forEach(l => {
        l.classList.remove('done');
    });

    // Activer
    document.getElementById('step-' + step).classList.add('active');
    document.getElementById('dot-' + step).classList.add('active');
    document.getElementById('dot-' + step).classList.remove('done');

    for (let i = 1; i < step; i++) {
        const line = document.getElementById('line-' + i);
        if (line) line.classList.add('done');
    }

    current = step;
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function showDevice(device) {
    document.querySelectorAll('.ob-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ob-device-panel').forEach(p => p.classList.remove('active'));
    event.target.classList.add('active');
    document.getElementById('panel-' + device).classList.add('active');
}

// Détecter automatiquement l'appareil
window.addEventListener('DOMContentLoaded', () => {
    const ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad/.test(ua)) showDeviceAuto('iphone');
    else if (/android/.test(ua)) showDeviceAuto('android');
});

function showDeviceAuto(device) {
    document.querySelectorAll('.ob-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ob-device-panel').forEach(p => p.classList.remove('active'));
    document.querySelector('.ob-tab[onclick="showDevice(\'' + device + '\')"]').classList.add('active');
    document.getElementById('panel-' + device).classList.add('active');
}
</script>
@endsection