<?php
declare(strict_types=1);
/* ─── AI-endpoint (Gemini via Vertex, token-cache) ─── */
if(isset($_GET['ai'])){
  header('Content-Type: application/json; charset=UTF-8');
  $q=trim((string)($_POST['q']??''));
  if($q===''||mb_strlen($q)>600){ echo json_encode(['error'=>'Stel een korte vraag (max 600 tekens).']); exit; }
  if(!empty($_POST['website'])){ echo json_encode(['error'=>'Geblokkeerd.']); exit; }
  ini_set('session.cookie_domain',''); session_set_cookie_params(['domain'=>'','path'=>'/','secure'=>true,'httponly'=>true,'samesite'=>'Lax']); session_start();
  $_SESSION['ai_n']=($_SESSION['ai_n']??0)+1;
  if($_SESSION['ai_n']>25){ echo json_encode(['error'=>'Veel vragen gesteld — bel ons gerust: 070 720 0090.']); exit; }
  $rd=function(){for($k=0;$k<4;$k++){$t=@trim((string)@file_get_contents('/tmp/gcp-imagen-token'));if($t!=='')return $t;usleep(150000);}return '';}; $TOKEN=$rd();
  if($TOKEN===''){ echo json_encode(['error'=>'Even niet beschikbaar — bel 070 720 0090.']); exit; }
  $sys="Je bent de AI-assistent van PandFix, loodgieter in Den Haag en de Randstad (lekkage, lekdetectie, sanitair, cv, elektra, ontstopping). Een klant beschrijft een probleem. Antwoord kort en behulpzaam in het Nederlands (max 85 woorden): 1) waarschijnlijke oorzaak, 2) wat de klant nu zelf kan doen + of het spoed is, 3) een vriendelijke uitnodiging om vrijblijvend een offerte aan te vragen. Verzin NOOIT prijzen of harde beloftes. Geen markdown-symbolen. Niet-loodgieterszaken: zeg vriendelijk dat je voor loodgieters/installatie bent.";
  $url="https://aiplatform.googleapis.com/v1/projects/it-live-493723/locations/global/publishers/google/models/gemini-2.5-flash:generateContent";
  $body=json_encode(['systemInstruction'=>['parts'=>[['text'=>$sys]]],'contents'=>[['role'=>'user','parts'=>[['text'=>$q]]]],'generationConfig'=>['maxOutputTokens'=>500,'temperature'=>0.6,'thinkingConfig'=>['thinkingBudget'=>0]]]);
  $txt=null;
  for($try=0;$try<3 && ($txt===null||$txt==='');$try++){
    if($try>0){ usleep(400000); $TOKEN=$rd()?:$TOKEN; }
    $c=curl_init($url); curl_setopt_array($c,[CURLOPT_RETURNTRANSFER=>1,CURLOPT_POST=>1,CURLOPT_POSTFIELDS=>$body,CURLOPT_TIMEOUT=>30,CURLOPT_HTTPHEADER=>["Authorization: Bearer $TOKEN","Content-Type: application/json"],CURLOPT_SSL_VERIFYPEER=>0]);
    $r=curl_exec($c); $code=curl_getinfo($c,CURLINFO_HTTP_CODE); curl_close($c);
    if($code==200){ $j=json_decode((string)$r,true); $txt=$j['candidates'][0]['content']['parts'][0]['text']??null; }
  }
  echo json_encode($txt?['answer'=>trim($txt)]:['error'=>'Even niet beschikbaar — bel 070 720 0090.']); exit;
}
?><!doctype html><html lang="nl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>AI-loodgieter — direct hulp & advies | PandFix</title>
<meta name="description" content="Beschrijf uw probleem en krijg direct advies van onze AI-loodgieter. Lekkage, cv, sanitair, elektra — Den Haag & de Randstad.">
<style>
:root{--blue:#0E5F8F;--blue2:#2b8cff;--teal:#13A89A;--ink:#0b1623}
*{margin:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#eaf1fb;line-height:1.55;background:radial-gradient(1200px 700px at 50% -8%,#0d2742,#070f1b 70%);min-height:100vh}
.top{display:flex;align-items:center;gap:11px;padding:16px 20px}.mk{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:30px;height:30px}.mk i{border-radius:5px}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 70px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(43,140,255,.13);border:1px solid rgba(43,140,255,.3);padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:600;color:#7fb4ff;margin-bottom:18px}
.orb{width:9px;height:9px;border-radius:50%;background:#2fd6c4;box-shadow:0 0 0 0 rgba(47,214,196,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,214,196,.5)}70%{box-shadow:0 0 0 9px rgba(47,214,196,0)}100%{box-shadow:0 0 0 0 rgba(47,214,196,0)}}
h1{font-size:2.1rem;line-height:1.12;margin-bottom:10px}h1 span{color:#2fd6c4}
.lead{color:#a9c0e0;margin-bottom:24px;font-size:1.05rem}
.box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px}
textarea{width:100%;min-height:90px;background:#0a1730;border:1px solid #2a3f63;border-radius:12px;color:#eaf1fb;font:inherit;font-size:16px;padding:14px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.chips button{background:#0a1730;border:1px solid #2a3f63;color:#bcd0ee;border-radius:999px;padding:8px 13px;font-size:.86rem;cursor:pointer}
.chips button:hover{border-color:var(--blue2);color:#fff}
.go{margin-top:6px;width:100%;padding:15px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.go:disabled{opacity:.6}
.answer{margin-top:18px;background:linear-gradient(180deg,rgba(19,168,154,.12),rgba(19,168,154,.04));border:1px solid rgba(47,214,196,.25);border-radius:14px;padding:18px 18px 18px 18px;display:none}
.answer.show{display:block}
.ahead{display:flex;align-items:center;gap:9px;font-weight:700;color:#7fefe0;margin-bottom:8px;font-size:.9rem}
.atxt{color:#eaf6f3;white-space:pre-wrap;min-height:1.4em}
.cur{display:inline-block;width:8px;height:1.05em;background:#2fd6c4;vertical-align:-2px;animation:blink .9s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{flex:1;min-width:150px;text-align:center;padding:13px;border-radius:11px;font-weight:700;text-decoration:none}
.btn-p{background:#fff;color:var(--blue)}.btn-g{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.dis{color:#7587a0;font-size:.78rem;margin-top:14px}.honey{position:absolute;left:-9999px}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7fefe0;margin:0 1px;animation:b 1s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes b{0%,100%{opacity:.3}50%{opacity:1}}
</style></head><body>
<div class="top"><span class="mk"><i style="background:#2b8cff"></i><i style="background:#E8502E"></i><i style="background:#F5A623"></i><i style="background:#13A89A"></i></span><b>PandFix</b></div>
<div class="wrap">
  <span class="eyebrow"><span class="orb"></span> AI-LOODGIETER · DIRECT ADVIES</span>
  <h1>Beschrijf uw probleem,<br>krijg <span>meteen</span> advies.</h1>
  <p class="lead">Onze AI-loodgieter denkt direct met u mee — waarschijnlijke oorzaak, wat u nu kunt doen, en of het spoed is. Voor heel Den Haag &amp; de Randstad.</p>
  <div class="box">
    <textarea id="q" placeholder="Bijv. Er lekt water onder mijn gootsteen en de keukenvloer wordt nat..."></textarea>
    <input class="honey" id="hp" tabindex="-1" autocomplete="off">
    <div class="chips">
      <button data-q="Er lekt water onder mijn gootsteen en de vloer wordt nat.">💧 Lekkage gootsteen</button>
      <button data-q="Mijn cv-ketel geeft een storing en er is geen warm water.">🔥 CV-storing</button>
      <button data-q="De afvoer van mijn douche is verstopt en loopt niet weg.">🚿 Verstopte afvoer</button>
      <button data-q="Ik zie een vochtplek op mijn plafond, mogelijk een lekkage.">🔎 Vochtplek plafond</button>
    </div>
    <button class="go" id="go" onclick="ask()">Vraag de AI-loodgieter →</button>
    <div class="answer" id="ans">
      <div class="ahead"><span class="orb"></span> AI-loodgieter</div>
      <div class="atxt" id="atxt"></div>
      <div class="cta" id="cta" style="display:none">
        <a class="btn btn-p" href="offerte.php">Vrijblijvend offerte aanvragen →</a>
        <a class="btn btn-g" href="tel:0707200090">Bel direct 070 720 0090</a>
      </div>
    </div>
    <p class="dis">AI-advies is indicatief en vervangt geen inspectie ter plaatse. Geen prijzen of garanties.</p>
  </div>
</div>
<script>
var qel=document.getElementById('q'),go=document.getElementById('go'),ans=document.getElementById('ans'),atxt=document.getElementById('atxt'),cta=document.getElementById('cta');
document.querySelectorAll('.chips button').forEach(function(b){b.onclick=function(){qel.value=b.dataset.q;qel.focus();}});
function type(t){var i=0;atxt.innerHTML='<span class="cur"></span>';(function step(){if(i<=t.length){atxt.textContent=t.slice(0,i);atxt.insertAdjacentHTML('beforeend','<span class="cur"></span>');i+=2;setTimeout(step,12);}else{atxt.textContent=t;cta.style.display='flex';}})();}
function ask(){var q=qel.value.trim();if(q.length<5){qel.focus();return;}
  go.disabled=true;ans.classList.add('show');cta.style.display='none';atxt.innerHTML='<span class="dots"><span></span><span></span><span></span></span>';
  var fd=new FormData();fd.append('q',q);fd.append('website',document.getElementById('hp').value);
  fetch('assistent.php?ai=1',{method:'POST',body:fd}).then(function(r){return r.json()}).then(function(j){
    go.disabled=false; if(j.answer){type(j.answer);}else{atxt.textContent=j.error||'Even niet gelukt. Bel gerust 070 720 0090.';cta.style.display='flex';}
  }).catch(function(){go.disabled=false;atxt.textContent='Even niet gelukt. Bel gerust 070 720 0090.';cta.style.display='flex';});}
qel.addEventListener('keydown',function(e){if((e.ctrlKey||e.metaKey)&&e.key==='Enter')ask();});
</script>
</body></html>
