{% extends "base.html" %}
{% block title %}{{ supplier.name }} - {{ t.dir_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
{% set _sup_country = country_labels.get(supplier.country_code, supplier.country_code) %}
{% set _sup_category = category_labels.get(supplier.category, supplier.category) %}
{% set _sup_desc = supplier.tagline if supplier.tagline else supplier.name ~ " — " ~ _sup_category ~ " in " ~ _sup_country %}
{% set _sup_image = (config.BASE_URL ~ "/static/uploads/covers/" ~ supplier.cover_image_file) if supplier.cover_image_file else (supplier.logo_url if supplier.logo_url else url_for('static', filename='images/logo.png', _external=True)) %}
<meta name="description" content="{{ _sup_desc | truncate(155, True, '...') }}">
<meta property="og:title" content="{{ supplier.name }} — {{ _sup_category }} | {{ config.APP_NAME }}">
<meta property="og:description" content="{{ _sup_desc | truncate(155, True, '...') }}">
<meta property="og:type" content="profile">
<meta property="og:image" content="{{ _sup_image }}">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": {{ supplier.name | tojson }},
  {% if supplier.website %}"url": {{ supplier.website | tojson }},{% endif %}
  {% if supplier.logo_url %}"logo": {{ supplier.logo_url | tojson }},{% endif %}
  "description": {{ _sup_desc | tojson }},
  "address": {
    "@type": "PostalAddress",
    "addressCountry": {{ supplier.country_code | tojson }}
    {% if supplier.city %}, "addressLocality": {{ supplier.city | tojson }}{% endif %}
  }
}
</script>
<style>
  /* ── Hero ─────────────────────────────────────────────────── */
  .sp-hero {
    position: relative; overflow: hidden;
    background: #0F172A;
    border-radius: 0 0 20px 20px;
    margin-bottom: 2rem; padding: 2.5rem 0 2rem;
  }
  .sp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }
  .sp-hero-inner {
    max-width: 1120px; margin: 0 auto; padding: 0 2rem;
    position: relative; z-index: 1;
  }
  .sp-hero-back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8125rem; color: #94A3B8; text-decoration: none;
    margin-bottom: 1.5rem; transition: color 0.15s;
  }
  .sp-hero-back:hover { color: #CBD5E1; text-decoration: none; }
  .sp-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
  .sp-hero-left { display: flex; align-items: flex-start; gap: 1.25rem; }
  .sp-hero-logo {
    width: 72px; height: 72px; border-radius: 14px; object-fit: cover;
    background: #1E293B; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12);
  }
  .sp-hero-logo-placeholder {
    width: 72px; height: 72px; border-radius: 14px; background: #1E293B;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #475569; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .sp-hero-name {
    font-size: 1.75rem; font-weight: 800; color: #fff; margin: 0 0 4px;
    letter-spacing: -0.02em; line-height: 1.15;
  }
  .sp-hero-loc { font-size: 0.875rem; color: #94A3B8; margin: 0 0 0.5rem; }
  .sp-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
  .sp-hero-badge {
    font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  }
  .sp-hero-badge--category { background: rgba(29,78,216,0.3); color: #93C5FD; }
  .sp-hero-badge--verified { background: rgba(22,163,74,0.3); color: #86EFAC; }
  .sp-hero-tagline { font-size: 0.9375rem; color: #CBD5E1; margin: 0.5rem 0 0; max-width: 500px; }
  .sp-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }
  .sp-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 9px; font-size: 0.8125rem; font-weight: 600;
    text-decoration: none; transition: all 0.15s; border: 1px solid transparent;
    font-family: 'DM Sans', sans-serif; cursor: pointer;
  }
  .sp-hero-btn--primary { background: #1D4ED8; color: #fff; border-color: #1E40AF; }
  .sp-hero-btn--primary:hover { background: #1E40AF; text-decoration: none; color: #fff; }
  .sp-hero-btn--outline { background: rgba(255,255,255,0.08); color: #CBD5E1; border-color: rgba(255,255,255,0.15); }
  .sp-hero-btn--outline:hover { background: rgba(255,255,255,0.14); text-decoration: none; color: #fff; }

  /* ── Body layout ──────────────────────────────────────────── */
  .sp-body { max-width: 1120px; margin: 0 auto; padding: 0 2rem 3rem; }
  .sp-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
  @media (max-width: 768px) {
    .sp-grid { grid-template-columns: 1fr; }
    .sp-hero-name { font-size: 1.375rem; }
  }

  /* ── Cards ────────────────────────────────────────────────── */
  .sp-card {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
    padding: 1.5rem; margin-bottom: 1rem;
  }
  .sp-card h2 {
    font-size: 0.75rem; font-weight: 700; color: #94A3B8;
    text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem;
  }
  .sp-desc { font-size: 0.9375rem; color: #475569; line-height: 1.75; margin: 0; }
  .sp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
  .sp-pill {
    font-size: 0.6875rem; font-weight: 600; padding: 4px 12px;
    border-radius: 999px; background: #EFF6FF; color: #1D4ED8;
  }

  /* Services checklist */
  .sp-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 1rem; }
  .sp-services li { font-size: 0.8125rem; color: #475569; display: flex; align-items: center; gap: 6px; }
  .sp-services li::before { content: '✓'; color: #16A34A; font-weight: 700; flex-shrink: 0; }
  @media (max-width: 480px) { .sp-services { grid-template-columns: 1fr; } }

  /* Service area */
  .sp-area-pills { display: flex; flex-wrap: wrap; gap: 5px; }
  .sp-area-pill {
    font-size: 0.6875rem; font-weight: 600; padding: 3px 10px;
    border-radius: 999px; background: #F1F5F9; color: #475569;
  }

  /* ── Sidebar ──────────────────────────────────────────────── */
  .sp-sidebar { position: sticky; top: 80px; }
  .sp-contact-avatar {
    width: 40px; height: 40px; border-radius: 999px; background: #E2E8F0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #64748B; font-size: 1rem; flex-shrink: 0;
  }
  .sp-contact-name { font-size: 0.9375rem; font-weight: 700; color: #1E293B; }
  .sp-contact-role { font-size: 0.75rem; color: #94A3B8; }
  .sp-contact-links { margin-top: 0.75rem; }
  .sp-contact-link {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; color: #475569; padding: 5px 0;
    text-decoration: none; border-bottom: 1px solid #F1F5F9;
  }
  .sp-contact-link:last-child { border-bottom: none; }
  .sp-contact-link:hover { color: #1D4ED8; text-decoration: none; }
  .sp-contact-link svg { width: 14px; height: 14px; flex-shrink: 0; color: #94A3B8; }

  .sp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .sp-stat { background: #F8FAFC; border-radius: 10px; padding: 0.75rem; text-align: center; }
  .sp-stat__value { font-size: 1.375rem; font-weight: 800; color: #1E293B; }
  .sp-stat__label { font-size: 0.625rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

  .sp-social { display: flex; gap: 8px; margin-top: 0.75rem; }
  .sp-social-link {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; background: #F1F5F9;
    color: #64748B; text-decoration: none; transition: all 0.15s;
  }
  .sp-social-link:hover { background: #EFF6FF; color: #1D4ED8; }
  .sp-social-link svg { width: 15px; height: 15px; }

  .sp-trust {
    display: flex; align-items: center; gap: 6px; margin-top: 0.75rem;
    font-size: 0.6875rem; color: #94A3B8;
  }
  .sp-trust svg { width: 12px; height: 12px; color: #16A34A; flex-shrink: 0; }

  /* ── Enquiry form ─────────────────────────────────────────── */
  .sp-enquiry { }
  .sp-enquiry-field { margin-bottom: 0.75rem; }
  .sp-enquiry-label { display: block; font-size: 0.75rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
  .sp-enquiry-input {
    width: 100%; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 12px;
    font-size: 0.8125rem; font-family: inherit; box-sizing: border-box;
    transition: border-color 0.15s;
  }
  .sp-enquiry-input:focus { outline: none; border-color: #1D4ED8; }
  .sp-enquiry-textarea { min-height: 80px; resize: vertical; }
  .sp-enquiry-submit {
    width: 100%; padding: 10px; border-radius: 9px; font-size: 0.875rem; font-weight: 600;
    background: #1D4ED8; color: #fff; border: none; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
  }
  .sp-enquiry-submit:hover { background: #1E40AF; }

  /* ── CTA strip ────────────────────────────────────────────── */
  .sp-cta-strip {
    background: #0F172A; border-radius: 16px; padding: 2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap; margin-top: 1.5rem;
  }
  .sp-cta-strip__text h3 { color: #fff; font-size: 1.125rem; margin: 0 0 4px; }
  .sp-cta-strip__text p { color: #94A3B8; font-size: 0.875rem; margin: 0; }
  .sp-cta-strip__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #1D4ED8; color: #fff; padding: 10px 22px;
    border-radius: 9px; font-weight: 600; font-size: 0.875rem;
    text-decoration: none; transition: background 0.15s; white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
  }
  .sp-cta-strip__btn:hover { background: #1E40AF; text-decoration: none; color: #fff; }
  .sp-cta-strip__btn--green { background: #16A34A; }
  .sp-cta-strip__btn--green:hover { background: #15803D; }

  /* ── Locked popover (free tier) ───────────────────────────── */
  .sp-cta-wrap { position: relative; }
  .btn--locked {
    display: block; width: 100%; text-align: center;
    padding: 10px 20px; border-radius: 10px; font-size: 0.875rem; font-weight: 600;
    font-family: 'DM Sans', sans-serif; cursor: not-allowed;
    background: #E2E8F0; color: #94A3B8; border: 1px solid #CBD5E1;
    user-select: none; transition: opacity 0.15s;
  }
  .btn--locked:hover { opacity: 0.85; }
  .sp-locked-hint { font-size: 0.6875rem; color: #94A3B8; text-align: center; margin-top: 5px; }
  .sp-locked-popover {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #fff; border: 1px solid #E2E8F0;
    border-radius: 12px; padding: 1rem 1.125rem;
    box-shadow: 0 8px 24px rgba(15,23,42,0.08); z-index: 50;
  }
  .sp-locked-popover.open { display: block; animation: popoverIn 0.15s ease; }
  @keyframes popoverIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .sp-locked-popover__title { font-size: 0.8125rem; font-weight: 700; color: #0F172A; margin: 0 0 4px; }
  .sp-locked-popover__body { font-size: 0.75rem; color: #64748B; line-height: 1.55; margin: 0 0 0.75rem; }
  .sp-locked-popover__link {
    display: block; width: 100%; text-align: center;
    padding: 8px 16px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600;
    background: #1D4ED8; color: #fff; text-decoration: none;
  }
  .sp-locked-popover__link:hover { background: #1E40AF; text-decoration: none; }
  .sp-locked-popover__dismiss {
    display: block; text-align: center; margin-top: 8px;
    font-size: 0.6875rem; color: #94A3B8; cursor: pointer;
    background: none; border: none; font-family: inherit; padding: 0;
  }
</style>
{% endblock %}

{% block content %}

{# ── Hero ─────────────────────────────────────────────────────── #}
<div class="sp-hero">
  <div class="sp-hero-inner">
    <a href="{{ url_for('directory.index') }}" class="sp-hero-back">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
      {{ t.sp_back }}
    </a>

    <div class="sp-hero-row">
      <div class="sp-hero-left">
        {% if supplier.logo_file or supplier.logo_url %}
        <img src="{{ supplier.logo_file or supplier.logo_url }}" alt="" class="sp-hero-logo">
        {% else %}
        <div class="sp-hero-logo-placeholder">{{ supplier.name[0] }}</div>
        {% endif %}
        <div>
          <h1 class="sp-hero-name">{{ supplier.name }}</h1>
          <p class="sp-hero-loc">{{ country_labels.get(supplier.country_code, supplier.country_code) }}{% if supplier.city %}, {{ supplier.city }}{% endif %}</p>
          <div class="sp-hero-badges">
            <span class="sp-hero-badge sp-hero-badge--category">{{ category_labels.get(supplier.category, supplier.category) }}</span>
            {% if supplier.is_verified %}
            <span class="sp-hero-badge sp-hero-badge--verified">{{ t.sp_verified }}</span>
            {% endif %}
          </div>
          {% if supplier.tagline %}
          <p class="sp-hero-tagline">{{ supplier.tagline }}</p>
          {% endif %}
        </div>
      </div>

      <div class="sp-hero-actions">
        {% if supplier.tier in ('growth', 'pro') %}
        <a href="{{ url_for('leads.quote_request', country=supplier.country_code) }}" class="sp-hero-btn sp-hero-btn--primary">
          {{ t.sp_request_quote }}
        </a>
        {% endif %}
        {% if supplier.website %}
        <a href="{{ url_for('directory.supplier_website', slug=supplier.slug) }}" class="sp-hero-btn sp-hero-btn--outline" target="_blank" rel="noopener">
          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
          {{ t.sp_visit_website }}
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{# ── Body ──────────────────────────────────────────────────────── #}
<div class="sp-body">
  {% if supplier.tier in ('basic', 'growth', 'pro') %}
  {# Full two-column layout for paid tiers #}
  <div class="sp-grid">
    {# Main column #}
    <div>
      {# About #}
      {% set desc = supplier.long_description or supplier.short_description or supplier.description %}
      {% if desc or supplier.service_categories %}
      <div class="sp-card">
        <h2>{{ t.sp_about }}</h2>
        {% if desc %}
        <p class="sp-desc">{{ desc }}</p>
        {% endif %}
        {% if supplier.service_categories %}
        <div class="sp-pills">
          {% for cat in (supplier.service_categories or '').split(',') %}
          {% if cat.strip() %}
          <span class="sp-pill">{{ cat.strip() | replace('_', ' ') | title }}</span>
          {% endif %}
          {% endfor %}
        </div>
        {% endif %}
      </div>
      {% endif %}

      {# Services offered #}
      {% if services_list %}
      <div class="sp-card">
        <h2>{{ t.sp_services }}</h2>
        <ul class="sp-services">
          {% for s in services_list %}
          <li>{{ s }}</li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}

      {# Service area #}
      {% if supplier.service_area %}
      <div class="sp-card">
        <h2>{{ t.sp_service_area }}</h2>
        <div class="sp-area-pills">
          {% for area in (supplier.service_area or '').split(',') %}
          {% if area.strip() %}
          <span class="sp-area-pill">{{ area.strip() }}</span>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {# Enquiry form for Basic+ #}
      <div class="sp-card sp-enquiry">
        <h2>{{ t.sp_enquiry_heading }}</h2>
        <form hx-post="{{ url_for('directory.supplier_enquiry', slug=supplier.slug) }}"
              hx-target="#enquiry-result"
              hx-swap="innerHTML">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div id="enquiry-result"></div>
          <div class="sp-enquiry-field">
            <label class="sp-enquiry-label">{{ t.sp_enquiry_name }} <span style="color:#EF4444">*</span></label>
            <input type="text" name="contact_name" class="sp-enquiry-input" required placeholder="Jane Smith">
          </div>
          <div class="sp-enquiry-field">
            <label class="sp-enquiry-label">{{ t.sp_enquiry_email }} <span style="color:#EF4444">*</span></label>
            <input type="email" name="contact_email" class="sp-enquiry-input" required placeholder="jane@company.com">
          </div>
          <div class="sp-enquiry-field">
            <label class="sp-enquiry-label">{{ t.sp_enquiry_message }} <span style="color:#EF4444">*</span></label>
            <textarea name="message" class="sp-enquiry-input sp-enquiry-textarea" required
                      placeholder="{{ t.sp_enquiry_placeholder | tformat(name=supplier.name) }}"></textarea>
          </div>
          <button type="submit" class="sp-enquiry-submit">{{ t.sp_enquiry_submit }}</button>
        </form>
      </div>
    </div>

    {# Sidebar #}
    <aside class="sp-sidebar">
      {# Contact card #}
      <div class="sp-card">
        <h2>{{ t.sp_contact }}</h2>
        {% if supplier.contact_name %}
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:0.75rem">
          <div class="sp-contact-avatar">{{ supplier.contact_name[0] | upper }}</div>
          <div>
            <div class="sp-contact-name">{{ supplier.contact_name }}</div>
            {% if supplier.contact_role %}
            <div class="sp-contact-role">{{ supplier.contact_role }}</div>
            {% endif %}
          </div>
        </div>
        {% endif %}

        <div class="sp-contact-links">
          {% if supplier.contact_email %}
          <a href="mailto:{{ supplier.contact_email }}" class="sp-contact-link">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/></svg>
            {{ supplier.contact_email }}
          </a>
          {% endif %}
          {% if supplier.contact_phone %}
          <a href="tel:{{ supplier.contact_phone }}" class="sp-contact-link">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 6.75Z"/></svg>
            {{ supplier.contact_phone }}
          </a>
          {% endif %}
          {% if supplier.website %}
          <a href="{{ url_for('directory.supplier_website', slug=supplier.slug) }}" target="_blank" rel="noopener" class="sp-contact-link">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg>
            {{ supplier.website }}
          </a>
          {% endif %}
        </div>

        {# Social links #}
        {% if social_links.linkedin or social_links.instagram or social_links.youtube %}
        <div class="sp-social">
          {% if social_links.linkedin %}
          <a href="{{ social_links.linkedin }}" target="_blank" rel="noopener" class="sp-social-link" title="LinkedIn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          {% endif %}
          {% if social_links.instagram %}
          <a href="{{ social_links.instagram }}" target="_blank" rel="noopener" class="sp-social-link" title="Instagram">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
          </a>
          {% endif %}
          {% if social_links.youtube %}
          <a href="{{ social_links.youtube }}" target="_blank" rel="noopener" class="sp-social-link" title="YouTube">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
          </a>
          {% endif %}
        </div>
        {% endif %}

        {# Stats #}
        {% if supplier.years_in_business or supplier.project_count %}
        <div class="sp-stats-grid" style="margin-top:0.75rem">
          {% if supplier.years_in_business %}
          <div class="sp-stat">
            <div class="sp-stat__value">{{ supplier.years_in_business }}</div>
            <div class="sp-stat__label">{{ t.sp_years }}</div>
          </div>
          {% endif %}
          {% if supplier.project_count %}
          <div class="sp-stat">
            <div class="sp-stat__value">{{ supplier.project_count }}</div>
            <div class="sp-stat__label">{{ t.sp_projects }}</div>
          </div>
          {% endif %}
        </div>
        {% endif %}

        {# Verified trust note #}
        {% if supplier.is_verified %}
        <div class="sp-trust">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>
          {{ t.sp_trust }}
        </div>
        {% endif %}
      </div>
    </aside>
  </div>

  {# CTA strip — tier-dependent #}
  {% if supplier.tier == 'basic' %}
  <div class="sp-cta-strip">
    <div class="sp-cta-strip__text">
      <h3>{{ t.sp_cta_basic_h3 }}</h3>
      <p>{{ t.sp_cta_basic_desc }}</p>
    </div>
    <a href="{{ url_for('suppliers.signup') }}" class="sp-cta-strip__btn">
      {{ t.sp_cta_basic_btn }}
    </a>
  </div>
  {% elif supplier.tier == 'growth' %}
  {# Subtle upgrade nudge — optional #}
  {% endif %}

  {% else %}
  {# Free / unclaimed tier — minimal layout #}
  <div style="max-width:800px;margin:0 auto">
    <div class="sp-card">
      {% set desc = supplier.long_description or supplier.short_description or supplier.description %}
      {% if desc %}
      <p class="sp-desc" style="margin-bottom:1.5rem">{{ desc }}</p>
      {% endif %}

      {% if supplier.service_categories %}
      <div class="sp-pills" style="margin-bottom:1.5rem">
        {% for cat in (supplier.service_categories or '').split(',') %}
        {% if cat.strip() %}
        <span class="sp-pill">{{ cat.strip() | replace('_', ' ') | title }}</span>
        {% endif %}
        {% endfor %}
      </div>
      {% endif %}

      {# Locked quote CTA #}
      <div class="sp-cta-wrap" id="quote-wrap">
        <button type="button" class="btn--locked" id="locked-quote-btn"
                aria-describedby="locked-popover" aria-disabled="true">
          {{ t.sp_request_quote }}
        </button>
        <p class="sp-locked-hint">{{ t.sp_locked_hint }}</p>
        <div class="sp-locked-popover" id="locked-popover" role="tooltip">
          <p class="sp-locked-popover__title">{{ t.sp_locked_popover_title }}</p>
          <p class="sp-locked-popover__body">
            {{ t.sp_locked_popover_desc }}
          </p>
          <a href="{{ url_for('leads.quote_request', country=supplier.country_code) }}"
             class="sp-locked-popover__link">{{ t.sp_locked_popover_link }}</a>
          <button type="button" class="sp-locked-popover__dismiss" id="dismiss-popover">{{ t.sp_locked_popover_dismiss }}</button>
        </div>
      </div>
    </div>

    {# Claim CTA strip #}
    {% if not supplier.claimed_by %}
    <div class="sp-cta-strip">
      <div class="sp-cta-strip__text">
        <h3>{{ t.sp_cta_claim_h3 }}</h3>
        <p>{{ t.sp_cta_claim_desc }}</p>
      </div>
      <a href="{{ url_for('suppliers.claim', slug=supplier.slug) }}" class="sp-cta-strip__btn sp-cta-strip__btn--green">
        {{ t.sp_cta_claim_btn }}
      </a>
    </div>
    {% endif %}
  </div>

  <script>
    (function() {
      var btn = document.getElementById('locked-quote-btn');
      var pop = document.getElementById('locked-popover');
      var dis = document.getElementById('dismiss-popover');
      if (!btn || !pop) return;
      btn.addEventListener('click', function(e) { e.stopPropagation(); pop.classList.toggle('open'); });
      if (dis) dis.addEventListener('click', function() { pop.classList.remove('open'); });
      document.addEventListener('click', function(e) {
        if (!document.getElementById('quote-wrap').contains(e.target)) pop.classList.remove('open');
      });
      document.addEventListener('keydown', function(e) { if (e.key === 'Escape') pop.classList.remove('open'); });
    })();
  </script>
  {% endif %}
</div>
{% endblock %}
