// ============================================================
// ROI CALCULATOR · main page assembly
// Topribbon (shared) · Hero · Calculator · Contact · Footer
// ============================================================

function RoiHero({ calc }) {
  const netPerMonth = useAnimatedNumber(calc.netPerEarningMonth, 500);
  const yearlyNet = useAnimatedNumber(calc.yearlyNet, 500);
  const breakeven = calc.breakeven;
  return (
    <section className="roi-hero">
      <div className="roi-hero-inner">
        <div>
          <div className="chip">
            <span className="bar"></span>
            ROI Calculator
          </div>
          <h1>
            Wat <span className="grad">levert<br/>het op?</span>
          </h1>
          <div className="roi-hero-meta">
            <div className="roi-hero-meta-item">
              <div className="l">Gebouwd op</div>
              <div className="v">10+ jaar ervaring</div>
            </div>
            <div className="roi-hero-meta-item">
              <div className="l">Toegepast bij</div>
              <div className="v">MKB</div>
            </div>
            <div className="roi-hero-meta-item">
              <div className="l">Live update</div>
              <div className="v">Bij elke klik</div>
            </div>
          </div>
        </div>

        <div className="roi-hero-preview">
          <div className="ph-eyebrow"><span className="live"></span>Jouw situatie · live</div>
          <div className="ph-num">{roiFormatEUR(netPerMonth)}</div>
          <div className="ph-sub">netto winst per maand · na opstartperiode</div>
          <div className="ph-row">
            <div className="ph-stat">
              <div className="l">Jaar 1 netto winst</div>
              <div className="v">{roiFormatEUR(yearlyNet, { k: true, sign: true })}</div>
            </div>
            <div className="ph-stat">
              <div className="l">Terugverdiend in</div>
              <div className="v">{isFinite(breakeven) ? `${breakeven} mnd` : '–'}</div>
            </div>
          </div>
          <a href="#calc" className="ph-jump">
            Stel jouw situatie in
            <span className="arr">↓</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function RoiInfo({ children }) {
  const ref = React.useRef(null);
  const [open, setOpen] = React.useState(false);
  const [pos, setPos] = React.useState({ top: 0, left: 0 });

  const updatePos = React.useCallback(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setPos({ top: r.bottom + 10, left: r.right });
  }, []);

  React.useEffect(() => {
    if (!open) return;
    window.addEventListener('scroll', updatePos, true);
    window.addEventListener('resize', updatePos);
    return () => {
      window.removeEventListener('scroll', updatePos, true);
      window.removeEventListener('resize', updatePos);
    };
  }, [open, updatePos]);

  const show = () => { updatePos(); setOpen(true); };
  const hide = () => setOpen(false);

  const tip = open ? ReactDOM.createPortal(
    <div
      className="roi-info-tip"
      role="tooltip"
      style={{ top: pos.top, left: pos.left }}
    >
      {children}
    </div>,
    document.body
  ) : null;

  return (
    <React.Fragment>
      <span
        ref={ref}
        className="roi-info"
        tabIndex="0"
        aria-label="Aannames onder de motorkap"
        onMouseEnter={show}
        onMouseLeave={hide}
        onFocus={show}
        onBlur={hide}
      >
        <span className="roi-info-glyph" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="16" x2="12" y2="11"/>
            <circle cx="12" cy="8" r="0.6" fill="currentColor" stroke="none"/>
          </svg>
        </span>
      </span>
      {tip}
    </React.Fragment>
  );
}

function RoiResult({ state, calc }) {
  const netPerMonth = useAnimatedNumber(calc.netPerEarningMonth, 500);
  const yearlyNet   = useAnimatedNumber(calc.yearlyNet, 500);
  const roiPct      = useAnimatedNumber(calc.roiPct, 500);
  const impl        = useAnimatedNumber(calc.totalImpl, 500);
  const monthlyFeeTotal = useAnimatedNumber(calc.monthlyFeeTotal, 500);
  const totalRevenuePerMonth = useAnimatedNumber(calc.totalRevenuePerMonth, 500);

  return (
    <React.Fragment>
      <div className="roi-result-hero">
        <div className="eye">
          <span className="dot"></span>Resultaat · update bij elke aanpassing
          <RoiInfo>
            <div className="rit-head">Onder de motorkap</div>
            <ul className="rit-list">
              <li><strong>1 agent</strong> · gerekend voor één implementatie</li>
              <li><strong>{state.fte.toFixed(1)} FTE vrijgespeeld</strong> · op basis van betrokken personen</li>
              <li><strong>3 maanden opstartperiode</strong> voordat opbrengst telt</li>
            </ul>
            <div className="rit-foot">Opbrengst is een indicatie op basis van vergelijkbare implementaties.</div>
          </RoiInfo>
        </div>

        <div className="primary">
          <div className="roi-result-stat primary-stat">
            <div className="l">Netto winst / maand</div>
            <div className="v">{roiFormatEUR(netPerMonth)}</div>
            <div className="vsub">na {state.ramp} maanden opstartperiode</div>
          </div>
          <div className="roi-result-stat">
            <div className="l">Netto winst jaar 1</div>
            <div className="v">{roiFormatEUR(yearlyNet, { k: true, sign: true })}</div>
            <div className="vsub">over volledige 12 maanden</div>
          </div>
        </div>

        <hr/>

        <div className="secondary">
          <div className="roi-result-mini">
            <div className="l">Break-even</div>
            <div className={'v ' + (isFinite(calc.breakeven) ? 'pos' : 'neg')}>
              {isFinite(calc.breakeven) ? `${calc.breakeven} mnd` : '–'}
            </div>
          </div>
          <div className="roi-result-mini">
            <div className="l">ROI jaar 1</div>
            <div className={'v ' + (calc.roiPct >= 0 ? 'pos' : 'neg')}>
              {(roiPct >= 0 ? '+' : '') + Math.round(roiPct)}%
            </div>
          </div>
          <div className="roi-result-mini">
            <div className="l">Vrijgespeeld</div>
            <div className="v pos">{state.fte.toFixed(1)} FTE</div>
          </div>
        </div>
      </div>

      <div className="roi-perAgent">
        <div className="roi-perAgent-card cost">
          <div className="l">Implementatie · eenmalig</div>
          <div className="v">{roiFormatEUR(impl, { k: true })}</div>
          <div className="n">1 agent · bouwen</div>
        </div>
        <div className="roi-perAgent-card cost">
          <div className="l">Maandelijkse kosten</div>
          <div className="v">{roiFormatEUR(monthlyFeeTotal)}</div>
          <div className="n">Verbeteringen en hosting</div>
        </div>
        <div className="roi-perAgent-card rev">
          <div className="l">Opbrengst / maand</div>
          <div className="v">{roiFormatEUR(totalRevenuePerMonth, { k: true })}</div>
          <div className="n">{state.fte.toFixed(1)} FTE vrijgespeeld</div>
        </div>
      </div>

      <div className="roi-disclaimer">
        Opbrengst is een indicatie op basis van vergelijkbare implementaties en aannames.
      </div>
    </React.Fragment>
  );
}

function RoiAssumptions({ state, calc }) {
  return (
    <div className="roi-assumptions">
      <h4>Onder de motorkap</h4>
      <ul>
        <li>
          Een agent vervangt <strong>{state.fte.toFixed(1)} FTE</strong> aan repetitief werk
          in <strong>{state.dept === 'klantservice' ? 'klantservice' : state.dept}</strong>.
        </li>
        <li>
          We rekenen <strong>3× de maandelijkse fee</strong> als opbrengst per FTE
          (loonkosten + indirecte kosten + foutreductie).
        </li>
        <li>
          Implementatie schaalt met complexiteit: <strong>{state.axis1 + state.axis2 === 0 ? 'eenvoudig' : state.axis1 + state.axis2 >= 3 ? 'complex' : 'middel'}</strong> ·
          {' '}{roiFormatEUR(calc.impl, { k: true })} per agent.
        </li>
        <li>
          Aanloopperiode <strong>{state.ramp} maanden</strong> waarin kosten lopen
          maar opbrengsten nog niet meetellen.
        </li>
        {state.dept === 'klantservice' && (
          <li>
            Volume klantservice: <strong>{state.conversations.toLocaleString('nl-NL')} conversaties / jaar</strong>
            {' '}(staffel-tarief: {roiFormatEUR(calc.convCostMonthly)} / maand).
          </li>
        )}
        <li>
          Alle prijzen exclusief BTW · indicatief · feitelijke aanbieding op maat.
        </li>
      </ul>
    </div>
  );
}

// ---------- Page ----------
function RoiApp() {
  const [state, setState] = React.useState({ ...ROI_DEFAULT_STATE });
  const calc = React.useMemo(() => roiCompute(state), [state]);

  return (
    <React.Fragment>
      <HmTopribbon activeLabel="Wat levert het op?" homePrefix="Homepage.html" />

      <RoiHero calc={calc} />

      <section className="roi-calc" id="calc">
        <div className="roi-calc-inner">
          <RoiInputs state={state} setState={setState} />

          <div className="roi-results">
            <RoiResult state={state} calc={calc} />

            <div className="roi-chart-card">
              <div className="roi-chart-head">
                <div>
                  <h3>24 maanden vooruit</h3>
                  <p>Cumulatieve kosten, opbrengsten en netto winst.</p>
                </div>
                <div className="roi-chart-legend">
                  <span className="item"><span className="swatch" style={{background:'linear-gradient(90deg,#FB993F,#F83C72)'}}></span>Kosten</span>
                  <span className="item"><span className="swatch" style={{background:'#0E9F71'}}></span>Opbrengst</span>
                  <span className="item"><span className="swatch" style={{background:'linear-gradient(180deg,#8D0D9C,#4D01B4)'}}></span>Netto winst</span>
                </div>
              </div>
              <div style={{ height: 340 }} className="roi-chart-wrap">
                <RoiChart state={state} calc={calc} />
              </div>
            </div>

          </div>
        </div>
      </section>

      <HmContact />
      <HmFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RoiApp />);