/* Estimator — "How much could I get?" A friendly, two-input estimator:
   household size + monthly income → estimated monthly SNAP benefit.
   Uses verified FY2026 (Oct 2025–Sep 2026) 48-state max allotments and the real
   benefit formula (max allotment − 30% of net income), simplified for clarity.
   Clearly labelled as an estimate. */
function Estimator({ lang }) {
  const { Button, Pill } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;

  // FY2026 48-state + DC maximum monthly allotments
  const MAX = { 1: 298, 2: 546, 3: 785, 4: 994, 5: 1183, 6: 1421, 7: 1571, 8: 1789 };
  // FY2026 standard deductions
  const STD = { 1: 209, 2: 209, 3: 209, 4: 223, 5: 261, 6: 299, 7: 299, 8: 299 };
  // FY2026 gross monthly income limit (130% FPL), 48 states + DC
  const GROSS = { 1: 1696, 2: 2292, 3: 2888, 4: 3483, 5: 4079, 6: 4675, 7: 5271, 8: 5867 };
  const MIN_BENEFIT = 24;

  const [size, setSize] = React.useState(3);
  const [income, setIncome] = React.useState(1200);

  // Simplified estimate: net ≈ gross − 20% earned-income deduction − standard deduction
  const net = Math.max(0, income - income * 0.20 - STD[size]);
  const raw = Math.round(MAX[size] - 0.30 * net);
  const overLimit = income > GROSS[size];
  const estimate = raw <= 0 ? (overLimit ? 0 : MIN_BENEFIT) : Math.max(raw, income > 0 ? MIN_BENEFIT : MAX[size]);
  const shown = overLimit ? null : Math.min(estimate, MAX[size]);

  const fmt = (n) => '$' + n.toLocaleString('en-US');

  return (
    <section id="estimate" style={{ padding: 'var(--space-20) 0', background: 'var(--gold-100)' }}>
      <div className="oasis-container">
        <SectionHead
          center
          eyebrow={t(lang, 'How much could I get?', '¿Cuánto podría recibir?')}
          title={t(lang, 'Get a quick estimate', 'Obtén un estimado rápido')}
          intro={t(lang, 'Move the two sliders for a rough idea of your monthly benefit. This is only an estimate — the real amount is decided when you apply.', 'Mueve los dos controles para una idea aproximada de tu beneficio mensual. Esto es solo un estimado — la cantidad real se decide cuando solicitas.')}
        />

        <div style={{ maxWidth: 920, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-6)', alignItems: 'stretch' }}>
          {/* Inputs */}
          <div style={{ background: 'var(--surface-raised)', border: '1.5px solid var(--border-soft)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', boxShadow: 'var(--shadow-md)' }}>
            {/* Household size */}
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 800, color: 'var(--text-strong)', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h4)', marginBottom: 14 }}>
              <Icon name="Users" size={22} stroke="var(--forest-700)" />
              {t(lang, 'People in my home', 'Personas en mi hogar')}
            </label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {[1, 2, 3, 4, 5, 6, 7, 8].map((n) => {
                const on = size === n;
                return (
                  <button key={n} type="button" onClick={() => setSize(n)} style={{
                    width: 46, height: 46, borderRadius: 'var(--radius-md)', cursor: 'pointer',
                    fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18,
                    background: on ? 'var(--forest-700)' : 'var(--surface-sunk)',
                    color: on ? 'var(--cream-50)' : 'var(--text-body)',
                    border: `2px solid ${on ? 'var(--forest-700)' : 'transparent'}`,
                    boxShadow: on ? 'var(--shadow-sm)' : 'none',
                    transition: 'all var(--dur-fast) var(--ease-out)',
                  }}>{n === 8 ? '8+' : n}</button>
                );
              })}
            </div>

            {/* Income */}
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 800, color: 'var(--text-strong)', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h4)', marginBottom: 6 }}>
              <Icon name="Wallet" size={22} stroke="var(--forest-700)" />
              {t(lang, 'Money my home makes each month', 'Dinero que gana mi hogar al mes')}
            </label>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, color: 'var(--forest-700)', lineHeight: 1, margin: '4px 0 4px' }}>{fmt(income)}</div>
            <div style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', marginBottom: 10 }}>{t(lang, 'before taxes (gross)', 'antes de impuestos')}</div>
            <input type="range" min="0" max="4500" step="50" value={income} onChange={(e) => setIncome(+e.target.value)}
              className="oasis-range oasis-range-light" style={{ width: '100%' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
              <span>$0</span><span>$4,500</span>
            </div>
          </div>

          {/* Result */}
          <div style={{ background: 'linear-gradient(160deg, var(--forest-700), var(--forest-900))', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', boxShadow: 'var(--shadow-lg)', color: 'var(--cream-50)', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 70% at 80% 0%, rgba(227,161,44,0.18), transparent 55%)' }} />
            <div style={{ position: 'relative' }}>
              {shown === null ? (
                <React.Fragment>
                  <Pill tone="gold">{t(lang, 'Still worth applying', 'Vale la pena solicitar')}</Pill>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(26px, 4vw, 34px)', margin: '16px 0 10px', lineHeight: 1.15 }}>
                    {t(lang, 'Your income may be above the usual limit', 'Tu ingreso puede estar sobre el límite usual')}
                  </div>
                  <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 'var(--fs-body)', margin: 0 }}>
                    {t(lang, 'But costs like rent, childcare, and medical bills are subtracted first — so many people who think they earn too much still qualify. Apply to find out for free.', 'Pero costos como renta, cuidado de niños y gastos médicos se restan primero — así que muchas personas que creen ganar demasiado aún califican. Solicita gratis para averiguar.')}
                  </p>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--gold-400)', fontWeight: 800, letterSpacing: '0.04em', textTransform: 'uppercase', fontSize: 13 }}>
                    <Icon name="Sparkles" size={18} stroke="var(--gold-400)" />
                    {t(lang, 'You could get about', 'Podrías recibir alrededor de')}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, margin: '6px 0 2px', flexWrap: 'wrap' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(56px, 9vw, 80px)', color: 'var(--cream-50)', lineHeight: 0.9 }}>{fmt(shown)}</span>
                    <span style={{ fontSize: 'var(--fs-h4)', color: 'var(--text-on-forest-muted)', fontWeight: 700, flexShrink: 0 }}>{t(lang, '/mo', '/mes')}</span>
                  </div>
                  <div style={{ fontSize: 'var(--fs-small)', color: 'var(--text-on-forest-muted)', marginBottom: 18 }}>
                    {t(lang, `for a home of ${size === 8 ? '8 or more' : size}`, `para un hogar de ${size === 8 ? '8 o más' : size}`)} · {t(lang, 'that’s up to', 'hasta')} {fmt(shown * 12)} {t(lang, 'a year', 'al año')}
                  </div>
                  {/* bar showing share of max */}
                  <div style={{ height: 12, borderRadius: 999, background: 'var(--forest-800)', overflow: 'hidden', marginBottom: 8 }}>
                    <div style={{ height: '100%', width: Math.round((shown / MAX[size]) * 100) + '%', background: 'linear-gradient(90deg, var(--leaf-400), var(--gold-400))', borderRadius: 999, transition: 'width var(--dur-base) var(--ease-out)' }} />
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--text-on-forest-muted)' }}>
                    {t(lang, `Max for your size: ${fmt(MAX[size])}/mo`, `Máximo para tu tamaño: ${fmt(MAX[size])}/mes`)}
                  </div>
                </React.Fragment>
              )}
            </div>
          </div>
        </div>

        <div style={{ maxWidth: 920, margin: '18px auto 0', display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', justifyContent: 'space-between' }}>
          <p style={{ margin: 0, fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', maxWidth: 560, lineHeight: 'var(--lh-snug)' }}>
            {t(lang, 'Estimate only, based on FY2026 USDA figures. Your real benefit depends on your full situation and is set by Oklahoma DHS. An Oasis helper can walk you through it.', 'Solo un estimado, basado en cifras de USDA del año fiscal 2026. Tu beneficio real depende de tu situación completa y lo decide Oklahoma DHS. Un ayudante de Oasis puede guiarte.')}
          </p>
          <Button as="a" href="#apply" variant="primary" iconRight={<Icon name="ArrowRight" size={18} stroke="currentColor" />}>
            {t(lang, 'See how to apply', 'Ver cómo solicitar')}
          </Button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Estimator });