// Calculator — Passes-style "See Your Earning Potential" with sliders + computed numbers
// For rellay: time saved per week × roster size

function Calculator() {
  const [roster, setRoster] = React.useState(8);
  const [hoursPerArtist, setHoursPerArtist] = React.useState(11);

  const weekly = roster * hoursPerArtist;
  const yearly = weekly * 50;
  const dollarValue = Math.round(yearly * 30); // valued at $30/hr senior agent time

  return (
    <Section pad={120} id="calculator" label="04 Calculator">
      <BentoCard variant="dark" style={{ padding: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          {/* Left: copy */}
          <div>
            <Pill tone="cyan"><Icon name="sparkle" size={11} /> &nbsp;Time you get back</Pill>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(40px, 4.4vw, 60px)',
              fontWeight: 500,
              lineHeight: 1.0,
              letterSpacing: 0,
              margin: '20px 0 16px',
            }}>
              See your <br />
              <span style={{
                background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
              }}>weekly hours back.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', maxWidth: 420, margin: 0 }}>
              The average manager loses 11 hours a week per artist on inbox, scheduling, and follow-up. Move that load to the agent.
            </p>

            <div style={{ display: 'flex', gap: 32, marginTop: 36 }}>
              <Stat big={`${weekly}h`} small="Saved per week" />
              <Stat big={`${yearly.toLocaleString()}h`} small="Saved per year" />
              <Stat big="3.2×" small="Roster capacity" />
            </div>

            <button style={{
              marginTop: 36,
              padding: '14px 28px', borderRadius: 999,
              background: '#fff', color: '#000', border: 'none',
              fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            }}>
              Start a 14-day pilot
            </button>
          </div>

          {/* Right: panel */}
          <div style={{
            padding: 32,
            borderRadius: 20,
            background: '#050505',
            border: '1px solid rgba(255,255,255,0.08)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'var(--accent-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--accent)',
                border: '1px solid var(--accent-line)',
              }}>
                <Icon name="sliders" size={18} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>ROI calculator</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>Tune to your roster</div>
              </div>
            </div>

            <SliderField
              label="Artists you manage"
              value={roster} setValue={setRoster}
              min={1} max={40} step={1}
              format={v => v.toString()}
              minLabel="1" maxLabel="40"
            />
            <div style={{ height: 24 }} />
            <SliderField
              label="Hours/week per artist on bookings"
              value={hoursPerArtist} setValue={setHoursPerArtist}
              min={2} max={25} step={1}
              format={v => `${v}h`}
              minLabel="2h" maxLabel="25h"
            />

            <div style={{
              marginTop: 28,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
            }}>
              <div style={{
                padding: 18, borderRadius: 12,
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.06)',
              }}>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Hours back / week</div>
                <div style={{ fontSize: 26, fontWeight: 700, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>
                  {weekly}<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', marginLeft: 4 }}>hrs</span>
                </div>
              </div>
              <div style={{
                padding: 18, borderRadius: 12,
                background: 'linear-gradient(180deg, rgba(56,189,248,0.18), rgba(2,132,199,0.05))',
                border: '1px solid var(--accent-line)',
              }}>
                <div style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 6, fontWeight: 500 }}>Annual value</div>
                <div style={{ fontSize: 26, fontWeight: 700, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>
                  ${(dollarValue / 1000).toFixed(0)}K
                </div>
              </div>
            </div>

            <div style={{
              marginTop: 18,
              fontSize: 12, color: 'rgba(255,255,255,0.5)', lineHeight: 1.5,
            }}>
              <strong style={{ color: 'rgba(255,255,255,0.8)' }}>How this is computed:</strong> ops hours valued at $30/hr (senior manager rate). rellay typically reclaims 80–95% of inbox + scheduling time.
            </div>
          </div>
        </div>
      </BentoCard>
    </Section>
  );
}

function Stat({ big, small }) {
  return (
    <div>
      <div style={{ fontSize: 32, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{big}</div>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 }}>{small}</div>
    </div>
  );
}

function SliderField({ label, value, setValue, min, max, step, format, minLabel, maxLabel }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{label}</span>
        <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--accent)', fontVariantNumeric: 'tabular-nums' }}>{format(value)}</span>
      </div>
      <div style={{ position: 'relative', height: 6, background: 'rgba(255,255,255,0.08)', borderRadius: 999 }}>
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`,
          background: 'linear-gradient(90deg, var(--accent-deep), var(--accent))',
          borderRadius: 999,
        }} />
        <input
          type="range" min={min} max={max} step={step} value={value}
          onChange={e => setValue(Number(e.target.value))}
          style={{
            position: 'absolute', inset: -8, width: '100%', height: 22,
            opacity: 0, cursor: 'pointer',
          }}
        />
        <div style={{
          position: 'absolute', left: `calc(${pct}% - 9px)`, top: -6,
          width: 18, height: 18, borderRadius: 999,
          background: '#fff',
          boxShadow: '0 2px 8px rgba(0,0,0,0.4), 0 0 0 4px rgba(56,189,248,0.2)',
          pointerEvents: 'none',
        }} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'rgba(255,255,255,0.4)', fontFamily: 'JetBrains Mono, monospace' }}>
        <span>{minLabel}</span>
        <span>{maxLabel}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Calculator });