// ============================================================
// WAT KOST HET? · shared building blocks
// - kostCompute: simplified math (base €15k + €1.5k/mnd, systeem-meerprijs)
// - Cost-hero variants (A cards · B flow · C statement)
// - KostCalculator: simplified "wat levert het op" calculator (+ chart)
// - KostRefs: two reference cards (use case + client case)
// Reuses from roi_calc.jsx / roi_chart.jsx: roiFormatEUR, useAnimatedNumber, RoiChart
// ============================================================

// ---------- PRICING CONSTANTS ----------
const KST_BASE_IMPL = 15000;     // eenmalige implementatie (vast)
const KST_BASE_MONTH = 1500;     // per maand (vast)
const KST_COST_PER_FTE = 4500;   // belaste kosten per FTE / maand · achtergrond-aanname
const KST_RAMP = 3;

const KST_DEFAULT_STATE = {
  fte: 1.5,          // FTE waarvan repetitief werk wordt overgenomen
  ramp: KST_RAMP,    // opstartmaanden (gebruikt door de grafiek)
};

function kostCompute(s) {
  const impl = KST_BASE_IMPL;
  const monthlyFee = KST_BASE_MONTH;
  const revenuePerMonth = s.fte * KST_COST_PER_FTE;
  const netPerMonth = revenuePerMonth - monthlyFee;
  const ramp = KST_RAMP;
  const breakeven = netPerMonth > 0
    ? ramp + Math.ceil((impl + monthlyFee * ramp) / netPerMonth)
    : Infinity;
  const earningMonthsY1 = Math.max(0, 12 - ramp);
  const yearlyInvestment = impl + monthlyFee * 12;
  const yearlyRevenue = revenuePerMonth * earningMonthsY1;
  const yearlyNet = yearlyRevenue - yearlyInvestment;
  const roiPct = yearlyInvestment > 0 ? (yearlyNet / yearlyInvestment) * 100 : 0;
  return {
    impl, monthlyFee, revenuePerMonth, netPerMonth, breakeven,
    yearlyInvestment, yearlyRevenue, yearlyNet, roiPct, ramp,
    // aliases zodat RoiChart (uit roi_chart.jsx) hier 1-op-1 op draait
    monthlyFeeTotal: monthlyFee,
    totalImpl: impl,
    totalRevenuePerMonth: revenuePerMonth,
  };
}

// ---------- HERO · VARIANT A · twee prijskaarten ----------
function KostHeroCards() {
  return (
    <section className="kst-hero" data-screen-label="Kosten · kaarten">
      <div className="kst-hero-inner">
        <div className="kst-eyebrow"><span className="bar"></span>Wat kost het?</div>
        <h1>Eén agent, <span className="grad">één heldere prijs.</span></h1>
        <p className="kst-lede">
          Geen offerte-trajecten of verrassingen achteraf. Je weet vooraf precies waar je aan toe bent:
          <strong> een eenmalige bouwprijs en een vast bedrag per maand.</strong>
        </p>

        <div className="kst-cards">
          <div className="kst-card">
            <div className="kst-card-tag"><span className="dot"></span>Eenmalig · implementatie</div>
            <div className="kst-price">€&nbsp;15.000<span className="star">*</span></div>
            <p className="kst-card-desc">
              Het volledige bouwen van je agent: <strong>ontwerp, koppelingen en livegang</strong>.
              Je betaalt dit één keer.
            </p>
          </div>
          <div className="kst-card is-monthly">
            <div className="kst-card-tag"><span className="dot"></span>Daarna · per maand</div>
            <div className="kst-price">€&nbsp;1.500<span className="star">*</span><span className="per">/ mnd</span></div>
            <p className="kst-card-desc">
              <strong>Hosting, onderhoud en doorlopende verbeteringen</strong>. Je agent blijft
              meegroeien met je bedrijf.
            </p>
          </div>
        </div>

        <KostFootnote />
      </div>
    </section>
  );
}

// ---------- HERO · VARIANT B · prijslijn / flow ----------
function KostHeroFlow() {
  return (
    <section className="kst-hero" data-screen-label="Kosten · prijslijn">
      <div className="kst-hero-inner">
        <div className="kst-eyebrow"><span className="bar"></span>Wat kost het?</div>
        <h1>Van bouw naar <span className="grad">draaiende agent.</span></h1>
        <p className="kst-lede">
          Twee bedragen, meer is het niet. <strong>Je bouwt de agent één keer</strong> en houdt
          hem daarna draaiend voor een vast bedrag per maand.
        </p>

        <div className="kst-flow">
          <div className="kst-flow-step">
            <div className="l"><span className="idx">1</span>Eenmalig · implementatie</div>
            <div className="price">€&nbsp;15.000<span className="star">*</span></div>
            <p className="sub">Ontwerp, koppelingen en livegang van je agent. Één keer betalen.</p>
          </div>
          <div className="kst-flow-arrow" aria-hidden="true">
            <span className="glyph">→</span>
            <span className="lbl">daarna</span>
          </div>
          <div className="kst-flow-step is-monthly">
            <div className="l"><span className="idx">2</span>Doorlopend · per maand</div>
            <div className="price">€&nbsp;1.500<span className="star">*</span><span className="per">/ mnd</span></div>
            <p className="sub">Hosting, onderhoud en verbeteringen.</p>
          </div>
        </div>

        <KostFootnote />
      </div>
    </section>
  );
}

// ---------- HERO · VARIANT C · editorial statement ----------
function KostHeroStatement() {
  return (
    <section className="kst-hero kst-hero-statement" data-screen-label="Kosten · statement">
      <div className="kst-hero-inner">
        <div className="kst-eyebrow"><span className="bar"></span>Wat kost het?</div>
        <div className="kst-statement">
          <p>
            Je agent bouwen kost <span className="big once">€&nbsp;15.000</span><span className="star">*</span> eenmalig.
            <br />
            Daarna houd je hem draaiend voor <span className="big monthly">€&nbsp;1.500</span><span className="star">*</span> per maand. Geen verrassingen.
          </p>
        </div>
        <div className="kst-statement-meta">
          <div className="item">
            <div className="l">Eenmalig</div>
            <div className="v">Ontwerp · Bouw · Koppelingen</div>
          </div>
          <div className="item">
            <div className="l">Per maand</div>
            <div className="v">Hosting · Onderhoud · Verbeteringen</div>
          </div>
        </div>
        <KostFootnote />
      </div>
    </section>
  );
}

// ---------- Shared asterisk footnote ----------
function KostFootnote() {
  return (
    <div className="kst-foot">
      <span className="star" aria-hidden="true">*</span>
      <p>
        Werkt de agent met data uit meerdere softwaresystemen, dan rekenen we een
        beperkte meerprijs tot +66%, afhankelijk van complexiteit en aantal systemen.
        Alle bedragen zijn <span className="kst-btw">excl. btw</span>.
        <a className="kst-foot-link" href="kennisbank/wat-kost-een-ai-agent-het-eerlijke-antwoord-2.html">Waarom deze bedragen? Lees de blog van Alexander <span aria-hidden="true">&rarr;</span></a>
      </p>
    </div>
  );
}

// ---------- Inputs (segment + slider, reusing roi.css) ----------
function KostSegment({ value, onChange, options }) {
  return (
    <div className="roi-segment" style={{ '--cols': options.length }}>
      {options.map(opt => (
        <button key={opt.value} type="button"
          className={value === opt.value ? 'active' : ''}
          onClick={() => onChange(opt.value)}>
          {opt.label}
        </button>
      ))}
    </div>
  );
}

function KostSlider({ min, max, step, value, onChange, ticks }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <React.Fragment>
      <input type="range" className="roi-slider"
        min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        style={{ '--value': pct + '%' }} />
      {ticks && (
        <div className="roi-slider-ticks">
          {ticks.map((t, i) => {
            const pos = ((t.value - min) / (max - min)) * 100;
            return <span key={i} className="t" style={{ left: pos + '%' }}>{t.label}</span>;
          })}
        </div>
      )}
    </React.Fragment>
  );
}

// ---------- Single compact control (FTE only) ----------
function KostControl({ state, setState }) {
  return (
    <div className="kst-control">
      <div className="kst-control-head">
        <span className="kst-control-label">Werk dat je uit handen geeft</span>
        <span className="kst-control-value">{state.fte.toFixed(1)} FTE</span>
      </div>
      <KostSlider
        min={0.5} max={4} step={0.5} value={state.fte}
        onChange={(v) => setState(s => ({ ...s, fte: v }))}
        ticks={[{value:0.5,label:'0,5'},{value:2,label:'2'},{value:4,label:'4'}]}
      />
    </div>
  );
}

// ---------- Result panel (slider strip + results) + chart ----------
function KostResult({ state, setState, calc }) {
  const netPerMonth = useAnimatedNumber(calc.netPerMonth, 500);
  const yearlyNet   = useAnimatedNumber(calc.yearlyNet, 500);
  return (
    <React.Fragment>
      <div className="roi-result-hero kst-panel kst-panel-open">
        <div className="kst-bc-grid">
          <div className="kst-bc-numbers">
            <div className="kst-panel-control">
              <div className="kst-control-head">
                <span className="kst-control-label">Werk dat je uit handen geeft</span>
                <span className="kst-control-value">{state.fte >= 5.5 ? '5,5+' : state.fte.toFixed(1)} FTE</span>
              </div>
              <KostSlider
                min={0.5} max={5.5} step={0.5} value={state.fte}
                onChange={(v) => setState(s => ({ ...s, fte: v }))}
                ticks={[{value:0.5,label:'0,5'},{value:3,label:'3'},{value:5.5,label:'5,5+'}]}
              />
            </div>

            <hr className="kst-panel-sep"/>

            <div className="eye"><span className="dot"></span>Resultaat</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>
              <div className="roi-result-stat">
                <div className="l">Netto winst jaar 1</div>
                <div className="v">{roiFormatEUR(yearlyNet, { k: true, sign: true })}</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' : '')}>
                  {(calc.roiPct >= 0 ? '+' : '') + Math.round(calc.roiPct)}%
                </div>
              </div>
              <div className="roi-result-mini">
                <div className="l">Vrijgespeeld</div>
                <div className="v pos">{state.fte >= 5.5 ? '5,5+' : state.fte.toFixed(1)} FTE</div>
              </div>
            </div>
          </div>

          <div className="kst-bc-chart">
            <div className="roi-chart-head">
              <div>
                <h3>24 maanden vooruit</h3>
              </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 className="roi-chart-wrap kst-bc-chartwrap">
              <RoiChart state={state} calc={calc} />
            </div>
          </div>
        </div>
      </div>

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

// ---------- Full calculator section ----------
function KostCalculator() {
  const [state, setState] = React.useState({ ...KST_DEFAULT_STATE });
  const calc = React.useMemo(() => kostCompute(state), [state]);
  return (
    <section className="roi-calc kst-calc" id="opbrengst" data-screen-label="Wat levert het op">
      <div className="kst-roi-intro">
        <div className="kst-eyebrow"><span className="bar"></span>ROI calculator</div>
        <h2>Helder, en <span className="grad">hoeveel levert het op?</span></h2>
        <p>Geef aan hoeveel repetitief werk je uit handen geeft en krijg een snelle indicatie van je netto winst per maand.</p>
      </div>
      <div className="kst-calc-body">
        <KostResult state={state} setState={setState} calc={calc} />
      </div>
    </section>
  );
}

// ---------- Reference cards ----------
function KostRefs({ lede }) {
  return (
    <section className="kst-refs" data-screen-label="Referenties">
      <div className="kst-refs-inner">
        <div className="eyebrow-big"><span className="bar"></span>Benieuwd wat het bij anderen oplevert?</div>
        <p className="kst-refs-lede">{lede || 'Zo pakte het uit bij echte klanten.'}</p>

        <div className="kst-rel-grid">
          {/* Client case · MySteel */}
          <a className="kst-rel-card is-client" href="client-case-mysteel-klantenserviceagent.html">
            <span className="kst-rel-kind"><span className="dot"></span>Client case · MySteel</span>
            <span className="kst-rel-title">Hoe MySteel 2 FTE vrijspeelde op de klantenservice.</span>
            <span className="kst-rel-metric">
              <span className="num">2 FTE</span>
              <span className="lbl">bespaard</span>
            </span>
            <span className="kst-rel-foot">
              <span className="kst-rel-tag">Klantenservice-agent</span>
              <span className="kst-rel-go">Lees de case <span className="arrow" aria-hidden="true">→</span></span>
            </span>
          </a>

          {/* Use case · factuurverwerking */}
          <a className="kst-rel-card" href="use-case-site-factuurverwerkings-agent.html">
            <span className="kst-rel-kind"><span className="dot"></span>Use case · Administratie</span>
            <span className="kst-rel-title">Hoe je 80% van je facturen automatisch verwerkt.</span>
            <span className="kst-rel-metric">
              <span className="num">80%</span>
              <span className="lbl">automatisch verwerkt</span>
            </span>
            <span className="kst-rel-foot">
              <span className="kst-rel-tag">Factuurverwerkings-agent</span>
              <span className="kst-rel-go">Zie de use case <span className="arrow" aria-hidden="true">→</span></span>
            </span>
          </a>
        </div>

        <div className="kst-refs-more">
          <span className="lbl">Of blader verder</span>
          <a className="kst-more-link" href="use-cases.html">Use cases <span className="arr" aria-hidden="true">→</span></a>
          <span className="kst-more-sep" aria-hidden="true">·</span>
          <a className="kst-more-link" href="client-cases.html">Client cases <span className="arr" aria-hidden="true">→</span></a>
          <span className="kst-more-sep" aria-hidden="true">·</span>
          <a className="kst-more-link" href="kennisbank.html">Kennisbank <span className="arr" aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  kostCompute, KST_DEFAULT_STATE,
  KostHeroCards, KostHeroFlow, KostHeroStatement, KostFootnote,
  KostCalculator, KostRefs,
});