<div style="max-width:600px;margin:20px auto;font-family:sans-serif;">
  <h3>EnterpriseAI – TPE Business Plan Generator</h3>
  <form id="tpe-form">
    <label>Company name*<br>
      <input name="company_name" required style="width:100%;padding:8px;">
    </label><br><br>
    <label>Industry<br>
      <input name="industry" style="width:100%;padding:8px;">
    </label><br><br>
    <label>Country<br>
      <input name="country" style="width:100%;padding:8px;">
    </label><br><br>
    <button type="submit" style="padding:10px 16px;background:#0ea5e9;color:#fff;border:none;border-radius:6px;cursor:pointer;">
      Genereer TPE Plan
    </button>
  </form>

  <pre id="tpe-output" style="margin-top:20px;white-space:pre-wrap;background:#f8fafc;border:1px solid #e2e8f0;padding:10px;border-radius:6px;">
Nog geen resultaat – vul het formulier in.
  </pre>
</div>

<script>
const CLOUD_RUN_URL = "https://tpe-gemini-solution-w62nxpihnq-ez.a.run.app"; // <-- vervang dit door jouw echte URL
const ENDPOINT = CLOUD_RUN_URL.replace(/\/$/, "") + "/mcp";

document.getElementById('tpe-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const fd = new FormData(e.target);
  const body = {
    company_name: fd.get('company_name'),
    industry: fd.get('industry'),
    country: fd.get('country'),
    language: "nl",
    detail_level: "medium",
    additional_context: "Volg strikt het TPE-framework en 3C.",
    assumptions_allowed: true
  };
  try {
    const res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    const data = await res.json();
    document.getElementById('tpe-output').textContent =
      data.content_markdown || JSON.stringify(data, null, 2);
  } catch (err) {
    document.getElementById('tpe-output').textContent = "