// Reusable info-tooltip — shows a "?" with a hover/click popover explaining methodology

const { useState: useStateInfo } = React;

function InfoTip({ title, children, side = 'right' }) {
  const [open, setOpen] = useStateInfo(false);
  return (
    <span className="infotip" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
      <button className="infotip-btn" onClick={(e) => { e.stopPropagation(); setOpen(!open); }} aria-label="Methodologie">?</button>
      {open && (
        <div className={`infotip-pop side-${side}`} onClick={e => e.stopPropagation()}>
          {title && <div className="infotip-title">{title}</div>}
          <div className="infotip-body">{children}</div>
        </div>
      )}
    </span>
  );
}

// Confidence-tooltip — uitleg over hoe AI confidence-score wordt berekend
function ConfidenceTip() {
  return (
    <InfoTip title="Hoe wordt confidence berekend?">
      <p>De confidence-score (0–100%) is een gewogen samenstelling van:</p>
      <ul>
        <li><strong>Datakwaliteit</strong> — volledigheid + verseheid van bronnen die de hypothese onderbouwen</li>
        <li><strong>Reproduceerbaarheid</strong> — kan het effect in historische cohorten herleid worden?</li>
        <li><strong>Modelzekerheid</strong> — onzekerheidsinterval van de gebruikte attributiemodellen (Causal Impact, MMM)</li>
        <li><strong>Externe volatiliteit</strong> — hoe stabiel is de markt/het algoritme dat we modelleren?</li>
      </ul>
      <p className="tip-formula">conf = 0.35·DQ + 0.25·R + 0.25·M + 0.15·(1 − vol)</p>
      <p className="tip-foot">Bij &lt; 60% wordt het concept gemarkeerd voor menselijke review voordat publicatie.</p>
    </InfoTip>
  );
}

function ScenarioConfidenceTip() {
  return (
    <InfoTip title="Hoe modelleren we scenario-uitkomsten?">
      <p>Per scenario simuleren we 1.000 Monte-Carlo runs op basis van:</p>
      <ul>
        <li><strong>Historische baseline</strong> — 24 maanden klant-data per kanaal</li>
        <li><strong>Concurrent-signalen</strong> — SoV, prijsmonitor, AIO-tracker</li>
        <li><strong>Markt-elasticiteit</strong> — vraagcurves per categorie</li>
      </ul>
      <p>De getoonde uitkomst is de mediaan; confidence is het % runs dat binnen ±15% van die mediaan landt. Onder 60% adviseren we extra discovery voordat je commit.</p>
    </InfoTip>
  );
}

function RoiConfidenceTip() {
  return (
    <InfoTip title="Hoe rekenen we ROI door?">
      <p>De doorrekening is gebaseerd op:</p>
      <ul>
        <li><strong>Investering</strong> — som van mandagen × dagtarief + tooling</li>
        <li><strong>Maandelijkse opbrengst</strong> — geschat effect op de KPI × baseline-omzet, gecorrigeerd voor seizoen</li>
        <li><strong>Break-even</strong> — investering / maandelijkse opbrengst</li>
        <li><strong>12-maand horizon</strong> — opbrengst × runtime, met decay-factor voor langlopende cases</li>
      </ul>
      <p className="tip-foot">We rekenen conservatief: alleen incremental revenue boven baseline telt mee.</p>
    </InfoTip>
  );
}

window.InfoTip = InfoTip;
window.ConfidenceTip = ConfidenceTip;
window.ScenarioConfidenceTip = ScenarioConfidenceTip;
window.RoiConfidenceTip = RoiConfidenceTip;