// Recovery Calculator
function RecoveryCalculator() {
  const [adsense, setAdsense] = React.useState(40);
  const [years, setYears] = React.useState(3);
  const [w8, setW8] = React.useState('no');
  const [ftc, setFtc] = React.useState('no');

  const fmt = (n) => {
    const r = Math.round(n);
    return '₹' + r.toLocaleString('en-IN');
  };
  const fmtL = (n) => {
    if (n >= 100) return '₹' + (n / 100).toFixed(2) + ' Cr';
    return '₹' + n.toFixed(1) + ' L';
  };

  const annual = adsense * 100000;
  const currentRate = w8 === 'yes' ? 0.15 : 0.24;
  const correctRate = 0.15;
  const overWithheld = (currentRate - correctRate) * annual;
  const ftcLost = ftc === 'no' ? correctRate * annual : 0;
  const perYear = overWithheld + ftcLost;
  const total = perYear * years;

  return (
    <div className="calc">
      <div className="calc-form">
        <div className="eyebrow line" style={{ marginBottom: 24 }}>RECOVERY CALCULATOR / V1</div>
        <h2 className="h2" style={{ marginBottom: 28 }}>
          Tell us <em>three</em> things.
        </h2>

        <div className="calc-row">
          <div className="calc-label"><span>Annual AdSense revenue</span><span className="v">{fmtL(adsense)}</span></div>
          <input type="range" min="5" max="500" step="5" value={adsense} onChange={(e) => setAdsense(+e.target.value)} className="calc-slider" />
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', display: 'flex', justifyContent: 'space-between' }}>
            <span>₹5 L</span><span>₹5 Cr</span>
          </div>
        </div>

        <div className="calc-row">
          <div className="calc-label"><span>Years of history to audit</span><span className="v">{years} {years === 1 ? 'year' : 'years'}</span></div>
          <div className="calc-toggle-row">
            {[1, 2, 3, 4].map((y) => (
              <div key={y} className={`calc-toggle ${years === y ? 'active' : ''}`} onClick={() => setYears(y)}>{y}</div>
            ))}
          </div>
        </div>

        <div className="calc-row">
          <div className="calc-label"><span>W-8BEN on file with Google?</span></div>
          <div className="calc-toggle-row">
            <div className={`calc-toggle ${w8 === 'yes' ? 'active' : ''}`} onClick={() => setW8('yes')}>Yes (15% rate)</div>
            <div className={`calc-toggle ${w8 === 'no' ? 'active' : ''}`} onClick={() => setW8('no')}>No (24% rate)</div>
            <div className={`calc-toggle ${w8 === 'maybe' ? 'active' : ''}`} onClick={() => { setW8('no'); }}>Not sure</div>
          </div>
        </div>

        <div className="calc-row">
          <div className="calc-label"><span>Form 67 / FTC claimed in ITR?</span></div>
          <div className="calc-toggle-row">
            <div className={`calc-toggle ${ftc === 'yes' ? 'active' : ''}`} onClick={() => setFtc('yes')}>Yes</div>
            <div className={`calc-toggle ${ftc === 'no' ? 'active' : ''}`} onClick={() => setFtc('no')}>No</div>
          </div>
        </div>
      </div>

      <div className="calc-out">
        <div className="out-label">[ ESTIMATED RECOVERABLE ]</div>
        <div className="out-amount">{fmt(total)}</div>
        <div className="out-sub">
          Across {years} fiscal year{years > 1 ? 's' : ''} of AdSense income at {fmtL(adsense)}/yr. Estimate based on DTAA Article 25 and Section 90 of the Income Tax Act, 1961.
        </div>
        <div className="out-rows">
          <div className="out-row"><span className="k">Over-withholding (US side)</span><span className="v">{fmt(overWithheld * years)}</span></div>
          <div className="out-row"><span className="k">FTC not previously claimed</span><span className="v">{fmt(ftcLost * years)}</span></div>
          <div className="out-row"><span className="k">Filing window (s.139(5))</span><span className="v">{years} {years === 1 ? 'year' : 'years'}</span></div>
          <div className="out-row total"><span className="k">Total recoverable</span><span className="v">{fmt(total)}</span></div>
        </div>
        <div className="out-cta">
          <a href="contact.html?audience=creator" className="btn btn-primary">Get the exact number →</a>
          <a href="agents.html" className="btn btn-ghost">How it works</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RecoveryCalculator });