const { useState, useEffect, useRef } = React;

const TYPE_OPTIONS = [
  {
    label: 'Web App', multiplier: 1.0,
    desc: 'Eén organisatie, in de browser. Denk aan een intern dashboard, planningstool of administratie-app. Inclusief gebruikersbeheer en beveiligde login.',
  },
  {
    label: 'PWA', multiplier: 1.3,
    desc: 'Alles van een Web App, plus: installeerbaar op telefoon en tablet, werkt offline en ondersteunt push-notificaties. Native app-gevoel zonder App Store.',
  },
  {
    label: 'SaaS Platform', multiplier: 1.5,
    desc: 'Meerdere klanten of vestigingen op één platform, elk met eigen data en gebruikers (multi-tenant). Inclusief rollenbeheer en facturatie-koppeling.',
  },
  {
    label: 'Enterprise Suite', multiplier: 1.8,
    desc: 'Meerdere gekoppelde modules met integraties naar uw bestaande systemen (ERP, CRM, boekhouding), single sign-on en audit-trails voor compliance.',
  },
];

const MAX_SCREENS = 30;
const MAX_USERS   = 200;

function Pricing() {
  const [screens, setScreens] = useState(8);
  const [users,   setUsers]   = useState(25);
  const [typeIdx, setTypeIdx] = useState(0);

  const isMax      = screens >= MAX_SCREENS;
  const isMaxUsers = users >= MAX_USERS;
  const base       = 4000;
  const screenCost = screens * 600;
  const userCost   = Math.round(Math.log(users + 1) * 800 / 100) * 100;
  const type       = TYPE_OPTIONS[typeIdx];
  const total      = Math.round((base + screenCost + userCost) * type.multiplier / 100) * 100;

  // Prijs telt soepel naar nieuwe waarde
  const [displayTotal, setDisplayTotal] = useState(total);
  const animRef = useRef(null);
  const currentRef = useRef(total);
  useEffect(() => {
    if (animRef.current) animRef.current.pause();
    const obj = { v: currentRef.current };
    animRef.current = anime({
      targets: obj, v: total,
      duration: 400, easing: 'easeOutQuad',
      update: () => {
        currentRef.current = obj.v;
        setDisplayTotal(Math.round(obj.v / 100) * 100);
      }
    });
  }, [total]);

  const fmt = (n) => '€\u00a0' + n.toLocaleString('nl-NL');

  return (
    <section id="pricing">
      <div className="pricing">
        <div className="pricing-header">
          <div>
            <span className="section-label">Investering</span>
            <h2>Wat kost uw project?</h2>
          </div>
          <p className="section-intro">Bereken een indicatie — en zie precies hoe die is opgebouwd. Geen verplichtingen, geen spam.</p>
        </div>

        <div className="calculator">
          <div className="calc-title">Project Estimator</div>
          <div className="calc-sub">Pas de sliders aan om een globale inschatting te krijgen</div>

          <div className="calc-group">
            <label>
              Aantal schermen / modules
              <span>{isMax ? '30+' : screens}</span>
            </label>
            <input type="range" min="3" max={MAX_SCREENS} value={screens}
              onChange={e => setScreens(+e.target.value)} />
            <div className="calc-hint">Een scherm = één pagina of functie, b.v. "klantoverzicht" of "facturen"</div>
          </div>

          <div className="calc-group">
            <label>
              Teamgrootte (gebruikers)
              <span>{isMaxUsers ? '200+' : users}</span>
            </label>
            <input type="range" min="5" max={MAX_USERS} step="5" value={users}
              onChange={e => setUsers(+e.target.value)} />
            <div className="calc-hint">Meer gebruikers vraagt om zwaardere infrastructuur en rollenbeheer</div>
          </div>

          <div className="calc-group">
            <label style={{marginBottom:'16px'}}>Type project</label>
            <div className="calc-options">
              {TYPE_OPTIONS.map((opt, i) => (
                <button
                  key={opt.label}
                  className={'calc-option' + (typeIdx === i ? ' active' : '')}
                  onClick={() => setTypeIdx(i)}
                >
                  {opt.label}
                </button>
              ))}
            </div>
            <div className="type-desc">{type.desc}</div>
          </div>

          <div className="calc-breakdown">
            <div className="breakdown-row">
              <span>Basisproject — architectuur, setup, beveiliging</span>
              <span>{fmt(base)}</span>
            </div>
            <div className="breakdown-row">
              <span>{isMax ? '30+' : screens} schermen × €600</span>
              <span>{isMax ? 'op maat' : fmt(screenCost)}</span>
            </div>
            <div className="breakdown-row">
              <span>Schaal voor {isMaxUsers ? '200+' : users} gebruikers</span>
              <span>{fmt(userCost)}</span>
            </div>
            <div className="breakdown-row">
              <span>{type.label} — factor ×{type.multiplier.toFixed(1)}</span>
              <span>{type.multiplier === 1 ? '—' : '+' + Math.round((type.multiplier - 1) * 100) + '%'}</span>
            </div>
          </div>

          <div className="calc-result">
            <div>
              <div className="result-label">{(isMax || isMaxUsers) ? 'Indicatie vanaf' : 'Indicatieve investering'}</div>
              <div className="result-note">Inclusief design, development &amp; 3 maanden support</div>
              {(isMax || isMaxUsers)
                ? <div className="result-note">Bij deze omvang maken we een offerte op maat — plan een gratis scoping-gesprek</div>
                : <div className="result-note">Ter vergelijking: traditionele bureaus rekenen voor vergelijkbaar werk doorgaans €60.000+</div>
              }
            </div>
            <div className="result-price">{(isMax || isMaxUsers) ? 'vanaf ' + fmt(displayTotal) : fmt(displayTotal)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });