@extends('layouts.app')

@section('title', 'Audit AGEFIPH - Diagnostic & plan d\'optimisation de votre contribution OETH')
@section('description', 'Auditez votre contribution AGEFIPH et identifiez vos leviers d\'économie : RQTH, secteur protégé, dépenses déductibles, recrutement. Diagnostic chiffré, score de maturité et plan d\'action en 3 minutes.')

@section('content')

@php $csrf = csrf_token(); @endphp

{{-- Header --}}
<section class="au-hero">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="au-eyebrow">
            <span class="au-eyebrow-line"></span>
            <span class="au-eyebrow-txt">Audit gratuit · 3 minutes · confidentiel</span>
        </div>
        <h1 class="au-h1">Audit d'optimisation AGEFIPH</h1>
        <p class="au-sub">Au-delà du simple calcul : identifiez <strong class="au-white">combien vous pouvez récupérer</strong> et par quels leviers. Diagnostic chiffré, score de maturité et plan d'action priorisé.</p>
    </div>
</section>

<section class="au-body">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        {{-- Barre de progression --}}
        <div id="stepper" class="au-stepper">
            @foreach(['Votre entreprise','Situation actuelle','Marges de manœuvre','Votre plan'] as $i => $label)
            <div class="step-pill au-flex1" data-step="{{ $i }}">
                <div class="step-bar"></div>
                <div class="step-lbl">{{ $label }}</div>
            </div>
            @endforeach
        </div>

        <div class="au-card">

            {{-- ÉTAPE 1 - Entreprise --}}
            <div class="wz-step" data-step="0">
                <h2 class="au-step-h2">Votre entreprise</h2>
                <p class="au-step-p">L'obligation d'emploi (OETH) concerne les entreprises de 20 salariés et plus.</p>

                <label class="fld-lbl">Effectif total de l'entreprise</label>
                <input type="number" id="f-effectif" min="0" value="120" class="fld" placeholder="ex. 120">
                <p class="fld-help">Effectif moyen annuel, tous établissements confondus.</p>
            </div>

            {{-- ÉTAPE 2 - Situation actuelle --}}
            <div class="wz-step" data-step="1" hidden>
                <h2 class="au-step-h2">Votre situation actuelle</h2>
                <p class="au-step-p">Ce que vous faites déjà - pour mesurer l'écart à combler.</p>

                <label class="fld-lbl">Travailleurs handicapés employés <span class="fld-tag">en ETP</span></label>
                <input type="number" id="f-th" min="0" step="0.1" value="2" class="fld" placeholder="ex. 2">
                <p class="fld-help">Équivalents temps plein de bénéficiaires (BOETH) dans vos effectifs.</p>

                <label class="fld-lbl au-mt15">Achats au secteur protégé (EA / ESAT / TIH) - N-1 <span class="fld-tag">€ HT</span></label>
                <input type="number" id="f-achats" min="0" step="500" value="0" class="fld" placeholder="0">
                <p class="fld-help">Prestations sous-traitées à des Entreprises Adaptées, ESAT ou travailleurs indépendants handicapés.</p>

                <label class="fld-lbl au-mt15">Dépenses déductibles engagées <span class="fld-tag">€</span></label>
                <input type="number" id="f-depenses" min="0" step="500" value="0" class="fld" placeholder="0">
                <p class="fld-help">Accessibilité, maintien dans l'emploi, sensibilisation, accompagnement…</p>

                <div class="au-chk-row">
                    <label class="chk"><input type="checkbox" id="f-referent"> <span>Un référent / une politique handicap est en place</span></label>
                    <label class="chk"><input type="checkbox" id="f-accord"> <span>Un accord agréé (PDE) est signé</span></label>
                </div>
            </div>

            {{-- ÉTAPE 3 - Marges de manœuvre --}}
            <div class="wz-step" data-step="2" hidden>
                <h2 class="au-step-h2">Vos marges de manœuvre</h2>
                <p class="au-step-p">Deux gisements souvent sous-estimés. Des valeurs indicatives sont pré-remplies - ajustez-les.</p>

                <label class="fld-lbl">Salariés potentiellement éligibles à une RQTH <span class="fld-tag">non déclarés</span></label>
                <input type="number" id="f-rqth" min="0" value="" class="fld" placeholder="estimation automatique">
                <p class="fld-help">Statistiquement, plusieurs de vos salariés pourraient être reconnus BOETH sans le savoir. Laissez vide pour une estimation prudente.</p>

                <label class="fld-lbl au-mt15">Recrutements de BOETH envisageables / an</label>
                <input type="number" id="f-recrut" min="0" value="1" class="fld" placeholder="ex. 1">
                <p class="fld-help">Postes ouvrables à des travailleurs handicapés (CDI, CDD, intérim, alternance).</p>
            </div>

            {{-- ÉTAPE 4 - Restitution --}}
            <div class="wz-step" data-step="3" hidden>
                <div id="audit-loading" class="au-loading">Calcul de votre diagnostic…</div>
                <div id="audit-result" hidden></div>
            </div>

            {{-- Navigation --}}
            <div id="wz-nav" class="au-wznav">
                <button id="btn-prev" type="button" class="btn-nav-ghost" hidden>← Précédent</button>
                <div class="au-flex1"></div>
                <button id="btn-next" type="button" class="btn-nav-primary">Continuer →</button>
            </div>
        </div>

        <p class="au-note">
            Estimation indicative fondée sur le barème AGEFIPH en vigueur. Elle ne se substitue pas à une étude personnalisée par nos experts.
        </p>
    </div>
</section>

{{-- Styles spécifiques audit --}}
<style>
    /* Wizard - champs & navigation */
    .fld-lbl { display:block;font-size:.82rem;font-weight:700;color:#374151;margin-bottom:.55rem }
    .fld-tag { font-size:.66rem;font-weight:700;color:#9BA8C0;background:#EEF3FB;padding:2px 7px;border-radius:6px;margin-left:.4rem;text-transform:uppercase;letter-spacing:.04em }
    .fld { width:100%;padding:.75rem .9rem;border:1.5px solid #D1D9E6;border-radius:11px;font-size:1rem;outline:none;box-sizing:border-box;transition:border-color .15s }
    .fld:focus { border-color:#1A4B9C }
    .fld-help { font-size:.72rem;color:#9BA8C0;margin:.5rem 0 0;line-height:1.5 }
    .chk { display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:#374151;background:#F8FBFF;border:1px solid #E0E8F5;border-radius:11px;padding:.7rem .9rem;cursor:pointer;flex:1 1 260px }
    .chk input { accent-color:#1A4B9C;width:17px;height:17px;flex-shrink:0 }
    .btn-nav-primary { background:#F5820A;color:#fff;border:none;font-size:.82rem;font-weight:700;letter-spacing:.03em;padding:.8rem 1.6rem;border-radius:10px;cursor:pointer;transition:background .2s }
    .btn-nav-primary:hover { background:#E06A00 }
    .btn-nav-ghost { background:transparent;color:#6B7280;border:none;font-size:.82rem;font-weight:700;padding:.8rem .4rem;cursor:pointer }
    .btn-nav-ghost:hover { color:#0D2B5E }
    .step-bar { height:5px;border-radius:99px;background:#E0E8F5;transition:background .3s }
    .step-lbl { font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#9BA8C0;margin-top:.5rem;text-align:center }
    .step-pill.done .step-bar, .step-pill.active .step-bar { background:#F5820A }
    .step-pill.done .step-lbl, .step-pill.active .step-lbl { color:#0D2B5E }
    .lev-effort { display:inline-flex;gap:3px;align-items:center }
    .lev-effort span { width:6px;height:6px;border-radius:99px;background:#E0E8F5;display:inline-block }
    .lev-effort span.on { background:#F5820A }

    /* ── Classes extraites des anciens attributs inline (markup + JS de restitution) ── */
    .au-hero { background:#0D2B5E;padding:clamp(3rem,6vw,4.5rem) 0 }
    .au-eyebrow { display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem }
    .au-eyebrow-line { width:26px;height:1.5px;background:#F5820A }
    .au-eyebrow-txt { font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0 }
    .au-h1 { font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 1rem;letter-spacing:-.022em }
    .au-sub { font-size:1.02rem;color:#9FB8DC;line-height:1.7;max-width:640px;margin:0 auto }
    .au-white { color:#fff }
    .au-body { padding:2.5rem 0 5rem;background:#F8FBFF }
    .au-stepper { display:flex;gap:.5rem;margin-bottom:2rem }
    .au-flex1 { flex:1 }
    .au-card { background:#fff;border-radius:22px;padding:clamp(1.5rem,4vw,2.5rem);border:1px solid #E0E8F5;box-shadow:0 4px 28px rgba(13,43,94,.06) }
    .au-step-h2 { font-size:1.25rem;font-weight:800;color:#091E42;margin:0 0 .3rem }
    .au-step-p { font-size:.85rem;color:#9BA8C0;margin:0 0 1.75rem }
    .au-mt15 { margin-top:1.5rem }
    .au-chk-row { display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem }
    .au-loading { text-align:center;padding:2rem 0;color:#9BA8C0;font-size:.9rem }
    .au-wznav { display:flex;justify-content:space-between;align-items:center;margin-top:2rem;gap:1rem }
    .au-note { text-align:center;font-size:.72rem;color:#9BA8C0;margin-top:1.25rem;max-width:560px;margin-left:auto;margin-right:auto }
    /* Restitution (injectée par le JS) */
    .au-na { text-align:center;padding:2rem 1rem }
    .au-na-emoji { font-size:2.5rem }
    .au-na-h3 { font-size:1.25rem;font-weight:900;color:#052B18;margin:.5rem 0 }
    .au-na-p { font-size:.9rem;color:#6B7280;max-width:420px;margin:0 auto }
    .au-band { background:linear-gradient(135deg,#0D2B5E,#1A4B9C);border-radius:18px;padding:1.75rem;color:#fff;position:relative;overflow:hidden;margin-bottom:1.25rem }
    .au-band-glow { position:absolute;inset:0;background:radial-gradient(ellipse at 85% 20%,rgba(0,168,107,.28),transparent 60%) }
    .au-rel { position:relative }
    .au-band-eyebrow { font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65) }
    .au-band-num { font-size:2.7rem;font-weight:900;line-height:1.1;margin:.2rem 0 }
    .au-band-sub { font-size:.82rem;color:#9FC3F0 }
    .au-grid2 { display:grid;grid-template-columns:1fr;gap:1.25rem }
    .au-panel { background:#fff;border:1px solid #E0E8F5;border-radius:16px;padding:1.4rem }
    .au-panel-eyebrow { font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9BA8C0;margin-bottom:.9rem }
    .au-eyebrow-sm { font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9BA8C0 }
    .au-score-row { display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem }
    .au-score-num { font-size:2.4rem;font-weight:900;line-height:1 }
    .au-score-den { font-size:.9rem;color:#9BA8C0;font-weight:700 }
    .au-score-track { height:8px;border-radius:99px;background:#EEF3FB;overflow:hidden;margin:.6rem 0 1rem }
    .au-score-fill { height:100%;border-radius:99px }
    .au-axis { display:flex;justify-content:space-between;font-size:.76rem;padding:.3rem 0;color:#6B7280 }
    .au-axis-v { font-weight:700 }
    .au-mt175 { margin-top:1.75rem }
    .au-sec-h3 { font-size:1.05rem;font-weight:900;color:#091E42;margin:0 0 .3rem }
    .au-sec-p { font-size:.8rem;color:#9BA8C0;margin:0 0 1.1rem }
    .au-empty { font-size:.85rem;color:#9BA8C0 }
    .au-lev { display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid #E0E8F5;border-radius:14px;margin-bottom:.75rem;background:#fff }
    .au-lev-label { font-size:.92rem;font-weight:800;color:#091E42;margin-bottom:.25rem }
    .au-lev-desc { font-size:.78rem;color:#6B7280;line-height:1.55 }
    .au-lev-effort-row { display:flex;align-items:center;gap:.75rem;margin-top:.6rem }
    .au-lev-cout { font-size:.66rem;color:#9BA8C0 }
    .au-tar { text-align:right }
    .au-lev-gain { font-size:1.05rem;font-weight:900;color:#00A86B;white-space:nowrap }
    .au-lev-gain-u { font-size:.6rem;color:#9BA8C0;font-weight:600 }
    .au-lev-strat { font-size:.7rem;font-weight:700;color:#1A4B9C;background:#EEF3FB;padding:3px 8px;border-radius:6px;white-space:nowrap }
    .au-traj-box { margin-top:1.5rem;background:#F8FBFF;border:1px solid #E0E8F5;border-radius:16px;padding:1.4rem }
    .au-traj-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem }
    .au-legend { font-size:.72rem;color:#6B7280 }
    .au-legend-dot { display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle }
    .au-legend-dot-grey { background:#E0E8F5 }
    .au-legend-dot-green { background:#00A86B }
    .au-traj-cols { display:flex;gap:1rem;align-items:flex-end }
    .au-traj-col { flex:1;text-align:center }
    .au-traj-bars { display:flex;gap:4px;align-items:flex-end;justify-content:center;height:96px }
    .au-traj-bar { width:22px;border-radius:5px 5px 0 0 }
    .au-traj-bar-grey { background:#E0E8F5 }
    .au-traj-bar-green { background:#00A86B }
    .au-traj-an { font-size:.68rem;color:#9BA8C0;font-weight:700;margin-top:.4rem }
    .au-cumul { text-align:center;margin-top:1rem;font-size:.85rem;color:#374151 }
    .au-cumul-v { color:#00A86B;font-size:1.05rem }
    .au-row { display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #F3F4F6 }
    .au-row-l { font-size:.8rem;color:#6B7280 }
    .au-row-l-strong { font-weight:800;color:#091E42 }
    .au-row-v { font-size:.85rem;font-weight:700 }
    .au-row-v-strong { font-size:.95rem;font-weight:900 }
    .au-lead { margin-top:1.75rem;background:#0D2B5E;border-radius:18px;padding:1.75rem;color:#fff }
    .au-lead-h3 { font-size:1.1rem;font-weight:900;margin:0 0 .35rem }
    .au-lead-p { font-size:.82rem;color:#9FB8DC;margin:0 0 1.25rem }
    .au-lead-ok { background:#00A86B;border-radius:12px;padding:1rem;font-size:.9rem;font-weight:600 }
    .au-lead-form { display:grid;grid-template-columns:1fr 1fr;gap:.75rem }
    .au-col-full { grid-column:1/-1 }
    .au-lead-btn { grid-column:1/-1;background:#F5820A;color:#fff;border:none;font-size:.85rem;font-weight:800;letter-spacing:.03em;padding:.85rem;border-radius:10px;cursor:pointer;margin-top:.25rem }
    .au-print-wrap { text-align:center;margin-top:1rem }
    .au-print-btn { background:transparent;border:1px solid #D1D9E6;color:#6B7280;font-size:.78rem;font-weight:700;padding:.6rem 1.2rem;border-radius:9px;cursor:pointer }
    .lf { padding:.7rem .85rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:9px;color:#fff;font-size:.85rem;outline:none }
    .lf::placeholder { color:#7FA7E0 }
    .lf:focus { border-color:#F5820A }
    @media print {
        #main-nav, #stepper, #wz-nav, footer, #hp-assistant { display:none !important }
        section { padding:0 !important;background:#fff !important }
    }
</style>

<script>
(function () {
    const CSRF = @json($csrf);
    const COMPUTE_URL = @json(route('audit.compute'));
    const LEAD_URL    = @json(route('audit.lead'));
    const fmt = n => new Intl.NumberFormat('fr-FR', { style:'currency', currency:'EUR', maximumFractionDigits:0 }).format(n || 0);
    const el = id => document.getElementById(id);
    const val = id => el(id) ? el(id).value : '';
    const num = id => parseFloat(val(id)) || 0;

    let step = 0;
    const LAST = 3;
    const steps  = [...document.querySelectorAll('.wz-step')];
    const pills  = [...document.querySelectorAll('.step-pill')];
    let lastResult = null;

    function collect() {
        return {
            effectif:          Math.round(num('f-effectif')),
            th_direct:         num('f-th'),
            achats_st:         num('f-achats'),
            depenses:          num('f-depenses'),
            rqth_potentielles: val('f-rqth') === '' ? null : Math.round(num('f-rqth')),
            recrutements:      Math.round(num('f-recrut')),
            a_referent:        el('f-referent').checked ? 1 : 0,
            a_accord:          el('f-accord').checked ? 1 : 0,
        };
    }

    function show(n) {
        step = n;
        steps.forEach(s => s.hidden = (+s.dataset.step !== n));
        pills.forEach((p, i) => {
            p.classList.toggle('active', i === n);
            p.classList.toggle('done', i < n);
        });
        el('btn-prev').hidden = (n === 0);
        el('btn-next').textContent = (n === LAST - 1) ? 'Voir mon plan →' : (n === LAST ? '' : 'Continuer →');
        el('btn-next').style.display = (n === LAST) ? 'none' : '';
        el('btn-prev').style.display = (n === LAST) ? 'none' : '';
        window.scrollTo({ top: document.querySelector('#stepper').offsetTop - 90, behavior:'smooth' });
        if (n === LAST) compute();
    }

    el('btn-next').addEventListener('click', () => {
        if (step === 0 && Math.round(num('f-effectif')) <= 0) { el('f-effectif').focus(); return; }
        if (step < LAST) show(step + 1);
    });
    el('btn-prev').addEventListener('click', () => { if (step > 0) show(step - 1); });

    async function compute() {
        el('audit-loading').hidden = false;
        el('audit-result').hidden = true;
        try {
            const res = await fetch(COMPUTE_URL, {
                method:'POST',
                headers:{ 'Content-Type':'application/json', 'X-CSRF-TOKEN':CSRF, 'Accept':'application/json' },
                body: JSON.stringify(collect()),
            });
            if (!res.ok) throw new Error('compute failed');
            lastResult = await res.json();
            renderResult(lastResult);
        } catch (e) {
            el('audit-loading').textContent = "Une erreur est survenue. Réessayez ou contactez-nous.";
        }
    }

    function renderResult(r) {
        el('audit-loading').hidden = true;
        const box = el('audit-result');
        box.hidden = false;

        if (!r.assujetti) {
            box.innerHTML = `
                <div class="au-na">
                    <div class="au-na-emoji">✅</div>
                    <h3 class="au-na-h3">Vous n'êtes pas assujetti</h3>
                    <p class="au-na-p">L'obligation d'emploi concerne les entreprises de ${r.seuil} salariés et plus. En dessous, aucune contribution AGEFIPH n'est due.</p>
                </div>${leadForm()}`;
            wireLead();
            return;
        }

        const scorePct = r.score.total;
        const scoreColor = scorePct >= 60 ? '#00A86B' : (scorePct >= 35 ? '#F5820A' : '#C8102E');

        const leviers = r.leviers.map(l => {
            const dots = [1,2,3].map(i => `<span class="${i <= l.effort ? 'on' : ''}"></span>`).join('');
            const gain = l.gain > 0
                ? `<div class="au-lev-gain">${fmt(l.gain)}<span class="au-lev-gain-u"> /an</span></div>`
                : `<div class="au-lev-strat">Stratégique</div>`;
            return `
            <div class="au-lev">
                <div class="au-flex1">
                    <div class="au-lev-label">${l.label}</div>
                    <div class="au-lev-desc">${l.description}</div>
                    <div class="au-lev-effort-row">
                        <div class="lev-effort">${dots}</div>
                        <span class="au-lev-cout">Effort · Coût : ${l.cout}</span>
                    </div>
                </div>
                <div class="au-tar">${gain}</div>
            </div>`;
        }).join('');

        const traj = r.trajectoire.filter(t => t.an !== 'cumul').map(t => {
            const h = Math.max(6, Math.round(t.sans_action / (r.nette || 1) * 90));
            const h2 = Math.max(4, Math.round(t.avec_plan / (r.nette || 1) * 90));
            return `
            <div class="au-traj-col">
                <div class="au-traj-bars">
                    <div title="Sans action" class="au-traj-bar au-traj-bar-grey" style="height:${h}px"></div>
                    <div title="Avec plan" class="au-traj-bar au-traj-bar-green" style="height:${h2}px"></div>
                </div>
                <div class="au-traj-an">An ${t.an}</div>
            </div>`;
        }).join('');
        const cumul = r.trajectoire.find(t => t.an === 'cumul');

        box.innerHTML = `
            <div class="au-band">
                <div class="au-band-glow"></div>
                <div class="au-rel">
                    <div class="au-band-eyebrow">Économie annuelle identifiée</div>
                    <div class="au-band-num">${fmt(r.economie)}</div>
                    <div class="au-band-sub">soit une contribution ramenée de ${fmt(r.nette)} à <strong class="au-white">${fmt(r.nette_optimisee)}</strong> / an</div>
                </div>
            </div>

            <div class="au-grid2 lg:grid-cols-2">
                <div class="au-panel">
                    <div class="au-panel-eyebrow">Diagnostic actuel</div>
                    ${row('Taux d\'emploi TH', (r.taux_emploi*100).toFixed(2)+' %', r.taux_emploi >= r.taux_cible ? '#00A86B' : '#C8102E')}
                    ${row('Obligation légale (6%)', r.obligation+' unités')}
                    ${row('Unités manquantes', (Math.round(r.manquants*10)/10)+' unités')}
                    ${row('Tarif unitaire', fmt(r.tarif_unitaire))}
                    ${row('Contribution brute', fmt(r.brute))}
                    ${row('Déduction sous-traitance', '− '+fmt(r.deduction_st), '#00A86B')}
                    ${row('Déduction dépenses', '− '+fmt(r.deduction_dep), '#00A86B')}
                    ${row('Contribution nette', fmt(r.nette), '#091E42', true)}
                </div>
                <div class="au-panel">
                    <div class="au-panel-eyebrow">Maturité handicap</div>
                    <div class="au-score-row">
                        <div class="au-score-num" style="color:${scoreColor}">${scorePct}</div>
                        <div class="au-score-den">/100 · ${r.score.niveau}</div>
                    </div>
                    <div class="au-score-track">
                        <div class="au-score-fill" style="width:${scorePct}%;background:${scoreColor}"></div>
                    </div>
                    ${Object.entries(r.score.axes).map(([k,v]) => `
                        <div class="au-axis">
                            <span>${k}</span><span class="au-axis-v" style="color:${v>0?'#00A86B':'#C8B9C0'}">${v>0?'✓':'-'} ${v} pts</span>
                        </div>`).join('')}
                </div>
            </div>

            <div class="au-mt175">
                <h3 class="au-sec-h3">Votre plan d'optimisation</h3>
                <p class="au-sec-p">Leviers classés du plus simple au plus structurant.</p>
                ${leviers || '<p class="au-empty">Votre situation est déjà optimisée - bravo !</p>'}
            </div>

            <div class="au-traj-box">
                <div class="au-traj-head">
                    <div class="au-eyebrow-sm">Trajectoire sur 3 ans</div>
                    <div class="au-legend"><span class="au-legend-dot au-legend-dot-grey"></span> Sans action &nbsp; <span class="au-legend-dot au-legend-dot-green"></span> Avec plan</div>
                </div>
                <div class="au-traj-cols">${traj}</div>
                <div class="au-cumul">Économie cumulée sur 3 ans : <strong class="au-cumul-v">${fmt(cumul.economie)}</strong></div>
            </div>

            ${leadForm()}
            <div class="au-print-wrap">
                <button type="button" onclick="window.print()" class="au-print-btn">🖨️ Imprimer / enregistrer en PDF</button>
            </div>`;

        wireLead();
    }

    function row(label, value, color = '#374151', strong = false) {
        return `<div class="au-row">
            <span class="au-row-l${strong?' au-row-l-strong':''}">${label}</span>
            <span class="au-row-v${strong?' au-row-v-strong':''}" style="color:${color}">${value}</span>
        </div>`;
    }

    function leadForm() {
        return `
        <div id="lead-block" class="au-lead">
            <h3 class="au-lead-h3">Recevez votre rapport détaillé</h3>
            <p class="au-lead-p">Un expert HAndipartner affine votre plan et vous recontacte sous 48h. Sans engagement.</p>
            <div id="lead-success" hidden class="au-lead-ok"></div>
            <form id="lead-form" class="au-lead-form">
                <input required name="prenom" placeholder="Prénom" class="lf">
                <input required name="nom" placeholder="Nom" class="lf">
                <input required type="email" name="email" placeholder="Email professionnel" class="lf au-col-full">
                <input name="phone" placeholder="Téléphone (optionnel)" class="lf">
                <input name="societe" placeholder="Société" class="lf">
                <button type="submit" class="au-lead-btn">Recevoir mon rapport d'audit</button>
            </form>
        </div>`;
    }

    function wireLead() {
        const form = el('lead-form');
        if (!form) return;
        form.addEventListener('submit', async e => {
            e.preventDefault();
            const btn = form.querySelector('button[type=submit]');
            btn.disabled = true; btn.textContent = 'Envoi…';
            const payload = Object.assign({}, collect(), Object.fromEntries(new FormData(form)));
            try {
                const res = await fetch(LEAD_URL, {
                    method:'POST',
                    headers:{ 'Content-Type':'application/json', 'X-CSRF-TOKEN':CSRF, 'Accept':'application/json' },
                    body: JSON.stringify(payload),
                });
                const data = await res.json();
                if (data.ok) {
                    form.hidden = true;
                    const s = el('lead-success');
                    s.hidden = false; s.textContent = data.message;
                } else { throw new Error(); }
            } catch (err) {
                btn.disabled = false; btn.textContent = 'Recevoir mon rapport d\'audit';
                alert("Une erreur est survenue. Vérifiez vos informations et réessayez.");
            }
        });
    }

    show(0);
})();
</script>

@endsection