@extends('layouts.app')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
*{font-family:'Inter',sans-serif;box-sizing:border-box;margin:0;padding:0}
header.bg-white{display:none}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ping{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.4);opacity:0}}

.pub-card{background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 16px rgba(0,0,0,.05);animation:fadeInUp .5s ease both}

.soc-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:50px;border:none;cursor:pointer;font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.soc-pill:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}

.prod-card{background:#fff;border-radius:18px;border:1.5px solid #f1f5f9;overflow:hidden;transition:all .25s;cursor:pointer;display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(8,120,200,.15);border-color:#bfdbfe}
.prod-card.is-fav{border-color:#fcd34d;box-shadow:0 0 0 2px rgba(245,158,11,.15)}

.info-row-new{display:flex;align-items:center;gap:14px;padding:14px 20px;transition:background .15s;border-bottom:1px solid #f8fafc;text-decoration:none;color:inherit}
.info-row-new:last-child{border-bottom:none}
.info-row-new:hover{background:#f8fafc}

.toast-pub{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 20px;border-radius:14px;font-size:13px;font-weight:700;color:#fff;transform:translateY(80px);opacity:0;transition:all .35s;pointer-events:none}
.toast-pub.show{transform:translateY(0);opacity:1}
.toast-pub.ok{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 8px 24px rgba(16,185,129,.35)}
.toast-pub.err{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 8px 24px rgba(239,68,68,.35)}

@media(max-width:640px){
    /* Info + QR grid → 1 colonne */
    .info-qr-grid{grid-template-columns:1fr !important}
    /* Hero */
    #pub-hero-cta{flex-direction:column!important;align-items:stretch!important}
    #pub-hero-cta a,#pub-hero-cta button{justify-content:center!important;width:100%!important;box-sizing:border-box!important}
    /* Stats hero */
    #pub-hero-stats{gap:8px!important}
    /* Social pills → wrap smaller */
    .soc-pill{padding:8px 14px!important;font-size:12px!important}
    /* Products grid */
    #pub-products-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:12px!important}
    /* Content padding */
    #pub-content{padding:20px 14px 48px!important}
    /* Product card image height */
    #pub-products-grid .prod-card [style*="height:200px"]{height:160px!important}
}
@media(max-width:400px){
    #pub-products-grid{grid-template-columns:1fr 1fr!important}
}
</style>

<div id="toast-pub" class="toast-pub" style="display:none"></div>

<div style="min-height:100vh;background:#f0f4f8">

{{-- ══════════════════ HERO ══════════════════ --}}
<div style="background:linear-gradient(135deg,#020f1e 0%,#041d38 45%,#063660 100%);position:relative;overflow:hidden">
    <div style="position:absolute;top:-100px;right:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.1),transparent 70%);pointer-events:none"></div>
    <div style="position:absolute;bottom:-60px;left:-40px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(4,93,152,.15),transparent 70%);pointer-events:none"></div>
    <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none"></div>

    <div style="max-width:860px;margin:0 auto;padding:56px 24px 68px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px">

        {{-- Avatar --}}
        <div style="width:96px;height:96px;border-radius:24px;overflow:hidden;border:3px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:fadeInUp .35s ease">
            @if($user->logo)
                <img src="{{ asset('storage/' . $user->logo) }}" alt="{{ $user->name }}" style="width:100%;height:100%;object-fit:cover">
            @else
                <svg width="42" height="42" fill="none" stroke="rgba(255,255,255,.7)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V19a4 4 0 00-4-4H9a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z"/></svg>
            @endif
        </div>

        {{-- Name & status --}}
        <div style="animation:fadeInUp .45s ease">
            <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px">
                <span style="font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.15em">Carte de visite</span>
                <span style="display:flex;align-items:center;gap:5px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:50px;padding:2px 10px">
                    <span style="width:6px;height:6px;border-radius:50%;background:#10b981;animation:ping 2s infinite;display:inline-block"></span>
                    <span style="font-size:10px;font-weight:700;color:#6ee7b7">En ligne</span>
                </span>
            </div>
            <h1 style="font-size:clamp(2rem,6vw,3rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.03em;margin-bottom:10px">{{ $user->name }}</h1>
            @if($user->address)
            <p style="font-size:14px;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;gap:5px">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                {{ $user->address }}
            </p>
            @endif
        </div>

        {{-- Stats --}}
        @php $activeSocials = collect(['facebook','twitter','instagram','whatsapp','snapchat','tiktok','website','custom_link'])->filter(fn($s) => $user->$s)->count(); @endphp
        <div id="pub-hero-stats" style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeInUp .5s ease">
            @if($products->count() > 0)
            <div style="background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px 22px;text-align:center;backdrop-filter:blur(10px)">
                <div style="font-size:22px;font-weight:900;color:#fff;line-height:1">{{ $products->count() }}</div>
                <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;margin-top:3px">{{ $user->products_section_title ?? 'Produits' }}</div>
            </div>
            @endif
            @if($activeSocials > 0)
       
            @endif
            @if($user->phone)
            <a href="tel:{{ $user->phone }}" style="background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:14px;padding:12px 22px;text-align:center;backdrop-filter:blur(10px);text-decoration:none;display:block">
                <div style="font-size:15px;font-weight:800;color:#6ee7b7;line-height:1">{{ $user->phone }}</div>
                <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;margin-top:3px">Appeler</div>
            </a>
            @endif
        </div>

        {{-- CTA buttons --}}
        <div id="pub-hero-cta" style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeInUp .55s ease;width:100%;max-width:480px">
            @if($user->whatsapp)
            <a href="https://wa.me/{{ preg_replace('/\D/', '', $user->whatsapp) }}" target="_blank"
               style="display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 4px 20px rgba(37,211,102,.3);transition:transform .2s"
               onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                WhatsApp
            </a>
            @endif
            @if($user->phone)
            <button onclick="downloadVcard()"
               style="display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;font-weight:700;font-size:14px;color:#0f2a45;background:#fff;border:none;box-shadow:0 4px 20px rgba(0,0,0,.2);cursor:pointer;transition:transform .2s"
               onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                Enregistrer contact
            </button>
            @endif
            <button onclick="if(navigator.share){navigator.share({title:'{{ $user->name }}',url:window.location.href})}else{navigator.clipboard.writeText(window.location.href).then(function(){showToast('Lien copié !')})}"
               style="display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;font-weight:700;font-size:14px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);cursor:pointer;transition:transform .2s"
               onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
                Partager
            </button>
        </div>

    </div>

    {{-- Wave --}}
    <div style="line-height:0">
        <svg viewBox="0 0 1440 50" fill="none" preserveAspectRatio="none" style="width:100%;display:block">
            <path d="M0,25 C480,55 960,0 1440,25 L1440,50 L0,50 Z" fill="#f0f4f8"/>
        </svg>
    </div>
</div>

{{-- ══════════════════ CONTENT ══════════════════ --}}
<div id="pub-content" style="max-width:860px;margin:0 auto;padding:28px 20px 60px;display:flex;flex-direction:column;gap:20px">

    {{-- Social links --}}
    @if($user->tiktok || $user->instagram || $user->whatsapp || $user->facebook || $user->snapchat || $user->twitter || $user->website || $user->custom_link)
    <div class="pub-card" style="padding:22px 24px;animation-delay:.05s">
        <div style="font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Réseaux & Liens</div>
        <div style="display:flex;flex-wrap:wrap;gap:10px">
            @if($user->facebook)
            <a href="{{ $user->facebook }}" target="_blank" class="soc-pill" style="background:#eff6ff;color:#1d4ed8">
                <svg width="15" height="15" fill="#1877F2" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                Facebook
            </a>
            @endif
            @if($user->instagram)
            <a href="{{ $user->instagram }}" target="_blank" class="soc-pill" style="background:#fdf2f8;color:#9d174d">
                <svg width="15" height="15" viewBox="0 0 24 24"><defs><linearGradient id="igp" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#f09433"/><stop offset="50%" stop-color="#dc2743"/><stop offset="100%" stop-color="#bc1888"/></linearGradient></defs><path fill="url(#igp)" d="M12.017 0C8.396 0 7.996.014 6.79.067 5.584.12 4.775.302 4.084.605c-.713.309-1.318.716-1.92 1.318C1.562 2.525 1.155 3.13.846 3.843c-.303.691-.485 1.5-.538 2.706C.014 7.996 0 8.396 0 12.017s.014 4.021.067 5.227c.053 1.206.235 2.015.538 2.706.309.713.716 1.318 1.318 1.92.602.602 1.207 1.009 1.92 1.318.691.303 1.5.485 2.706.538C7.996 23.986 8.396 24 12.017 24s4.021-.014 5.227-.067c1.206-.053 2.015-.235 2.706-.538.713-.309 1.318-.716 1.92-1.318.602-.602 1.009-1.207 1.318-1.92.303-.691.485-1.5.538-2.706.053-1.206.067-1.606.067-5.227s-.014-4.021-.067-5.227c-.053-1.206-.235-2.015-.538-2.706-.309-.713-.716-1.318-1.318-1.92C20.475 1.562 19.87 1.155 19.157.846c-.691-.303-1.5-.485-2.706-.538C16.038.014 15.638 0 12.017 0zm0 2.25c3.539 0 3.959.014 5.357.078 1.306.06 2.026.275 2.5.458.495.188.858.413 1.233.788.375.375.6.738.788 1.233.183.474.398 1.194.458 2.5.064 1.398.078 1.818.078 5.357s-.014 3.959-.078 5.357c-.06 1.306-.275 2.026-.458 2.5-.188.495-.413.858-.788 1.233-.375.375-.738.6-1.233.788-.474.183-1.194.398-2.5.458-1.398.064-1.818.078-5.357.078s-3.959-.014-5.357-.078c-1.306-.06-2.026-.275-2.5-.458-.495-.188-.858-.413-1.233-.788-.375-.375-.6-.738-.788-1.233-.183-.474-.398-1.194-.458-2.5-.064-1.398-.078-1.818-.078-5.357s.014-3.959.078-5.357c.06-1.306.275-2.026.458-2.5.188-.495.413-.858.788-1.233.375-.375.738-.6 1.233-.788.474-.183 1.194-.398 2.5-.458 1.398-.064 1.818-.078 5.357-.078zm0 7.5a4.267 4.267 0 100 8.534 4.267 4.267 0 000-8.534zm0 7.034a2.767 2.767 0 110-5.534 2.767 2.767 0 010 5.534zm5.338-8.034a1 1 0 11-2 0 1 1 0 012 0z"/></svg>
                Instagram
            </a>
            @endif
            @if(isset($user->whatsapp) && $user->whatsapp)
            <a href="https://wa.me/{{ preg_replace('/\D/', '', $user->whatsapp) }}" target="_blank" class="soc-pill" style="background:#f0fdf4;color:#166534">
                <svg width="15" height="15" fill="#25D366" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                WhatsApp
            </a>
            @endif
            @if($user->tiktok)
            <a href="{{ $user->tiktok }}" target="_blank" class="soc-pill" style="background:#f8fafc;color:#0f2a45">
                <svg width="15" height="15" fill="#000" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                TikTok
            </a>
            @endif
            @if(isset($user->snapchat) && $user->snapchat)
            <a href="{{ $user->snapchat }}" target="_blank" class="soc-pill" style="background:#fefce8;color:#713f12">
                <svg width="15" height="15" fill="#FFCC00" viewBox="0 0 24 24"><path d="M12.065.001C10.102.001 6.31.516 4.375 4.2c-.98 1.87-.747 4.978-.686 6.032-.3.157-.626.24-.955.243-.437 0-.872-.115-1.27-.332l-.062-.03c-.104-.04-.213-.06-.322-.058-.24 0-.57.1-.622.437-.066.425.303.784.688 1.02.04.026.078.055.116.083.403.278 1.018.626 1.08 1.067.035.256-.102.553-.434.913-1.006 1.102-1.404 2.085-1.254 2.98.17 1.017 1.08 1.626 1.954 2.003 1.226.525 2.4.738 3.172 1.06.198.082.38.215.53.382.34.388.437.862.538 1.347.078.374.16.762.34 1.052.2.32.515.498.86.498.185 0 .375-.045.565-.135.48-.228 1.045-.392 1.66-.48.38-.057.73-.084 1.04-.084.456 0 .875.058 1.248.17.55.16 1.07.455 1.62.757.475.265.966.54 1.48.54.418 0 .768-.177.985-.5.2-.295.28-.673.36-1.056.1-.49.196-.965.536-1.354.148-.167.33-.298.525-.38.77-.322 1.95-.534 3.174-1.06.873-.376 1.783-.985 1.954-2.002.15-.895-.248-1.876-1.254-2.98-.333-.36-.47-.657-.434-.913.06-.44.676-.79 1.08-1.066.037-.027.075-.056.115-.082.386-.236.754-.596.69-1.02-.054-.338-.384-.44-.625-.44-.11 0-.218.02-.32.06l-.062.03c-.398.215-.834.33-1.27.33-.33 0-.654-.084-.953-.242.06-1.053.293-4.163-.687-6.033C17.693.516 13.9.001 12.065.001z"/></svg>
                Snapchat
            </a>
            @endif
            @if($user->twitter)
            <a href="{{ $user->twitter }}" target="_blank" class="soc-pill" style="background:#eff6ff;color:#1d4ed8">
                <svg width="15" height="15" fill="#1DA1F2" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                Twitter
            </a>
            @endif
            @if($user->website)
            <a href="{{ $user->website }}" target="_blank" class="soc-pill" style="background:#f0f9ff;color:#0369a1">
                <svg width="15" height="15" fill="none" stroke="#0369a1" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9"/></svg>
                Site web
            </a>
            @endif
            @if($user->custom_link)
            <a href="{{ $user->custom_link }}" target="_blank" class="soc-pill" style="background:#f5f3ff;color:#5b21b6">
                <svg width="15" height="15" fill="none" stroke="#7c3aed" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                {{ $user->custom_link_name ?: 'Lien' }}
            </a>
            @endif
        </div>
    </div>
    @endif

    {{-- Contact info + QR --}}
    <div class="info-qr-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px">

        {{-- Informations --}}
        <div class="pub-card" style="animation-delay:.1s;overflow:hidden">
            <div style="padding:18px 20px 14px;border-bottom:1px solid #f8fafc">
                <div style="font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em">Informations</div>
            </div>
            <div>
                @if($user->email)
                <a href="mailto:{{ $user->email }}" class="info-row-new">
                    <div style="width:36px;height:36px;border-radius:10px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="16" height="16" fill="none" stroke="#1d4ed8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    </div>
                    <div style="min-width:0">
                        <div style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">Email</div>
                        <div style="font-size:13px;font-weight:600;color:#0f2a45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $user->email }}</div>
                    </div>
                    <svg style="flex-shrink:0;margin-left:auto;color:#1a8ed4" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                </a>
                @endif
                @if($user->phone)
                <a href="tel:{{ $user->phone }}" class="info-row-new">
                    <div style="width:36px;height:36px;border-radius:10px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="16" height="16" fill="none" stroke="#059669" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    </div>
                    <div style="min-width:0">
                        <div style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">Téléphone</div>
                        <div style="font-size:13px;font-weight:600;color:#0f2a45">{{ $user->phone }}</div>
                    </div>
                </a>
                @endif
                @if(isset($user->location) && $user->location)
                @php $mapsHref = Str::startsWith($user->location,'http') ? $user->location : 'https://maps.google.com/?q='.urlencode($user->location); @endphp
                <a href="{{ $mapsHref }}" target="_blank" class="info-row-new">
                    <div style="width:36px;height:36px;border-radius:10px;background:#fef3c7;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="16" height="16" fill="none" stroke="#d97706" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <div style="min-width:0;flex:1">
                        <div style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">Adresse</div>
                        <div style="font-size:13px;font-weight:600;color:#0f2a45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $user->address ?: $user->location }}</div>
                    </div>
                    <svg style="flex-shrink:0;margin-left:auto;color:#d97706" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                </a>
                @endif
                @if(!$user->email && !$user->phone && !(isset($user->location) && $user->location))
                <div style="padding:24px 20px;text-align:center;color:#94a3b8;font-size:13px">Aucune information disponible</div>
                @endif
            </div>
        </div>

        {{-- QR Code --}}
        <div class="pub-card" style="animation-delay:.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 20px">
            <div style="font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;align-self:flex-start">QR Code</div>
            <div style="padding:10px;background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #f1f5f9">
                <div id="qrcode"></div>
            </div>
            <p style="font-size:12px;color:#94a3b8;font-weight:500;text-align:center;margin-top:10px">Scannez pour partager</p>
        </div>

    </div>

    {{-- Products --}}
    @if($products->count() > 0)
    <div class="pub-card" style="animation-delay:.2s;padding:24px">

        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px">
            <div style="font-size:18px;font-weight:900;color:#0f2a45">{{ $user->products_section_title ?? 'Produits & Services' }}</div>
            <span style="font-size:11px;font-weight:700;color:#1a8ed4;background:#eff6ff;padding:4px 12px;border-radius:50px">{{ $products->count() }} article{{ $products->count() > 1 ? 's' : '' }}</span>
        </div>

        {{-- Search --}}
        <div style="position:relative;margin-bottom:20px">
            <div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none">
                <svg width="16" height="16" fill="none" stroke="#94a3b8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
            <input type="text" id="pub-search" placeholder="Rechercher un produit…" oninput="pubSearch(this.value)"
                   style="width:100%;padding:13px 80px 13px 44px;border-radius:50px;border:2px solid #e2e8f0;font-size:14px;font-weight:500;color:#0f2a45;background:#f8fafc;outline:none;transition:all .2s"
                   onfocus="this.style.borderColor='#1a8ed4';this.style.background='#fff';this.style.boxShadow='0 0 0 3px rgba(26,142,212,.1)'"
                   onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc';this.style.boxShadow=''">
            <button id="pub-search-clear" onclick="clearPubSearch()"
                    style="display:none;position:absolute;right:48px;top:50%;transform:translateY(-50%);background:#e2e8f0;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;align-items:center;justify-content:center"
                    onmouseover="this.style.background='#cbd5e1'" onmouseout="this.style.background='#e2e8f0'">
                <svg width="11" height="11" fill="none" stroke="#64748b" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
            <button id="pub-search-mic" onclick="startVoiceSearch()" title="Recherche vocale"
                    style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#e2e8f0;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s"
                    onmouseover="if(!this.dataset.active){this.style.background='#1a8ed4';this.querySelector('svg').style.stroke='#fff'}"
                    onmouseout="if(!this.dataset.active){this.style.background='#e2e8f0';this.querySelector('svg').style.stroke='#64748b'}">
                <svg id="pub-mic-icon" width="15" height="15" fill="none" stroke="#64748b" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="9" y="2" width="6" height="11" rx="3"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 10a7 7 0 0014 0M12 19v3M9 22h6"/>
                </svg>
            </button>
        </div>

        {{-- No results --}}
        <div id="pub-no-results" style="display:none;text-align:center;padding:32px 20px;background:#f8fafc;border-radius:16px;border:2px dashed #e2e8f0;margin-bottom:20px">
            <div style="font-size:36px;margin-bottom:10px">🔍</div>
            <p style="color:#64748b;font-size:14px;font-weight:600">Aucun produit ne correspond à votre recherche.</p>
        </div>

        {{-- Product grid --}}
        <div id="pub-products-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px">
            @foreach($products as $i => $product)
            <div class="prod-card {{ $product->is_favorite ? 'is-fav' : '' }} {{ $i >= 10 ? 'pub-product-extra' : '' }}"
                 data-name="{{ strtolower($product->name) }}"
                 data-description="{{ strtolower($product->description ?? '') }}"
                 style="{{ $i >= 10 ? 'display:none;' : '' }}">

                @if($product->image)
                <div style="position:relative;height:200px;overflow:hidden;background:#f8fafc;flex-shrink:0">
                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}"
                         style="width:100%;height:100%;object-fit:cover;transition:transform .4s"
                         onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'">
                    <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center"
                         onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
                        <button onclick="openImageModal('{{ asset('storage/' . $product->image) }}',{{ json_encode($product->name) }})"
                                style="background:rgba(255,255,255,.9);border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2)">
                            <svg width="20" height="20" fill="none" stroke="#0f2a45" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        </button>
                    </div>
                    @if($product->is_favorite)
                    <div style="position:absolute;top:10px;right:10px;background:#f59e0b;border-radius:8px;padding:3px 9px;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(245,158,11,.4)">
                        <svg width="10" height="10" fill="#fff" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        <span style="font-size:10px;font-weight:800;color:#fff">Favori</span>
                    </div>
                    @endif
                </div>
                @endif

                <div style="padding:16px;flex:1;display:flex;flex-direction:column">
                    <h3 style="font-size:15px;font-weight:800;color:#0f2a45;margin-bottom:6px;line-height:1.3">{{ $product->name }}</h3>
                    @if($product->description)
                    <p style="font-size:12px;color:#64748b;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1">{{ $product->description }}</p>
                    @endif

                    @if($product->audio)
                    <div style="display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:10px;padding:8px 10px;margin-bottom:10px">
                        <div style="flex-shrink:0;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#1a8ed4,#3ab4f2);display:flex;align-items:center;justify-content:center">
                            <svg width="12" height="12" fill="white" viewBox="0 0 24 24"><path d="M12 1a4 4 0 00-4 4v7a4 4 0 008 0V5a4 4 0 00-4-4z"/><path d="M19 11a7 7 0 01-14 0H3a9 9 0 0018 0h-2z"/></svg>
                        </div>
                        <audio controls controlsList="nodownload" src="{{ asset('storage/' . $product->audio) }}" style="flex:1;height:26px;min-width:0;accent-color:#1a8ed4"></audio>
                    </div>
                    @endif

                    <div style="display:flex;gap:8px;margin-top:auto;padding-top:10px">
                        <button onclick="contactForProduct({{ json_encode($product->name) }})"
                                style="flex:1;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;border:none;border-radius:10px;padding:10px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;gap:5px"
                                onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                            <svg width="13" height="13" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            Contacter
                        </button>
                        <button onclick="shareProduct('{{ $product->name }}','{{ $user->mapage ? url('/az/' . $user->mapage) : url()->current() }}')"
                                style="background:#f0f9ff;color:#1a8ed4;border:1px solid #bae6fd;border-radius:10px;padding:10px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center"
                                onmouseover="this.style.background='#e0f2fe'" onmouseout="this.style.background='#f0f9ff'">
                            <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        @if($products->count() > 10)
        <div style="display:flex;justify-content:center;margin-top:24px">
            <button id="pub-btn-voir-plus" onclick="pubToggleMore()"
                    style="display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;border:none;cursor:pointer;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#045d98,#08a3ff);box-shadow:0 4px 14px rgba(8,163,255,.3);transition:opacity .2s"
                    onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                Voir plus ({{ $products->count() - 10 }} produit{{ $products->count() - 10 > 1 ? 's' : '' }})
            </button>
        </div>
        @endif

    </div>
    @else
    <div class="pub-card" style="animation-delay:.2s;padding:44px 24px;text-align:center">
        <div style="font-size:48px;margin-bottom:16px">📦</div>
        <div style="font-size:18px;font-weight:800;color:#0f2a45;margin-bottom:8px">{{ $user->products_section_title ?? 'Produits & Services' }}</div>
        <p style="color:#64748b;font-size:14px;font-weight:500">Aucun produit publié pour le moment.</p>
    </div>
    @endif

    {{-- Footer brand --}}
    <div style="text-align:center;padding:6px 0">
        <p style="font-size:12px;color:#94a3b8;font-weight:500">Propulsé par <a href="/" style="color:#1a8ed4;font-weight:700;text-decoration:none">AZ Senegal</a></p>
    </div>

</div>
</div>

{{-- Image modal --}}
<div id="imageModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;align-items:center;justify-content:center;padding:20px" onclick="closeImageModal()">
    <div style="position:relative;max-width:90%;max-height:90vh" onclick="event.stopPropagation()">
        <img id="modalImage" src="" alt="" style="max-width:100%;max-height:80vh;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.5)">
        <button onclick="closeImageModal()" style="position:absolute;top:-14px;right:-14px;background:#fff;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3)">
            <svg width="14" height="14" fill="none" stroke="#333" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>
</div>

@endsection

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    // ── QR Code ────────────────────────────────────────────────────────────────
    document.addEventListener("DOMContentLoaded", function () {
        new QRCode(document.getElementById("qrcode"), {
            text: "{{ $qrUrl }}",
            width: 160,
            height: 160,
            colorDark: "#020f1e",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    });

    // ── Toast ─────────────────────────────────────────────────────────────────
    function showToast(msg, err) {
        const t = document.getElementById('toast-pub');
        t.textContent = msg;
        t.className = 'toast-pub ' + (err ? 'err' : 'ok');
        t.style.display = 'block';
        setTimeout(() => t.classList.add('show'), 10);
        setTimeout(() => { t.classList.remove('show'); setTimeout(() => t.style.display = 'none', 350); }, 3000);
    }

    // ── Image modal ───────────────────────────────────────────────────────────
    function openImageModal(src, alt) {
        document.getElementById('modalImage').src = src;
        document.getElementById('modalImage').alt = alt;
        document.getElementById('imageModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
    function closeImageModal() {
        document.getElementById('imageModal').style.display = 'none';
        document.body.style.overflow = '';
    }
    document.addEventListener('keydown', e => { if (e.key === 'Escape') closeImageModal(); });

    // ── Normalisation accent-insensitive ──────────────────────────────────────
    function norm(str) {
        return (str || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
    }

    // ── Recherche produits ────────────────────────────────────────────────────
    let pubExpanded = false;
    function pubSearch(query) {
        const q = norm(query.trim());
        const cards = document.querySelectorAll('#pub-products-grid .prod-card');
        const btnVoirPlus = document.getElementById('pub-btn-voir-plus');
        const noResults = document.getElementById('pub-no-results');
        const clearBtn = document.getElementById('pub-search-clear');

        clearBtn.style.display = q.length ? 'flex' : 'none';

        if (!q) {
            cards.forEach(card => {
                card.style.display = card.classList.contains('pub-product-extra') && !pubExpanded ? 'none' : 'flex';
            });
            if (btnVoirPlus) btnVoirPlus.parentElement.style.display = 'flex';
            noResults.style.display = 'none';
            return;
        }

        if (btnVoirPlus) btnVoirPlus.parentElement.style.display = 'none';
        let found = 0;
        cards.forEach(card => {
            const match = norm(card.dataset.name).includes(q) || norm(card.dataset.description).includes(q);
            card.style.display = match ? 'flex' : 'none';
            if (match) found++;
        });
        noResults.style.display = found === 0 ? 'block' : 'none';
    }

    function clearPubSearch() {
        const input = document.getElementById('pub-search');
        input.value = '';
        pubSearch('');
        input.focus();
    }

    // ── Recherche vocale ──────────────────────────────────────────────────────
    let voiceRecognition = null;
    function startVoiceSearch() {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        const micBtn = document.getElementById('pub-search-mic');
        const micIcon = document.getElementById('pub-mic-icon');
        if (!SpeechRecognition) { showToast('Recherche vocale non supportée par votre navigateur.', true); return; }
        if (micBtn.dataset.active === '1') { if (voiceRecognition) voiceRecognition.stop(); return; }

        voiceRecognition = new SpeechRecognition();
        voiceRecognition.lang = 'fr-FR';
        voiceRecognition.interimResults = true;
        voiceRecognition.maxAlternatives = 1;

        micBtn.dataset.active = '1';
        micBtn.style.background = '#ef4444';
        micBtn.style.boxShadow = '0 0 0 4px rgba(239,68,68,.2)';
        micIcon.style.stroke = '#fff';

        voiceRecognition.onresult = function(e) {
            let transcript = '';
            for (let i = e.resultIndex; i < e.results.length; i++) transcript += e.results[i][0].transcript;
            document.getElementById('pub-search').value = transcript;
            pubSearch(transcript);
        };
        voiceRecognition.onend = voiceRecognition.onerror = function() {
            micBtn.dataset.active = '';
            micBtn.style.background = '#e2e8f0';
            micBtn.style.boxShadow = 'none';
            micIcon.style.stroke = '#64748b';
        };
        voiceRecognition.start();
    }

    // ── vCard ─────────────────────────────────────────────────────────────────
    function downloadVcard() {
        const lines = [
            'BEGIN:VCARD', 'VERSION:3.0',
            'FN:{{ addslashes($user->name) }}',
            'N:{{ addslashes($user->name) }};;;',
            @if($user->phone) 'TEL;TYPE=CELL:{{ $user->phone }}', @endif
            @if($user->email) 'EMAIL:{{ $user->email }}', @endif
            @if(isset($user->location) && $user->location) 'ADR;TYPE=WORK:;;{{ addslashes($user->location) }};;;;', @endif
            @if($user->mapage) 'URL:{{ url('/az/' . $user->mapage) }}', @endif
            'END:VCARD'
        ];
        const blob = new Blob([lines.join('\r\n')], { type: 'text/vcard' });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = '{{ Str::slug($user->name) }}.vcf';
        a.click();
        URL.revokeObjectURL(a.href);
    }

    // ── Voir plus / moins ─────────────────────────────────────────────────────
    function pubToggleMore() {
        pubExpanded = !pubExpanded;
        document.querySelectorAll('#pub-products-grid .pub-product-extra').forEach(el => {
            el.style.display = pubExpanded ? 'flex' : 'none';
        });
        const btn = document.getElementById('pub-btn-voir-plus');
        const chevronDown = '<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>';
        const chevronUp   = '<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>';
        btn.innerHTML = pubExpanded
            ? chevronUp + ' Voir moins'
            : chevronDown + ' Voir plus ({{ $products->count() - 10 }} produit{{ $products->count() - 10 > 1 ? "s" : "" }})';
    }

    // ── Contacter via WhatsApp ────────────────────────────────────────────────
    function contactForProduct(productName) {
        @if($user->whatsapp)
        const msg = `Bonjour, je suis intéressé par votre produit "${productName}". Pourriez-vous me donner plus d'informations ?`;
        window.open(`https://wa.me/{{ preg_replace('/\D/', '', $user->whatsapp ?? '') }}?text=${encodeURIComponent(msg)}`, '_blank');
        @else
        showToast('Numéro WhatsApp non disponible.', true);
        @endif
    }

    // ── Partager produit ──────────────────────────────────────────────────────
    function shareProduct(productName, pageUrl) {
        const shareText = `Découvrez "${productName}" sur la page de {{ $user->name }}`;
        if (navigator.share) {
            navigator.share({ title: productName, text: shareText, url: pageUrl });
        } else {
            navigator.clipboard.writeText(`${shareText} — ${pageUrl}`).then(() => showToast('Lien copié !'));
        }
    }
</script>