/* global React */
(function () {
  const T = window.SC_T;

  function Stepper({ active, steps }) {
    return (
      <div style={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
        {steps.map((s, i) => {
          const done = i < active, isActive = i === active;
          return (
            <React.Fragment key={i}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, flexShrink: 0 }}>
                <div style={{ position: 'relative', width: 32, height: 32 }}>
                  {isActive && (
                    <>
                      <span style={{ position: 'absolute', inset: -6, borderRadius: 999, border: `2px solid ${T.accent}`, animation: 'sc-ring 1.6s ease-out infinite' }} />
                      <span style={{ position: 'absolute', inset: -3, borderRadius: 999, background: T.accentSoft, opacity: 0.6 }} />
                    </>
                  )}
                  <div style={{
                    position: 'relative', width: 32, height: 32, borderRadius: 999,
                    background: done || isActive ? T.accent : '#fff',
                    border: done || isActive ? `2px solid ${T.accent}` : `2px solid ${T.border}`,
                    color: done || isActive ? '#fff' : T.inkMuted,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, fontWeight: 700, transition: 'all .3s ease',
                  }}>
                    {done ? (
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7l3.5 3.5L12 4" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    ) : (i + 1)}
                  </div>
                </div>
                <div style={{ fontSize: 12, fontWeight: isActive ? 600 : 500, color: isActive ? T.ink : done ? T.ink : T.inkMuted, whiteSpace: 'nowrap' }}>
                  {s}
                </div>
              </div>
              {i < steps.length - 1 && (
                <div style={{ flex: 1, height: 2, margin: '15px 8px 0', background: i < active ? T.accent : T.border, borderRadius: 999, transition: 'background .3s ease' }} />
              )}
            </React.Fragment>
          );
        })}
      </div>
    );
  }

  window.Stepper = Stepper;
})();