/* Welcome / demo intro overlay. window.IntroOverlay */

function IntroOverlay({ onClose, onTour }) {
  const points = [
    ["route", "Objectieve routekaart", "Subsidie- en leenroutes als kandidaten op basis van versioned bronregels — geen advies, wél navigeerbaar."],
    ["database", "Elke waarde een bron", "KvK, PDOK, splitsingsakte of documentextractie — met confidence. Niets zonder herkomst."],
    ["shield", "Human checks, system creates", "Het systeem bereidt voor; jij beslist via gates G2–G8. Export blijft geblokkeerd tot reviews kloppen."],
  ];
  return (
    <div className="scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal intro">
        <div className="intro-hero">
          <button className="mclose intro-x" onClick={onClose}><Icon name="xCircle" size={18} /></button>
          <div className="intro-brand">
            <Logo size={40} />
            <div className="ib-wm"><b>VVE Finance</b><span>Financieringsdossier</span></div>
          </div>
          <div className="intro-badge"><span className="dp-dot"></span>Interactieve demo</div>
          <h2 className="intro-title">Van rommelige VvE-input naar een controleerbaar dossier.</h2>
          <p className="intro-lead">Een workflow-operating-system voor de financieel adviseur: intake, routekaart, dataroom, scenario en ALV-stukken — jij houdt de regie, het systeem doet het voorwerk.</p>
        </div>
        <div className="intro-body">
          {points.map(([ic, t, d]) => (
            <div className="intro-pt" key={t}>
              <div className="ip-ic"><Icon name={ic} size={18} /></div>
              <div><div className="ip-t">{t}</div><div className="ip-d">{d}</div></div>
            </div>
          ))}
        </div>
        <div className="intro-foot">
          <span className="tiny muted">Alle namen, cijfers en documenten zijn illustratief.</span>
          <div className="row gap8">
            <button className="btn ghost" onClick={onClose}>Verken zelf</button>
            <button className="btn primary" onClick={onTour}>Open voorbeelddossier<Icon name="arrowRight" size={15} /></button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.IntroOverlay = IntroOverlay;