{% extends "base.html" %}

{% block title %}{{ company.name }} - Norda Biznes Hub{% endblock %}

{% block extra_css %}
<style>
    .company-header {
        background: white;
        padding: var(--spacing-2xl);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        margin-bottom: var(--spacing-xl);
    }

    .company-category-badge {
        display: inline-block;
        padding: var(--spacing-xs) var(--spacing-md);
        background: var(--primary);
        color: white;
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }

    .company-name {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
    }

    .company-description {
        font-size: var(--font-size-lg);
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: var(--spacing-xl);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        background: var(--background);
        border-radius: var(--radius-lg);
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-base);
    }

    .contact-item svg {
        color: var(--primary);
    }

    .contact-item a {
        color: var(--primary);
        text-decoration: none;
    }

    .contact-item a:hover {
        text-decoration: underline;
    }

    .company-section {
        background: white;
        padding: var(--spacing-xl);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
        border-bottom: 2px solid var(--border);
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-lg);
    }

    .info-item {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .info-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .info-value {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
    }

    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .tag {
        padding: var(--spacing-xs) var(--spacing-md);
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .tag.primary {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-secondary);
        text-decoration: none;
        margin-bottom: var(--spacing-lg);
        transition: var(--transition);
    }

    .back-link:hover {
        color: var(--primary);
    }

    /* Quality Badge */
    .quality-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-md);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        margin-left: var(--spacing-sm);
        font-weight: 600;
    }

    .quality-badge.verified {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .quality-badge.needs-review {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .quality-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: var(--spacing-xl);
        border-radius: var(--radius-xl);
        color: white;
        margin-bottom: var(--spacing-xl);
    }

    .quality-section.verified {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .quality-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
        margin-top: var(--spacing-md);
    }

    .quality-stat {
        background: rgba(255, 255, 255, 0.2);
        padding: var(--spacing-md);
        border-radius: var(--radius);
    }

    .quality-stat-value {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
    }

    .quality-stat-label {
        font-size: var(--font-size-sm);
        opacity: 0.9;
    }
</style>
{% endblock %}

{% block content %}
<a href="{{ url_for('index') }}" class="back-link">
    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 12H5M12 19l-7-7 7-7"/>
    </svg>
    Powrót do katalogu
</a>

<div class="company-header">
    {% if company.category %}
    <span class="company-category-badge">{{ company.category.name }}</span>
    {% endif %}

    {% if quality_data %}
    <span class="quality-badge {% if quality_data.quality_score >= 95 %}verified{% elif quality_data.quality_score < 80 %}needs-review{% endif %}">
        ✓ Zweryfikowano {{ quality_data.verification_count }}x | Jakość: {{ quality_data.quality_score }}%
    </span>
    {% else %}
    <span class="quality-badge needs-review">
        ⏳ Niezweryfikowana
    </span>
    {% endif %}

    <h1 class="company-name">{{ company.name }}</h1>

    {% if company.description_short %}
    <p class="company-description">{{ company.description_short }}</p>
    {% endif %}

</div>


<!-- O firmie - Single Description (prioritized sources) -->
{% set about_description = company.description_full or (ai_insights.business_summary if ai_insights else none) or (website_analysis.content_summary if website_analysis else none) %}
{% if about_description %}
<div class="company-section">
    <h2 class="section-title">O firmie</h2>

    <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid var(--border);">
        <div style="display: flex; align-items: flex-start; gap: var(--spacing-md);">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #6366f1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
                    <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
                </svg>
            </div>
            <div style="flex: 1; line-height: 1.8; color: var(--text-secondary);">
                {{ about_description }}
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Usługi i kompetencje - Combined Section -->
{# Collect all services from all sources #}
{% set all_services = [] %}
{% if website_analysis and website_analysis.services_extracted %}
    {% for s in website_analysis.services_extracted %}{% set _ = all_services.append(s) %}{% endfor %}
{% endif %}
{% if ai_insights and ai_insights.services_list %}
    {% for s in ai_insights.services_list %}
        {% if s not in all_services %}{% set _ = all_services.append(s) %}{% endif %}
    {% endfor %}
{% endif %}
{# Add keywords/tags #}
{% set all_keywords = [] %}
{% if website_analysis and website_analysis.main_keywords %}
    {% for t in website_analysis.main_keywords %}{% set _ = all_keywords.append(t) %}{% endfor %}
{% endif %}
{% if ai_insights and ai_insights.industry_tags %}
    {% for t in ai_insights.industry_tags %}
        {% if t not in all_keywords %}{% set _ = all_keywords.append(t) %}{% endif %}
    {% endfor %}
{% endif %}

{% if all_services or all_keywords or company.services or company.competencies %}
<div class="company-section">
    <h2 class="section-title">Usługi i kompetencje</h2>

    {# Services from AI/website analysis #}
    {% if all_services %}
    <div style="margin-bottom: var(--spacing-lg);">
        <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
            <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--primary); display: flex; align-items: center; justify-content: center;">
                <svg width="16" height="16" fill="white" viewBox="0 0 24 24">
                    <path d="M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5zM19 19H5V5h14v14zM6 15h12v2H6v-2zm0-4h12v2H6v-2zm0-4h12v2H6V7z"/>
                </svg>
            </div>
            <h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Oferta</h3>
        </div>
        <div class="tags-container">
            {% for service in all_services %}
            <span class="tag" style="background: var(--primary); color: white;">{{ service }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Company services from database #}
    {% if company.services %}
    <div style="margin-bottom: var(--spacing-lg);">
        <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
            <div style="width: 32px; height: 32px; border-radius: 8px; background: #10b981; display: flex; align-items: center; justify-content: center;">
                <svg width="16" height="16" fill="white" viewBox="0 0 24 24">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                </svg>
            </div>
            <h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Usługi</h3>
        </div>
        <div class="tags-container">
            {% for cs in company.services %}
            {% if cs.service %}
            <span class="tag {% if cs.is_primary %}primary{% endif %}">{{ cs.service.name }}</span>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Company competencies from database #}
    {% if company.competencies %}
    <div style="margin-bottom: var(--spacing-lg);">
        <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
            <div style="width: 32px; height: 32px; border-radius: 8px; background: #6366f1; display: flex; align-items: center; justify-content: center;">
                <svg width="16" height="16" fill="white" 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>
            </div>
            <h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Kompetencje</h3>
        </div>
        <div class="tags-container">
            {% for cc in company.competencies %}
            {% if cc.competency %}
            <span class="tag">{{ cc.competency.name }}</span>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Keywords/tags #}
    {% if all_keywords %}
    <div>
        <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
            <div style="width: 32px; height: 32px; border-radius: 8px; background: #8b5cf6; display: flex; align-items: center; justify-content: center;">
                <svg width="16" height="16" fill="white" viewBox="0 0 24 24">
                    <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/>
                </svg>
            </div>
            <h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin: 0;">Słowa kluczowe</h3>
        </div>
        <div class="tags-container">
            {% for tag in all_keywords %}
            <span class="tag">{{ tag }}</span>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Business Profile Additional Data -->
{% if website_analysis or ai_insights %}

    {# Category & Target Market Cards Grid #}
    {% if ai_insights and (ai_insights.target_market or ai_insights.suggested_category) %}
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg);">
        {% if ai_insights.suggested_category %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid var(--primary);">
            <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
                <div style="width: 40px; height: 40px; border-radius: 10px; background: var(--primary); display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
                    </svg>
                </div>
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; font-weight: 500;">Kategoria</div>
            </div>
            <div style="font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-xs);">{{ ai_insights.suggested_category }}</div>
            {% if ai_insights.category_confidence %}
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary);">Pewność: {{ (ai_insights.category_confidence * 100)|round(1) }}%</div>
            {% endif %}
        </div>
        {% endif %}
        {% if ai_insights.target_market %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
            <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
                <div style="width: 40px; height: 40px; border-radius: 10px; background: #10b981; display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" fill="white" viewBox="0 0 24 24">
                        <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                    </svg>
                </div>
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; font-weight: 500;">Rynek docelowy</div>
            </div>
            <div style="font-size: var(--font-size-base); color: var(--text-primary); line-height: 1.5;">{{ ai_insights.target_market }}</div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# Wyróżniki - Combined USPs and Values #}
    {% if ai_insights and (ai_insights.unique_selling_points or ai_insights.company_values) %}
    <div class="company-section">
        <h2 class="section-title">Wyróżniki</h2>

        {# Unique Selling Points #}
        {% if ai_insights.unique_selling_points %}
        <div style="margin-bottom: {% if ai_insights.company_values %}var(--spacing-lg){% else %}0{% endif %};">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-sm);">
                {% for usp in ai_insights.unique_selling_points %}
                <div style="padding: var(--spacing-sm) var(--spacing-md); background: #dcfce7; color: #166534; border-radius: var(--radius); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-xs);">
                    <svg width="16" height="16" fill="#16a34a" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    {{ usp }}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {# Company Values as tags #}
        {% if ai_insights.company_values %}
        <div>
            <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
                <div style="width: 24px; height: 24px; border-radius: 6px; background: #f59e0b; display: flex; align-items: center; justify-content: center;">
                    <svg width="12" height="12" fill="white" viewBox="0 0 24 24">
                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    </svg>
                </div>
                <span style="font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary);">Wartości</span>
            </div>
            <div class="tags-container">
                {% for value in ai_insights.company_values %}
                <span class="tag" style="background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;">
                    {{ value }}
                </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# Certifications Card #}
    {% if ai_insights and ai_insights.certifications %}
    <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); border: 1px solid var(--border);">
        <div style="display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);">
            <div style="width: 32px; height: 32px; border-radius: 8px; background: #6366f1; display: flex; align-items: center; justify-content: center;">
                <svg width="16" height="16" fill="white" viewBox="0 0 24 24">
                    <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
                </svg>
            </div>
            <h3 style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin: 0;">
                Certyfikaty i uprawnienia
            </h3>
        </div>
        <div class="tags-container">
            {% for cert in ai_insights.certifications %}
            <span class="tag" style="background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;">
                🏆 {{ cert }}
            </span>
            {% endfor %}
        </div>
    </div>
    {% endif %}


    {# Data source info card #}
    {% if website_content or ai_insights %}
    <div style="background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); border: 1px solid #e2e8f0;">
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary);">
            {% if website_content and website_content.url %}
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
                <span>Źródło: <a href="{{ website_content.url }}" target="_blank" rel="noopener noreferrer" style="color: var(--primary); text-decoration: none;">{{ website_content.url|replace('https://', '')|replace('http://', '') }}</a></span>
            </div>
            {% endif %}
            {% if website_content and website_content.scraped_at %}
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
                <span>Analiza: {{ website_content.scraped_at.strftime('%d.%m.%Y') }}</span>
            </div>
            {% endif %}
            {% if ai_insights and ai_insights.ai_confidence_score %}
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <svg width="16" height="16" fill="#64748b" viewBox="0 0 24 24"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/></svg>
                <span>Pewność AI: {{ (ai_insights.ai_confidence_score * 100)|round(1) }}%</span>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
{% endif %}

<!-- Contact Information - Card Based -->
<div class="company-section">
    <h2 class="section-title">Dane kontaktowe</h2>

    {% set source_names = {'website': 'Strona WWW', 'krs': 'Rejestr KRS', 'google_business': 'Google Business', 'facebook': 'Facebook', 'manual': 'Wprowadzono ręcznie', 'brave_search': 'Wyszukiwarka', 'ceidg': 'CEIDG', 'norda_biznes': 'Norda Biznes', 'website_scrape': 'Strona WWW (auto)'} %}
    {% set source_colors = {'website': '#3b82f6', 'krs': '#10b981', 'google_business': '#f59e0b', 'facebook': '#1877f2', 'manual': '#6366f1', 'brave_search': '#ef4444', 'ceidg': '#10b981', 'norda_biznes': '#667eea', 'website_scrape': '#06b6d4'} %}

    {# Collect all known phones for deduplication #}
    {% set known_phones = [] %}
    {% set phones_from_contacts = contacts|selectattr('contact_type', 'equalto', 'phone')|list if contacts else [] %}
    {% for c in phones_from_contacts %}{% set _ = known_phones.append(c.value|replace(' ', '')|replace('+48', '')|replace('-', '')) %}{% endfor %}
    {% if company.phone %}{% set _ = known_phones.append(company.phone|replace(' ', '')|replace('+48', '')|replace('-', '')) %}{% endif %}

    {# Collect all known emails for deduplication #}
    {% set known_emails = [] %}
    {% set emails_from_contacts = contacts|selectattr('contact_type', 'equalto', 'email')|list if contacts else [] %}
    {% for c in emails_from_contacts %}{% set _ = known_emails.append(c.value|lower) %}{% endfor %}
    {% if company.email %}{% set _ = known_emails.append(company.email|lower) %}{% endif %}

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg);">

        <!-- Phone Cards from contacts table -->
        {% set phones = contacts|selectattr('contact_type', 'equalto', 'phone')|list if contacts else [] %}
        {% if phones %}
            {% for contact in phones %}
            <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if contact.is_primary %}#10b981{% else %}#e5e7eb{% endif %};">
                <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                    <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: {% if contact.is_primary %}#10b981{% else %}#3b82f6{% endif %}; color: white;">
                        <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
                        </svg>
                    </div>
                    <div style="flex: 1;">
                        <div style="font-weight: 600; color: var(--text-primary);">
                            Telefon{% if contact.purpose %} - {{ contact.purpose }}{% endif %}
                        </div>
                        <a href="tel:{{ contact.value }}" style="color: {% if contact.is_primary %}#10b981{% else %}#3b82f6{% endif %}; font-size: var(--font-size-lg); text-decoration: none;">
                            {{ contact.value }}
                        </a>
                    </div>
                    {% if contact.is_primary %}
                    <span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
                    {% endif %}
                </div>
                {% if contact.source %}
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                    <span style="display: inline-flex; align-items: center; gap: 4px;">
                        <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
                        Źródło: <strong style="color: {{ source_colors.get(contact.source, '#6b7280') }};">{{ source_names.get(contact.source, contact.source) }}</strong>
                    </span>
                    {% if contact.source_date %}
                    <span style="margin-left: 8px;">({{ contact.source_date.strftime('%d.%m.%Y') }})</span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% endif %}

        <!-- Additional phones from website scraping (deduplicated) -->
        {% if website_content and website_content.phone_numbers %}
            {% for phone in website_content.phone_numbers %}
                {% set phone_normalized = phone|replace(' ', '')|replace('+48', '')|replace('-', '') %}
                {% if phone_normalized not in known_phones %}
                <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
                    <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                        <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
                            <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
                            </svg>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 600; color: var(--text-primary);">Telefon</div>
                            <a href="tel:{{ phone }}" style="color: #06b6d4; font-size: var(--font-size-lg); text-decoration: none;">{{ phone }}</a>
                        </div>
                    </div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                        Źródło: <strong style="color: #06b6d4;">Strona WWW (auto)</strong>
                        {% if website_content.scraped_at %}
                        <span style="margin-left: 8px;">({{ website_content.scraped_at.strftime('%d.%m.%Y') }})</span>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        {% endif %}

        <!-- Fallback: Phone from company record (if not in contacts) -->
        {% if company.phone %}
            {% set phone_normalized = company.phone|replace(' ', '')|replace('+48', '')|replace('-', '') %}
            {% set phone_in_contacts = phones_from_contacts|selectattr('value', 'search', phone_normalized)|list|length > 0 if phones_from_contacts else false %}
            {% if not phone_in_contacts %}
            <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
                <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                    <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
                        <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
                        </svg>
                    </div>
                    <div style="flex: 1;">
                        <div style="font-weight: 600; color: var(--text-primary);">Telefon</div>
                        <a href="tel:{{ company.phone }}" style="color: #10b981; font-size: var(--font-size-lg); text-decoration: none;">
                            {{ company.phone }}
                        </a>
                    </div>
                    <span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
                </div>
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                    Źródło: <strong style="color: #667eea;">Dane firmy</strong>
                </div>
            </div>
            {% endif %}
        {% endif %}

        <!-- Email Cards from contacts table -->
        {% set emails = contacts|selectattr('contact_type', 'equalto', 'email')|list if contacts else [] %}
        {% if emails %}
            {% for contact in emails %}
            <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if contact.is_primary %}#10b981{% else %}#e5e7eb{% endif %};">
                <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                    <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: {% if contact.is_primary %}#10b981{% else %}#ef4444{% endif %}; color: white;">
                        <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                        </svg>
                    </div>
                    <div style="flex: 1; overflow: hidden;">
                        <div style="font-weight: 600; color: var(--text-primary);">
                            Email{% if contact.purpose %} - {{ contact.purpose }}{% endif %}
                        </div>
                        <a href="mailto:{{ contact.value }}" style="color: {% if contact.is_primary %}#10b981{% else %}#ef4444{% endif %}; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">
                            {{ contact.value }}
                        </a>
                    </div>
                    {% if contact.is_primary %}
                    <span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
                    {% endif %}
                </div>
                {% if contact.source %}
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                    <span style="display: inline-flex; align-items: center; gap: 4px;">
                        <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
                        Źródło: <strong style="color: {{ source_colors.get(contact.source, '#6b7280') }};">{{ source_names.get(contact.source, contact.source) }}</strong>
                    </span>
                    {% if contact.source_date %}
                    <span style="margin-left: 8px;">({{ contact.source_date.strftime('%d.%m.%Y') }})</span>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        {% endif %}

        <!-- Additional emails from website scraping (deduplicated) -->
        {% if website_content and website_content.email_addresses %}
            {% for email in website_content.email_addresses %}
                {% if email|lower not in known_emails %}
                <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
                    <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                        <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
                            <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                            </svg>
                        </div>
                        <div style="flex: 1; overflow: hidden;">
                            <div style="font-weight: 600; color: var(--text-primary);">Email</div>
                            <a href="mailto:{{ email }}" style="color: #06b6d4; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">{{ email }}</a>
                        </div>
                    </div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                        Źródło: <strong style="color: #06b6d4;">Strona WWW (auto)</strong>
                        {% if website_content.scraped_at %}
                        <span style="margin-left: 8px;">({{ website_content.scraped_at.strftime('%d.%m.%Y') }})</span>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        {% endif %}

        <!-- Fallback: Email from company record (if not in contacts) -->
        {% if company.email %}
            {% set email_in_contacts = emails_from_contacts|selectattr('value', 'equalto', company.email)|list|length > 0 if emails_from_contacts else false %}
            {% if not email_in_contacts %}
            <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981;">
                <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                    <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
                        <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                        </svg>
                    </div>
                    <div style="flex: 1; overflow: hidden;">
                        <div style="font-weight: 600; color: var(--text-primary);">Email</div>
                        <a href="mailto:{{ company.email }}" style="color: #10b981; font-size: var(--font-size-base); text-decoration: none; word-break: break-all;">
                            {{ company.email }}
                        </a>
                    </div>
                    <span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">GŁÓWNY</span>
                </div>
                <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                    Źródło: <strong style="color: #667eea;">Dane firmy</strong>
                </div>
            </div>
            {% endif %}
        {% endif %}

        <!-- Address Card (full address - header only shows city) -->
        {% if company.address_full or company.address_street %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #8b5cf6;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #8b5cf6; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-weight: 600; color: var(--text-primary);">Adres siedziby</div>
                    <div style="color: #8b5cf6; font-size: var(--font-size-base);">
                        {% if company.address_full %}
                            {{ company.address_full }}
                        {% else %}
                            {{ company.address_street }}, {{ company.address_postal }} {{ company.address_city }}
                        {% endif %}
                    </div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
            </div>
        </div>
        {% endif %}

    </div>
</div>

<!-- Legal & Business Info - Card Based -->
<div class="company-section">
    <h2 class="section-title">Informacje prawne i biznesowe</h2>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg);">

        <!-- Legal Name Card (full width) -->
        {% if company.legal_name %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #10b981; grid-column: span 2;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/>
                    </svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Pełna nazwa prawna</div>
                    <div style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary);">{{ company.legal_name }}</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
            </div>
        </div>
        {% endif %}

        <!-- Legal Form Card -->
        {# Determine legal form from database or infer from name/KRS #}
        {% set legal_form = company.legal_form %}
        {% if not legal_form %}
            {% if 'sp. z o.o' in company.name|lower or 'spółka z ograniczoną odpowiedzialnością' in company.name|lower %}
                {% set legal_form = 'Spółka z ograniczoną odpowiedzialnością (sp. z o.o.)' %}
            {% elif 's.a.' in company.name|lower or 'spółka akcyjna' in company.name|lower %}
                {% set legal_form = 'Spółka akcyjna (S.A.)' %}
            {% elif 'sp.j.' in company.name|lower or 'spółka jawna' in company.name|lower %}
                {% set legal_form = 'Spółka jawna (sp.j.)' %}
            {% elif 'sp.k.' in company.name|lower or 'spółka komandytowa' in company.name|lower %}
                {% set legal_form = 'Spółka komandytowa (sp.k.)' %}
            {% elif 'sp.p.' in company.name|lower or 'spółka partnerska' in company.name|lower %}
                {% set legal_form = 'Spółka partnerska (sp.p.)' %}
            {% elif company.krs %}
                {% set legal_form = 'Spółka prawa handlowego' %}
            {% else %}
                {% set legal_form = 'Jednoosobowa działalność gospodarcza (JDG)' %}
            {% endif %}
        {% endif %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Forma prawna</div>
                    <div style="font-size: var(--font-size-lg); font-weight: 600; color: #06b6d4;">{{ legal_form }}</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                {% if company.legal_form %}
                Źródło: <strong style="color: #10b981;">Dane zweryfikowane</strong>
                {% elif company.krs %}
                Źródło: <strong style="color: #f59e0b;">Ustalono z KRS/nazwy</strong>
                {% else %}
                Źródło: <strong style="color: #f59e0b;">Ustalono automatycznie</strong>
                {% endif %}
            </div>
        </div>

        <!-- NIP Card -->
        {% if company.nip %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #3b82f6;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">NIP</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #3b82f6; font-family: monospace;">{{ company.nip[:3] }}-{{ company.nip[3:6] }}-{{ company.nip[6:8] }}-{{ company.nip[8:] }}</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
            </div>
        </div>
        {% endif %}

        <!-- REGON Card -->
        {% if company.regon %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #8b5cf6;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #8b5cf6; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">REGON</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #8b5cf6; font-family: monospace;">{{ company.regon }}</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">GUS REGON</strong>
            </div>
        </div>
        {% endif %}

        <!-- KRS Card -->
        {% if company.krs %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #ef4444;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ef4444; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">KRS</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #ef4444; font-family: monospace;">{{ company.krs }}</div>
                </div>
                <div style="margin-left: auto;">
                    <a href="https://rejestr.io/krs/{{ company.krs|int }}" target="_blank" rel="noopener noreferrer"
                       style="padding: 8px 16px; background: #10b981; color: white; border-radius: var(--radius); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;"
                       title="Powiązania osobowe, władze, beneficjenci, pomoc publiczna">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
                        Sprawdź w rejestr.io
                    </a>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">Krajowy Rejestr Sądowy</strong>
            </div>
        </div>
        {% else %}
        <!-- Search in registries for companies without KRS -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px dashed #94a3b8;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap;">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #94a3b8; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Szukaj w rejestrach</div>
                    <div style="font-size: var(--font-size-base); color: var(--text-secondary);">Firma bez KRS - wyszukaj po NIP</div>
                </div>
                <div style="margin-left: auto;">
                    <a href="https://rejestr.io/szukaj?q={{ company.nip }}" target="_blank" rel="noopener noreferrer"
                       style="padding: 8px 16px; background: #10b981; color: white; border-radius: var(--radius); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;"
                       title="Szukaj firmy po NIP w rejestr.io">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                        Szukaj w rejestr.io
                    </a>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Year Established Card -->
        {% if company.year_established %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #f59e0b;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f59e0b; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Rok założenia</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #f59e0b;">{{ company.year_established }}</div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary);">{{ 2025 - company.year_established }} lat na rynku</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
            </div>
        </div>
        {% endif %}

        <!-- Employees Count Card -->
        {% if company.employees_count or company.employee_count_range %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #06b6d4;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #06b6d4; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Liczba pracowników</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #06b6d4;">
                        {% if company.employees_count %}{{ company.employees_count }}{% else %}{{ company.employee_count_range }}{% endif %}
                    </div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #667eea;">Dane deklarowane</strong>
            </div>
        </div>
        {% endif %}

        <!-- Capital Card -->
        {% if company.capital_amount %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #22c55e;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #22c55e; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Kapitał zakładowy</div>
                    <div style="font-size: var(--font-size-xl); font-weight: 700; color: #22c55e;">{{ '{:,.2f}'.format(company.capital_amount).replace(',', ' ') }} PLN</div>
                </div>
            </div>
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px; margin-top: var(--spacing-sm);">
                Źródło: <strong style="color: #10b981;">Rejestr KRS</strong>
            </div>
        </div>
        {% endif %}

    </div>
</div>

<!-- Social Media Section - Always show all platforms -->
<div class="company-section">
    <h2 class="section-title">Social Media</h2>

    {% set platforms = ['facebook', 'instagram', 'youtube', 'linkedin', 'tiktok', 'twitter'] %}
    {% set platform_names = {'facebook': 'Facebook', 'instagram': 'Instagram', 'youtube': 'YouTube', 'linkedin': 'LinkedIn', 'tiktok': 'TikTok', 'twitter': 'X (Twitter)'} %}
    {% set platform_colors = {'facebook': '#1877f2', 'instagram': '#E4405F', 'youtube': '#ff0000', 'linkedin': '#0a66c2', 'tiktok': '#000000', 'twitter': '#000000'} %}

    <!-- Convert social_media list to dict for easy lookup -->
    {% set sm_dict = {} %}
    {% if social_media %}
        {% for sm in social_media %}
            {% set _ = sm_dict.update({sm.platform: sm}) %}
        {% endfor %}
    {% endif %}

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg);">
        {% for platform in platforms %}
        {% set sm = sm_dict.get(platform) %}

        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if sm %}{{ platform_colors[platform] }}{% else %}#e5e7eb{% endif %};">
            <!-- Platform Header -->
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <!-- Icon -->
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if sm %}{{ platform_colors[platform] }}{% else %}#f3f4f6{% endif %}; color: {% if sm %}white{% else %}#9ca3af{% endif %};">
                    {% if platform == 'facebook' %}
                    <svg width="24" height="24" fill="currentColor" 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>
                    {% elif platform == 'instagram' %}
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                    {% elif platform == 'youtube' %}
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><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>
                    {% elif platform == 'linkedin' %}
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
                    {% elif platform == 'tiktok' %}
                    <svg width="24" height="24" fill="currentColor" 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>
                    {% elif platform == 'twitter' %}
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    {% endif %}
                </div>

                <!-- Platform Name & Status -->
                <div style="flex: 1;">
                    <div style="font-weight: 600; font-size: var(--font-size-lg); color: var(--text-primary);">
                        {{ platform_names[platform] }}
                    </div>
                    {% if sm %}
                    <div style="color: var(--success, #10b981); font-size: var(--font-size-sm); display: flex; align-items: center; gap: 4px;">
                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        Aktywny profil
                    </div>
                    {% else %}
                    <div style="color: #dc2626; font-size: var(--font-size-sm); display: flex; align-items: center; gap: 4px;">
                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                        Brak profilu
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if sm %}
            <!-- Profile Details -->
            <div style="background: white; border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md);">
                {% if sm.page_name %}
                <div style="margin-bottom: var(--spacing-sm);">
                    <span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Nazwa profilu:</span>
                    <div style="font-weight: 500; color: var(--text-primary);">{{ sm.page_name }}</div>
                </div>
                {% endif %}

                <div style="margin-bottom: var(--spacing-sm);">
                    <span style="font-size: var(--font-size-sm); color: var(--text-secondary);">Link:</span>
                    <div style="font-size: var(--font-size-sm); word-break: break-all;">
                        <a href="{{ sm.url }}" target="_blank" rel="noopener noreferrer" style="color: {{ platform_colors[platform] }}; text-decoration: none;">
                            {{ sm.url|replace('https://', '')|replace('http://', '')|truncate(40) }}
                        </a>
                    </div>
                </div>

                {% if sm.followers_count %}
                <div style="display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border);">
                    <div style="text-align: center;">
                        <div style="font-size: var(--font-size-xl); font-weight: 700; color: {{ platform_colors[platform] }};">
                            {{ sm.followers_count|default(0) }}
                        </div>
                        <div style="font-size: var(--font-size-xs); color: var(--text-secondary);">
                            {% if platform == 'youtube' %}Subskrybentów{% else %}Obserwujących{% endif %}
                        </div>
                    </div>
                    {% if sm.total_posts %}
                    <div style="text-align: center;">
                        <div style="font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary);">
                            {{ sm.total_posts }}
                        </div>
                        <div style="font-size: var(--font-size-xs); color: var(--text-secondary);">
                            {% if platform == 'youtube' %}Filmów{% else %}Postów{% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>

            <!-- Visit Button -->
            <a href="{{ sm.url }}" target="_blank" rel="noopener noreferrer"
               style="display: block; text-align: center; padding: var(--spacing-sm) var(--spacing-md);
                      background: {{ platform_colors[platform] }}; color: white; border-radius: var(--radius);
                      text-decoration: none; font-weight: 500; font-size: var(--font-size-sm);
                      transition: opacity 0.2s;">
                Odwiedź profil
            </a>
            {% else %}
            <!-- No Profile Message -->
            <div style="text-align: center; padding: var(--spacing-lg); color: var(--text-secondary);">
                <div style="font-size: 48px; margin-bottom: var(--spacing-sm); opacity: 0.3;">
                    <svg width="48" height="48" fill="currentColor" viewBox="0 0 20 20" style="color: #dc2626;"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </div>
                <div style="font-size: var(--font-size-sm);">
                    Firma nie posiada profilu na {{ platform_names[platform] }}
                </div>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<!-- Unified Website Section -->
{% if company.website and website_analysis %}
<div class="company-section">
    <h2 class="section-title">Strona WWW</h2>

    <!-- Website URL - prominent display -->
    <div style="margin-bottom: var(--spacing-lg); padding: var(--spacing-lg); background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-md);">
        <div style="width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
            <svg width="28" height="28" fill="white" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"/>
                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" fill="none" stroke="white" stroke-width="2"/>
            </svg>
        </div>
        <div style="flex: 1;">
            <div style="font-size: var(--font-size-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px;">Adres strony</div>
            <a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
               style="font-size: var(--font-size-xl); font-weight: 600; color: white; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-sm);">
                {{ company.website|replace('https://', '')|replace('http://', '')|replace('www.', '') }}
                <svg width="20" height="20" fill="white" viewBox="0 0 24 24" style="opacity: 0.8;">
                    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
                </svg>
            </a>
        </div>
        <a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
           style="padding: var(--spacing-sm) var(--spacing-lg); background: white; color: #1d4ed8; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);">
            Odwiedź stronę
        </a>
    </div>

    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);">

        <!-- SSL Certificate Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.has_ssl %}#10b981{% else %}#dc2626{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.has_ssl %}#10b981{% else %}#dc2626{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Certyfikat SSL</div>
                    {% if website_analysis.has_ssl %}
                    <div style="color: #10b981; font-size: var(--font-size-sm);">Aktywny</div>
                    {% else %}
                    <div style="color: #dc2626; font-size: var(--font-size-sm);">Brak</div>
                    {% endif %}
                </div>
            </div>
            {% if website_analysis.has_ssl %}
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                {% if website_analysis.ssl_issuer %}
                <div style="margin-bottom: 2px;">Wystawca: <strong>{{ website_analysis.ssl_issuer }}</strong></div>
                {% endif %}
                {% if website_analysis.ssl_expires_at %}
                <div>Ważny do {{ website_analysis.ssl_expires_at.strftime('%d.%m.%Y') }}</div>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Mobile Responsive Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.is_mobile_friendly %}#10b981{% else %}#f59e0b{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.is_mobile_friendly %}#10b981{% else %}#f59e0b{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Wersja mobilna</div>
                    {% if website_analysis.is_mobile_friendly %}
                    <div style="color: #10b981; font-size: var(--font-size-sm);">Responsywna</div>
                    {% else %}
                    <div style="color: #f59e0b; font-size: var(--font-size-sm);">Brak</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Load Time Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.load_time_ms and website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 4000 %}#f59e0b{% elif website_analysis.load_time_ms %}#dc2626{% else %}#e5e7eb{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.load_time_ms and website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms and website_analysis.load_time_ms < 4000 %}#f59e0b{% elif website_analysis.load_time_ms %}#dc2626{% else %}#9ca3af{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Czas ładowania</div>
                    {% if website_analysis.load_time_ms %}
                    <div style="color: {% if website_analysis.load_time_ms < 1000 %}#10b981{% elif website_analysis.load_time_ms < 2000 %}#22c55e{% elif website_analysis.load_time_ms < 3000 %}#84cc16{% elif website_analysis.load_time_ms < 4000 %}#f59e0b{% else %}#dc2626{% endif %}; font-size: var(--font-size-sm);">
                        {{ (website_analysis.load_time_ms / 1000)|round(2) }}s
                    </div>
                    {% else %}
                    <div style="color: #9ca3af; font-size: var(--font-size-sm);">Brak danych</div>
                    {% endif %}
                </div>
            </div>
            {% if website_analysis.load_time_ms %}
            <div style="font-size: var(--font-size-sm); color: var(--text-secondary); padding-left: 60px;">
                {% if website_analysis.load_time_ms < 500 %}
                <span style="color: #10b981;">Doskonały</span> - błyskawicznie
                {% elif website_analysis.load_time_ms < 1000 %}
                <span style="color: #10b981;">Bardzo dobry</span> - poniżej 1s
                {% elif website_analysis.load_time_ms < 2000 %}
                <span style="color: #22c55e;">Dobry</span> - akceptowalny
                {% elif website_analysis.load_time_ms < 3000 %}
                <span style="color: #84cc16;">Przeciętny</span> - do poprawy
                {% elif website_analysis.load_time_ms < 4000 %}
                <span style="color: #f59e0b;">Wolny</span> - wymaga optymalizacji
                {% else %}
                <span style="color: #dc2626;">Bardzo wolny</span> - krytyczny
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- CMS/Technology Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.cms_detected %}#10b981{% else %}#e5e7eb{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.cms_detected %}#10b981{% else %}#9ca3af{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Technologia / CMS</div>
                    {% if website_analysis.cms_detected %}
                    <div style="color: #10b981; font-size: var(--font-size-sm);">{{ website_analysis.cms_detected }}</div>
                    {% else %}
                    <div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Hosting Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.hosting_provider %}#3b82f6{% else %}#e5e7eb{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.hosting_provider %}#3b82f6{% else %}#9ca3af{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M2 9h20v12H2V9zm2 2v8h16v-8H4zm6 2h4v4h-4v-4zM2 3h20v4H2V3z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Hosting</div>
                    {% if website_analysis.hosting_provider %}
                    <div style="color: #3b82f6; font-size: var(--font-size-sm);">{{ website_analysis.hosting_provider }}</div>
                    {% else %}
                    <div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Server Card -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.server_software %}#8b5cf6{% else %}#e5e7eb{% endif %};">
            <div style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.server_software %}#8b5cf6{% else %}#9ca3af{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Serwer</div>
                    {% if website_analysis.server_software %}
                    <div style="color: #8b5cf6; font-size: var(--font-size-sm);">{{ website_analysis.server_software }}</div>
                    {% else %}
                    <div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Website Author Card - Full Width -->
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid {% if website_analysis.site_author %}#6366f1{% else %}#e5e7eb{% endif %}; grid-column: span 2;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: {% if website_analysis.site_author %}#6366f1{% else %}#9ca3af{% endif %}; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-weight: 600; color: var(--text-primary);">Wykonawca strony</div>
                    {% if website_analysis.site_author %}
                    <div style="color: #6366f1; font-size: var(--font-size-sm);">{{ website_analysis.site_author }}</div>
                    {% else %}
                    <div style="color: #9ca3af; font-size: var(--font-size-sm);">Nieznany</div>
                    {% endif %}
                </div>
                {% if website_analysis.site_author %}
                {# Extract domain from site_author - look for word containing .pl/.com/.eu #}
                {% set author_text = website_analysis.site_author %}
                {% set extracted_domain = namespace(value='') %}
                {% for word in author_text.replace('/', ' ').replace('–', ' ').replace('-', ' ').replace(',', ' ').split() %}
                    {% set word_lower = word|lower|trim %}
                    {% if extracted_domain.value == '' and (word_lower.endswith('.pl') or word_lower.endswith('.com') or word_lower.endswith('.eu') or word_lower.endswith('.net') or word_lower.endswith('.org')) %}
                        {% set extracted_domain.value = word_lower %}
                    {% endif %}
                {% endfor %}
                {% if extracted_domain.value %}
                {% set author_url = 'https://' ~ extracted_domain.value %}
                <a href="{{ author_url }}" target="_blank" rel="noopener noreferrer"
                   style="padding: var(--spacing-xs) var(--spacing-md); background: #6366f1; color: white; border-radius: var(--radius);
                          text-decoration: none; font-size: var(--font-size-sm); white-space: nowrap;">
                    Odwiedź
                </a>
                {% endif %}
                {% endif %}
            </div>
        </div>

        <!-- Google Rating Card -->
        {% if website_analysis.google_rating %}
        <div style="background: var(--background); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 2px solid #f59e0b;">
            <div style="display: flex; align-items: center; gap: var(--spacing-md);">
                <div style="width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
                            background: #f59e0b; color: white;">
                    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight: 600; color: var(--text-primary);">Ocena Google</div>
                    <div style="color: #f59e0b; font-size: var(--font-size-sm);">
                        {{ website_analysis.google_rating }}/5
                        {% if website_analysis.google_reviews_count %}({{ website_analysis.google_reviews_count }} opinii){% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

    </div>

    <!-- Website Features -->
    {% if website_analysis.has_blog or website_analysis.has_portfolio or website_analysis.has_contact_form or website_analysis.has_live_chat or website_analysis.has_google_analytics %}
    <div style="margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--border);">
        <h3 style="font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md);">
            Funkcje strony
        </h3>
        <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-sm);">
            {% if website_analysis.has_blog %}
            <span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Blog</span>
            {% endif %}
            {% if website_analysis.has_portfolio %}
            <span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Portfolio</span>
            {% endif %}
            {% if website_analysis.has_contact_form %}
            <span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Formularz kontaktowy</span>
            {% endif %}
            {% if website_analysis.has_live_chat %}
            <span style="padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 20px; font-size: var(--font-size-sm);">Live Chat</span>
            {% endif %}
            {% if website_analysis.has_google_analytics %}
            <span style="padding: 6px 12px; background: #dbeafe; color: #1e40af; border-radius: 20px; font-size: var(--font-size-sm);">Google Analytics</span>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Last Modified -->
    {% if website_analysis.last_modified_at %}
    <div style="margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary); text-align: right;">
        Ostatnia modyfikacja: {{ website_analysis.last_modified_at.strftime('%d.%m.%Y %H:%M') }}
    </div>
    {% endif %}
</div>
{% elif company.website %}
<!-- Website URL only (no analysis yet) -->
<div class="company-section">
    <h2 class="section-title">Strona WWW</h2>
    <div style="padding: var(--spacing-lg); background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--spacing-md);">
        <div style="width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
            <svg width="28" height="28" fill="white" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"/>
                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" fill="none" stroke="white" stroke-width="2"/>
            </svg>
        </div>
        <div style="flex: 1;">
            <div style="font-size: var(--font-size-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px;">Adres strony</div>
            <a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
               style="font-size: var(--font-size-xl); font-weight: 600; color: white; text-decoration: none; display: flex; align-items: center; gap: var(--spacing-sm);">
                {{ company.website|replace('https://', '')|replace('http://', '')|replace('www.', '') }}
                <svg width="20" height="20" fill="white" viewBox="0 0 24 24" style="opacity: 0.8;">
                    <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
                </svg>
            </a>
        </div>
        <a href="{{ company.website|ensure_url }}" target="_blank" rel="noopener noreferrer"
           style="padding: var(--spacing-sm) var(--spacing-lg); background: white; color: #1d4ed8; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);">
            Odwiedź stronę
        </a>
    </div>
</div>
{% else %}
<!-- No Website Section -->
<div class="company-section">
    <h2 class="section-title">Strona WWW</h2>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xl); text-align: center;">
        <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-lg);">
            <svg width="40" height="40" fill="none" stroke="#9ca3af" stroke-width="2" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10"/>
                <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                <line x1="4" y1="4" x2="20" y2="20" stroke="#dc2626" stroke-width="2.5"/>
            </svg>
        </div>
        <div style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--spacing-sm);">
            Brak strony internetowej
        </div>
        <div style="font-size: var(--font-size-sm); color: var(--text-secondary); max-width: 400px; line-height: 1.6;">
            Ta firma nie posiada jeszcze strony internetowej lub jej adres nie jest znany.
            {% if company.phone or company.email %}
            Skontaktuj się bezpośrednio używając danych kontaktowych podanych powyżej.
            {% endif %}
        </div>
        <div style="margin-top: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); background: #fef3c7; border-radius: var(--radius); border: 1px solid #f59e0b;">
            <div style="display: flex; align-items: center; gap: var(--spacing-sm); color: #92400e; font-size: var(--font-size-sm);">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
                <span>Jeśli znasz adres strony tej firmy, poinformuj nas przez formularz kontaktowy.</span>
            </div>
        </div>
    </div>
</div>
{% endif %}


<!-- Company Events -->
{% if events %}
<div class="company-section">
    <h2 class="section-title">
        Aktualności i wydarzenia
        <a href="{{ url_for('events', company=company.id) }}" style="float: right; font-size: var(--font-size-sm); color: var(--primary); text-decoration: none; font-weight: normal;">
            Zobacz wszystkie →
        </a>
    </h2>

    {% for event in events %}
    <div style="padding: var(--spacing-lg); background: var(--background); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md); {% if loop.last %}margin-bottom: 0;{% endif %}">
        <div style="margin-bottom: var(--spacing-sm);">
            <span class="tag {% if event.event_type == 'product_launch' %}primary{% endif %}" style="font-size: var(--font-size-sm);">
                {% if event.event_type == 'product_launch' %}📦 Nowy produkt{% endif %}
                {% if event.event_type == 'company_milestone' %}🏆 Kamień milowy{% endif %}
                {% if event.event_type == 'company_news' %}📰 Aktualność{% endif %}
                {% if event.event_type == 'education_event' %}🎓 Szkolenie{% endif %}
                {% if event.event_type == 'company_info' %}ℹ️ Informacja{% endif %}
                {% if event.event_type == 'financial_report' %}💰 Raport finansowy{% endif %}
                {% if event.event_type == 'contract_win' %}🤝 Nowy kontrakt{% endif %}
                {% if event.event_type == 'event' %}📅 Wydarzenie{% endif %}
            </span>
        </div>

        <h3 style="font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-sm);">
            {{ event.title }}
        </h3>

        <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--spacing-md);">
            {{ event.description|truncate(200) if event.description|length > 200 else event.description }}
        </p>

        <div style="display: flex; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary);">
            {% if event.event_date %}
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="2" y="3" width="12" height="12" rx="2"/>
                    <path d="M2 7h12M6 3v2M10 3v2"/>
                </svg>
                {{ event.event_date.strftime('%d.%m.%Y') }}
            </div>
            {% endif %}

            {% if event.source_url %}
            <div style="display: flex; align-items: center; gap: var(--spacing-xs);">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8 2l4 4-4 4M2 6h10"/>
                </svg>
                <a href="{{ event.source_url }}" target="_blank" rel="noopener noreferrer" style="color: var(--primary); text-decoration: none;">
                    Źródło
                </a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}
