<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Architectuur Rapport - <%= answers.company_name || 'Mek-Tech Consultancy' %></title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/dynamic.css">
  <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
</head>
<body>
  <div class="container">
    <header class="report-header">
      <div class="report-org">
        <img src="/img/logo.svg" style="height:48px;width:auto;margin-bottom:.25rem" alt="Mek-Tech">
        <h1>Mek-Tech</h1>
        <p>AI Consultancy & Forward Engineering</p>
      </div>
      <div class="report-title-block">
        <h2>Datacenter & AI Architectuur Rapport</h2>
        <p class="report-client">Opgesteld voor: <strong><%= answers.company_name %></strong></p>
        <p class="report-date"><%= new Date().toLocaleDateString('nl-NL', { year: 'numeric', month: 'long', day: 'numeric' }) %></p>
      </div>
    </header>

    <section class="section">
      <h3 class="section-title">1. Huidige Situatie Analyse</h3>
      <div class="card">
        <table class="info-table">
          <tr><td><strong>Bedrijf</strong></td><td><%= answers.company_name %></td></tr>
          <tr><td><strong>Sector</strong></td><td><%= answers.industry %></td></tr>
          <tr><td><strong>Servers</strong></td><td><%= answers.servers || 'Niet gespecificeerd' %></td></tr>
          <tr><td><strong>Opslag</strong></td><td><%= answers.storage || 'Niet gespecificeerd' %></td></tr>
          <tr><td><strong>Virtualisatie</strong></td><td><%= answers.virtualization || 'Niet gespecificeerd' %></td></tr>
          <tr><td><strong>Data volume</strong></td><td><%= answers.data_volume || 'Niet gespecificeerd' %></td></tr>
          <tr><td><strong>AI doelen</strong></td><td><%= answers.ai_goals || 'Niet gespecificeerd' %></td></tr>
        </table>
      </div>
    </section>

    <section class="section">
      <h3 class="section-title">2. Voorgestelde Architecture</h3>
      <div class="diagram">
        <pre class="ascii-diagram">
┌─────────────────────────────────────────────────────────────────┐
│                   DATA LAKEHOUSE ARCHITECTUUR                    │
├─────────────────────────────────────────────────────────────────┤
│  ┌───────────┐  ┌───────────┐  ┌───────────┐  ┌───────────┐   │
│  │  Bronnen  │  │  Ingest   │  │  Opslag   │  │  Compute  │   │
│  │           │  │           │  │           │  │           │   │
│  │• OLTP     │  │• Kafka    │  │• MinIO    │  │• Spark    │   │
│  │• API's    │──│• Flink    │──│• Iceberg  │──│• Trino    │   │
│  │• Streaming│  │• Airbyte  │  │• Hive     │  │• Flink    │   │
│  │• IoT      │  │• CDC      │  │• S3/ADLS  │  │• Dremio   │   │
│  └───────────┘  └───────────┘  └───────────┘  └───────────┘   │
│                                     │                           │
│  ┌──────────────────────────────────┴──────────────────────┐   │
│  │                    AI/ML LAAG                             │   │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌─────────┐  │   │
│  │  │ Ollama/  │  │ vLLM/    │  │ MLflow/  │  │ Kubeflow│  │   │
│  │  │ Lama.cpp │  │ SGLang   │  │ Evidently│  │         │  │   │
│  │  └──────────┘  └──────────┘  └──────────┘  └─────────┘  │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                   │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │              DATACENTER INFRASTRUCTUUR                    │   │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌─────────┐  │   │
│  │  │ K8s/     │  │ Leaf-    │  │ Zero     │  │ Observa-│  │   │
│  │  │ Proxmox  │  │ Spine    │  │ Trust    │  │ bility  │  │   │
│  │  │ Cluster  │  │ 100GbE   │  │ Network  │  │ Stack   │  │   │
│  │  └──────────┘  └──────────┘  └──────────┘  └─────────┘  │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
        </pre>
      </div>
    </section>

    <section class="section">
      <h3 class="section-title">3. Data Lakehouse Ontwerp (<%= report.architecture.datalake.tier %> Tier)</h3>
      <div class="card-grid">
        <div class="card"><strong>Opslag</strong><br><%= report.architecture.datalake.storage %></div>
        <div class="card"><strong>Compute</strong><br><%= report.architecture.datalake.compute %></div>
        <div class="card"><strong>Catalogus</strong><br><%= report.architecture.datalake.catalog %></div>
        <div class="card"><strong>Processing</strong><br><%= report.architecture.datalake.processing %></div>
        <div class="card"><strong>Governance</strong><br><%= report.architecture.datalake.governance %></div>
        <div class="card"><strong>Tier</strong><br><span class="badge <%= report.architecture.datalake.tier %>"><%= report.architecture.datalake.tier %></span></div>
      </div>
    </section>

    <section class="section">
      <h3 class="section-title">4. AI Backend (<%= report.architecture.ai.tier %> Tier)</h3>
      <div class="card-grid">
        <div class="card"><strong>Model Serving</strong><br><%= report.architecture.ai.serving %></div>
        <div class="card"><strong>Orchestratie</strong><br><%= report.architecture.ai.orchestration %></div>
        <div class="card"><strong>Monitoring</strong><br><%= report.architecture.ai.monitoring %></div>
        <div class="card"><strong>Modellen</strong><br><%= report.architecture.ai.models %></div>
        <div class="card"><strong>Tier</strong><br><span class="badge <%= report.architecture.ai.tier %>"><%= report.architecture.ai.tier %></span></div>
      </div>
    </section>

    <section class="section">
      <h3 class="section-title">5. Implementatie Roadmap</h3>
      <% report.phases.forEach(function(phase) { %>
      <div class="phase">
        <h4><%= phase.name %></h4>
        <ul>
          <% phase.items.forEach(function(item) { %>
          <li><%= item %></li>
          <% }) %>
        </ul>
      </div>
      <% }) %>
    </section>

    <section class="section">
      <h3 class="section-title">6. Aanbevolen Tech Stack</h3>
      <div class="tech-stack">
        <div class="tech-item"><span class="tech-label">Virtualisatie</span><span class="tech-val"><%= report.architecture.infrastructure.virtualization %></span></div>
        <div class="tech-item"><span class="tech-label">Netwerk</span><span class="tech-val"><%= report.architecture.infrastructure.network %></span></div>
        <div class="tech-item"><span class="tech-label">Security</span><span class="tech-val"><%= report.architecture.infrastructure.security %></span></div>
        <div class="tech-item"><span class="tech-label">Monitoring</span><span class="tech-val"><%= report.architecture.infrastructure.monitoring %></span></div>
      </div>
    </section>

    <footer class="report-footer">
      <p>Gegenereerd door <strong>Mek-Tech AI Consultancy Framework</strong> &copy; <%= new Date().getFullYear() %></p>
      <p>Dit rapport is vertrouwelijk en uitsluitend bestemd voor <%= answers.company_name %>.</p>
      <button class="btn btn-primary" onclick="window.print()">Download PDF</button>
    </footer>
  </div>
</body>
</html>
