// roi.jsx - interactive ROI calculator. Sliders → live annual savings, hours
// reclaimed, and FTE equivalents. Result shown on a Raisin Black panel for focal
// contrast (brand surface). On-brand: monochrome + Violet Blue, glass input card.

const WEEKS_PER_YEAR = 48;
const FTE_HOURS_YEAR = 40 * WEEKS_PER_YEAR; // 1920

const usd = (n) => 'US$' + Math.round(n).toLocaleString('en-US');
const num = (n) => Math.round(n).toLocaleString('en-US');

function RoiSlider({ label, value, min, max, step, onChange, format }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 'clamp(6px, 1vh, 10px)' }}>
        <span style={{ fontSize: 13.5, color: 'var(--fg-muted)' }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 650, fontSize: 16, color: 'var(--fg)', fontVariantNumeric: 'tabular-nums' }}>{format(value)}</span>
      </div>
      <input type="range" className="roi-range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{ '--fill': pct + '%' }} aria-label={label} />
    </div>
  );
}

function Roi() {
  const [people, setPeople] = React.useState(25);
  const [hours, setHours] = React.useState(10);
  const [cost, setCost] = React.useState(25);
  const [auto, setAuto] = React.useState(60);

  const hoursYear = people * hours * (auto / 100) * WEEKS_PER_YEAR;
  const savings = hoursYear * cost;
  const fte = hoursYear / FTE_HOURS_YEAR;

  const goContact = (e) => {
    e.preventDefault();
    const el = document.getElementById('plans');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section id="roi" data-screen-label="ROI" className="sec" aria-labelledby="roi-h"
      style={{ minHeight: 'calc(100svh - 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 'clamp(24px, 3.5vh, 56px)' }}>
      <div className="sec-wrap">
        <SectionHead eyebrow="ROI calculator" align="center" max={620} style={{ marginBottom: 'clamp(14px, 2vh, 26px)' }}
          sub="A quick estimate of the time and money we'd give your team back by building the right system. Move the sliders to match your reality.">
          <span id="roi-h">See what we'd <span className="accent">give back</span></span>
        </SectionHead>

        <div className="roi-grid">
          {/* inputs */}
          <Reveal className="glass eglass eglass-soft" style={{ borderRadius: 22, padding: 'clamp(16px, 2vh, 26px)', display: 'flex', flexDirection: 'column', gap: 'clamp(10px, 1.4vh, 18px)' }}>
            <RoiSlider label="People on manual tasks" value={people} min={1} max={250} step={1} onChange={setPeople} format={(v) => num(v)} />
            <RoiSlider label="Automatable hours / person / week" value={hours} min={1} max={30} step={1} onChange={setHours} format={(v) => v + ' h'} />
            <RoiSlider label="Average cost per hour" value={cost} min={10} max={120} step={1} onChange={setCost} format={(v) => usd(v)} />
            <RoiSlider label="Share we can take off your plate" value={auto} min={10} max={90} step={5} onChange={setAuto} format={(v) => v + '%'} />
            <p style={{ fontSize: 12, color: 'var(--fg-faint)', lineHeight: 1.6, margin: '4px 0 0' }}>
              Estimates assume ~{WEEKS_PER_YEAR} working weeks per year. The real scope is defined in Discovery. No commitment.
            </p>
          </Reveal>

          {/* result - Raisin Black panel for focal contrast */}
          <Reveal delay={120} className="roi-result eglass" style={{ borderRadius: 22, padding: 'clamp(18px, 2.2vh, 30px)', display: 'flex', flexDirection: 'column' }}>
            <p className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(235,233,233,0.5)', margin: 0 }}>What we'd hand back / year</p>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 650, fontSize: 'clamp(2.2rem, min(5.5vw, 7vh), 3.6rem)', lineHeight: 1.02, color: 'var(--platinum)', margin: 'clamp(6px, 1vh, 10px) 0 0', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{usd(savings)}</div>
            <p style={{ fontSize: 14, color: 'rgba(235,233,233,0.7)', margin: 'clamp(6px, 1vh, 10px) 0 0' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 650, color: 'var(--platinum)' }}>{num(hoursYear)}</span> hours reclaimed / year
            </p>

            <div style={{ height: 1, background: 'rgba(235,233,233,0.12)', margin: 'clamp(10px, 1.6vh, 20px) 0' }} />

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 650, fontSize: 'clamp(1.6rem, min(3vw, 4vh), 2.2rem)', color: 'var(--violet-soft)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{fte.toFixed(1)}</span>
              <span style={{ fontSize: 13.5, color: 'rgba(235,233,233,0.65)', lineHeight: 1.5 }}>full-time-equivalents we free up for higher-value work</span>
            </div>

            <p style={{ fontSize: 12.5, color: 'rgba(235,233,233,0.55)', lineHeight: 1.6, margin: 'clamp(12px, 1.8vh, 18px) 0 0' }}>
              This is the system we'd build with you, not a generic estimate.
            </p>

            <a href="#plans" onClick={goContact} className="gcta" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              padding: 'clamp(10px, 1.4vh, 14px) clamp(20px, 2.4vh, 24px)', borderRadius: 14, fontWeight: 600, fontSize: 15, textDecoration: 'none',
              background: 'var(--violet)', color: 'var(--platinum)', marginTop: 'clamp(16px, 2.4vh, 28px)',
              transition: 'background 200ms ease, transform 200ms ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
                        >See how to start
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Roi = Roi;