{% comment %}
  Inline preview banner, rendered above the tabs when the org has no
  Intelligence subscription yet. The playground BELOW this banner is
  fully interactive: users can switch tabs, fill inputs, see what each
  panel looks like. They hit the paywall only when they click Score /
  Benchmark / etc., where the server returns the
  ``_subscribe_required.html`` fragment via HTMX.
{% endcomment %}
<div class="mb-6 rounded-2xl border overflow-hidden"
     style="border-color: var(--primary-muted, #fed7aa); background: linear-gradient(135deg, var(--primary-soft, #fff7ed) 0%, white 60%);">
    <div class="p-5 sm:p-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="min-w-0 max-w-xl">
                <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide mb-2.5"
                     style="background: var(--color-surface); color: var(--primary); border: 1px solid var(--primary-muted, #fed7aa);">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                    Preview mode
                </div>
                <h2 class="text-lg sm:text-xl font-bold text-stone-900" style="letter-spacing: -0.01em;">
                    Explore the playground, activate to use it
                </h2>
                <p class="mt-1.5 text-sm text-stone-600 leading-relaxed">
                    Switch tabs, browse the inputs and try out the niche picker. When you're ready to actually score packaging, analyse hooks, or pull content gaps, activate Intelligence for <strong>{{ organization.name }}</strong>.
                </p>
            </div>

            <a href="{% url 'intelligence:subscribe' org_id=organization.id %}"
               class="intel-cta-primary flex-shrink-0">
                Activate
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
        </div>

        {% comment %} Value-prop strip, terse one-liners with icons {% endcomment %}
        <div class="mt-5 pt-5 border-t border-stone-200/60 grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div class="flex items-center gap-2 text-xs text-stone-700">
                <span class="flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
                      style="background: var(--color-surface); color: var(--primary); border: 1px solid var(--primary-muted, #fed7aa);">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159M2.25 19.5a1.5 1.5 0 0 0 1.5 1.5h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v13.5Z"/></svg>
                </span>
                <span class="font-medium">Predict CTR before publishing</span>
            </div>
            <div class="flex items-center gap-2 text-xs text-stone-700">
                <span class="flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
                      style="background: var(--color-surface); color: var(--primary); border: 1px solid var(--primary-muted, #fed7aa);">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
                </span>
                <span class="font-medium">Score the first 6 s of any video</span>
            </div>
            <div class="flex items-center gap-2 text-xs text-stone-700">
                <span class="flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
                      style="background: var(--color-surface); color: var(--primary); border: 1px solid var(--primary-muted, #fed7aa);">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/></svg>
                </span>
                <span class="font-medium">Benchmark vs niche peers</span>
            </div>
            <div class="flex items-center gap-2 text-xs text-stone-700">
                <span class="flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
                      style="background: var(--color-surface); color: var(--primary); border: 1px solid var(--primary-muted, #fed7aa);">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
                </span>
                <span class="font-medium">636 niches · ranked content gaps</span>
            </div>
        </div>

        <p class="mt-4 text-[11px] text-stone-500">
            Starts at <strong class="text-stone-700">$19/month</strong> · per-org subscription · cancel anytime.
        </p>
    </div>
</div>