<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Investor Profile Report</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            @page {
                size: A4;
                margin: 0;
            }

            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                background: white;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, sans-serif;
            }

            /* Each page is exactly one A4 sheet */
            .page {
                width: 210mm;
                height: 297mm;
                position: relative;
                background: white;
                overflow: hidden;
            }

            /* Adds a break between pages (for print/PDF) */
            .page-with-break {
                page-break-after: always;
            }

            /* Inner content wrapper for consistent padding */
            .page-content {
                box-sizing: border-box;
                padding: 48px; /* equivalent to Tailwind p-12 */
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .tag {
                display: inline-block;
                padding: 4px 12px;
                background: #f3f4f6;
                border-radius: 4px;
                font-size: 12px;
                margin: 4px;
            }

            /* Ensure the footer text stays inside page bounds */
            .page-footer {
                position: absolute;
                bottom: 48px;
                right: 48px;
                font-size: 10px;
                color: #9ca3af; /* Tailwind gray-400 */
            }
        </style>
    </head>
    <body>
        <!-- Page 1 -->
        <div class="page page-with-break">
            <div class="page-content">
                <div class="flex justify-between items-start mb-8">
                    <div>
                        <p class="text-sm text-gray-600 mb-2">Investor Profile</p>
                        <h1 class="text-4xl font-bold text-gray-900">
                            {{ investor.name }}
                        </h1>
                    </div>
                    <a
                        href="{{ investor.website }}"
                        target="_blank"
                        class="bg-gray-200 text-gray-700 px-4 py-2 rounded text-sm no-underline"
                        >Visit Website →</a
                    >
                </div>

                <div class="grid grid-cols-2 gap-8 flex-grow">
                    <!-- Left Column -->
                    <div>
                        <div class="mb-4">
                            <h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
                                Investor Description
                            </h2>
                            <p class="text-sm text-gray-700 leading-relaxed">
                                {{ investor.description or 'No description available.' }}
                            </p>
                        </div>

                        <div class="mb-4">
                            <h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
                                Portfolio Highlights
                            </h2>
                            <div class="flex flex-wrap gap-2">
                                {% if investor.portfolio_highlights %}
                                {% for company in investor.portfolio_highlights[:5] %}
                                <span class="tag">{{ company }}</span>
                                {% endfor %}
                                {% else %}
                                <p class="text-sm text-gray-500">
                                    No portfolio highlights available
                                </p>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-4">
                            <h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
                                Senior Leadership
                            </h2>
                            {% if investor.team_members %}
                            {% for member in investor.team_members[:2] %}
                            <div class="mb-3">
                                <p class="text-sm font-semibold text-gray-900">
                                    {{ member.name }}
                                </p>
                                <p class="text-sm text-gray-600">
                                    {{ member.role or member.title or 'Team Member' }}
                                </p>
                                {% if member.email %}
                                <p class="text-xs text-blue-600">
                                    {{ member.email }}
                                </p>
                                {% endif %}
                            </div>
                            {% endfor %}
                            {% else %}
                            <p class="text-sm text-gray-500">No team information available</p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
                            Key Data
                        </h2>
                        <div class="space-y-3 text-sm">
                            <div>
                                <p class="text-xs text-gray-600">Headquarters:</p>
                                <p class="font-semibold text-gray-900">
                                    {{ investor.headquarters or 'N/A' }}
                                </p>
                            </div>

                            <div>
                                <p class="text-xs text-gray-600">Sectors:</p>
                                <p class="font-semibold text-gray-900">
                                    {% if investor.sectors %}
                                    {{ investor.sectors | join(', ') }}
                                    {% else %}
                                    N/A
                                    {% endif %}
                                </p>
                            </div>

                            <div>
                                <p class="text-xs text-gray-600">AUM (EUR million):</p>
                                <p class="font-semibold text-gray-900">
                                    {% if investor.aum %}
                                    €{{ '{:,.0f}'.format(investor.aum / 1000000) }}M
                                    {% else %}
                                    N/A
                                    {% endif %}
                                </p>
                            </div>

                            <div>
                                <p class="text-xs text-gray-600 mb-1">Number of Funds:</p>
                                <p class="font-semibold text-gray-900">
                                    {{ investor.funds | length if investor.funds else 'N/A' }}
                                </p>
                            </div>
                        </div>

                        <div class="mt-4">
                            <h3 class="text-xs font-bold text-gray-900 uppercase mb-2">
                                Fund Details
                            </h3>
                            {% if investor.funds %}
                            {% for fund in investor.funds %}
                            <div class="mb-3 pb-3 border-b border-gray-200">
                                <p class="text-sm font-semibold text-gray-900 mb-1">
                                    {{ fund.fund_name or 'Fund ' + loop.index|string }}
                                </p>
                                <div class="text-xs text-gray-700 space-y-1">
                                    {% if fund.fund_size %}
                                    <p>Fund Size: €{{ '{:,.0f}'.format(fund.fund_size / 1000000) }}M</p>
                                    {% endif %}
                                    {% if fund.check_size_lower and fund.check_size_upper %}
                                    <p>Check Size: €{{ '{:,.0f}'.format(fund.check_size_lower / 1000000) }}M - €{{ '{:,.0f}'.format(fund.check_size_upper / 1000000) }}M</p>
                                    {% endif %}
                                    {% if fund.geographic_focus %}
                                    <p>Geography: {{ fund.geographic_focus }}</p>
                                    {% endif %}
                                    {% if fund.investment_stages %}
                                    <p>Stages: {{ fund.investment_stages | join(', ') }}</p>
                                    {% endif %}
                                    {% if fund.sectors %}
                                    <p>Sectors: {{ fund.sectors[:3] | join(', ') }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                            {% else %}
                            <p class="text-xs text-gray-500">No fund information available</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="page-footer">Page 1</div>
            </div>
        </div>

        <!-- Page 2 -->
        {% if project %}
        <div class="page">
            <div class="page-content">
                <h1 class="text-3xl font-bold text-gray-900 mb-8">
                    {{ investor.name }}: Mandate Match Analysis
                </h1>

            <!-- Overall Match Circle -->
            <div class="flex justify-center mb-12">
                <div class="text-center">
                    <p class="text-sm font-bold text-gray-700 uppercase mb-4">
                        Overall Mandate Match
                    </p>
                    <div
                        class="w-48 h-48 rounded-full border-8 border-green-400 flex items-center justify-center bg-green-50 mx-auto"
                    >
                        <span class="text-5xl font-bold text-green-600"
                            >{{ compatibility_score }}%</span
                        >
                    </div>
                </div>
            </div>

            <!-- Mandate Alignment Analysis Table -->
            <div class="mb-12">
                <h2 class="text-xl font-bold text-gray-900 mb-6">
                    Mandate Alignment Analysis
                </h2>
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="border-b-2 border-gray-300">
                            <th
                                class="text-left py-3 px-4 text-sm font-bold text-gray-700"
                            >
                                Criterion
                            </th>
                            <th
                                class="text-left py-3 px-4 text-sm font-bold text-gray-700"
                            >
                                Mandate Requirement
                            </th>
                            <th
                                class="text-left py-3 px-4 text-sm font-bold text-gray-700"
                            >
                                Investor Evidence (from Database)
                            </th>
                            <th
                                class="text-left py-3 px-4 text-sm font-bold text-gray-700"
                            >
                                Match Score
                            </th>
                            <th
                                class="text-left py-3 px-4 text-sm font-bold text-gray-700"
                            >
                                Weight
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for criterion in match_criteria %}
                        <tr class="border-b border-gray-200">
                            <td class="py-4 px-4 text-sm text-gray-900">
                                {{ criterion.name }}
                            </td>
                            <td class="py-4 px-4 text-sm text-gray-700">
                                {{ criterion.requirement }}
                            </td>
                            <td class="py-4 px-4 text-sm text-gray-700">
                                {{ criterion.evidence }}
                            </td>
                            <td class="py-4 px-4 text-sm">
                                <span
                                    class="{% if criterion.match == 'Perfect' %}text-green-600{% elif criterion.match == 'Strong' %}text-blue-600{% else %}text-yellow-600{% endif %} font-semibold"
                                >
                                    {{ criterion.match }}
                                </span>
                            </td>
                            <td class="py-4 px-4 text-sm text-gray-700">
                                {{ criterion.weight }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Final Recommendation -->
            <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded">
                <h3 class="text-lg font-bold text-gray-900 mb-3">
                    Final Recommendation & Rationale
                </h3>
                <p class="text-sm text-gray-700 leading-relaxed">
                    {{ recommendation or "High Priority. A strong target due to
                    exceptional alignment on the most heavily-weighted criteria:
                    Sector and Stage. The strong geographic fit in the DACH
                    region further solidifies this recommendation." }}
                </p>
            </div>

            <div class="absolute bottom-12 right-12 text-xs text-gray-400">
                Page 2
            </div>
        </div>
        {% endif %}
    </body>
</html>
